Massively is a free, fully responsive HTML5 + CSS3 site template designed by @ajlkn for HTML5 UP and released for free under the Creative Commons license. Remixed for Astro by @d_bozhinovski.
This is a port of the template for Astro, to be used as a theme. It's been Astroized as much as I deemed practical. I imagine it will need to change and evolve if there's interest in it, so I'm open to suggestions (and PRs) on how to Astroize it further.
- Run
npx degit https://github.com/DBozhinovski/astro-massively my-site-nameto get a "clean slate" copy of this repo. - Run
npm installinside the cloned directory to install dependencies. - Customize and deploy!
- Easily customizable for many use cases
- Consistent look and feel
- Uses
astro 3.0.13and should be able to support newer ones easily. - Huge set of components to fit any type of site (see the
/elementspage) - REALLY backward compatible - the design and styles were built a while ago 😅
- Sitemap, RSS feed, Google Fonts Optimizer...
TL;DR; Clone -> install -> ? -> profit. Standard Astro stuff.
In addition to the run-of-the-mill Astro project structures, you can find a /scripts directory in /src. These are
the animation scripts ported over from the original theme. They enable some features, such as the parallax effect for
the intro header/logo transition. They can be easily disabled, however, if you'd like to have a JS-less page (see
below).
Title, navigation links, social media links, URL etc. can be customized from the ./src/config.ts file.
Changing these allows you to easily have a ready-to-deploy webpage without touching any code.
The logo past the intro animation is just the text of the web page's title (found inside ./src/config.ts). If you need
to change that, it's enough to just add an image (or otherwise, customize the markup) in
./src/components/IntroHeader.astro. The element that needs it's markup changed is <header id="header">...</header>.
Any method of importing images available in Astro should do the trick.
The original template design has a jQuery-based 😧 parallax animation, that makes the site more of an eye-candy. Of course, it looks fairly decent without that animation as well. Disabling it is pretty easy:
- Remove all
<script>tags from./src/components/IntroHeader.astro - Remove the conditional element that renders if there's an intro prop passed to the component.
- As a bonus, if you'd like to keep it lighter in your site's repo, you can also remove the entire
./src/scriptsdirectory.
Initially, I planned on porting the animation to something lighter, ideally vanilla JS. I still plan on doing it, but it turned out not to be as trivial as I'd initially hoped. PRs are also welcome 😊.
All styles can be found inside ./src/styles/sass. They aren't changed much from what the original author did with
them, except customizing a few arithmetic operations to fix some SASS warnings.
The structure is fairly standard and what you'd expect to find in a regular SASS-based project.
As briefly mentioned above, the only piece of JS on the page, the animation, is based on jQuery. Some modifications had to be made to the scripts to make them work as modules so that Astro can optimize them, but other than that they are true to the original. They could do with a more "modern" touch, so PRs are welcome.
Replace the ./public/favicon.svg with your own favicon.svg file or change both the extension and the file inside
./src/layouts/Layout.astro, line 24.
The original template offers a fairly rich set of components, in the sense that it has a bunch of HTML blocks pre-styled. These offer a solid base for creating anything custom in the style of the template. Have a look at /generic and /elements.
Some of the basic building blocks of the template have already been separated as Astro components in the
./src/components/` directory and can be easily re-used for any customization.
This theme was originally published as a template on HTML5 UP, under the Creative Commons license. This port contains that info and attributes the author accordingly. The original author allows for non-attribution use of the templates via https://pixelarity.com.