atmos
Contents
Quickstart 🔥
1. Clone this repository
git clone https://github.com/moonfacedesign/atmos project-name
2. Navigate to your project
cd project-name
Check over .eleventy.js
to see if you want to configure any Eleventy options differently.
3. Install required dependencies
npm install
4. Update site metadata
Edit values in _data/site.json
5. Start local development server
npm run start
This will run on localhost:8080
You can also run npm run build
to build your project
6. Deploy
Set these as your build settings:
build command npm run build
publish directory .www
Add these environments:
ENVIRONMENT production
NODE_ENV production
Features
- Built with
Eleventy
- 100's across the board with lighthouse
- SPA functionality with
tabs
- Progressive Web App
- Service Worker for offline use
- Styling with
TailwindCSS
- Tailwind JIT for fast styles generation
- CSS minification, inlined for fastest page render
- Maintenance-free post author archives
- Default pages including blog with tag support
- Netlify contact form
- Optional pipeline for minified inline JS
- Pre-builds and minifies your HTML
- Uses Markdown files for content
- Uses Nunjucks templates for layouts
- Complies with our
Ethical Design Guidelines
- 100% Javascript framework free
Overview
Structure
components
- Partials & macros Eleventy's components (default name is_includes
)layouts
- Pages & Sub-pages layouts.www
- Built site. This is yourpublish directory
when deploying (default name is_site
)_data
- For all Global data filespages
- All of your site's pages in markdownposts
- An example collection used in the blogscripts
- All scripts used by your sitestyles
- All styles used by your site. This is also where the Tailwind config isstatic
- All static content: images, fonts, video, audio etcimages
- All images used by your sitetype
- All fonts used by your site
404.md
- Custom 404 page for productionauthor.njk
- Author page paginationauthors.njk
- Author directory pagesitemap.njk
- Automatic sitemap for productiontags.njk
- Tags page pagination
Styling
TailwindCSS powers atmos' styling by default. You can learn how to remove it here.
styles
- All styles used by your site. This is also where the Tailwind config istailwind.config.js
- Tailwind config filetw.css
- Tailwind styles_output.css
- Processed Tailwind output styles
Sitemap
atmos automatically generates a sitemap from your content. This is found in sitemap.njk
and is processed into a xml
file during build.
Service worker
atmos is a Progressive Web App which means that is is optimized for mobile use. The service worker in atmos allows for your project to be cached by the humans browser so they can view your site offline; this allows for a better mobile experience.
About
We use atmos for our Eleventy projects because it houses everything we need to create a performant site. atmos does not claim to be the smallest nor to being the easiest boilerplate to get started with, we created atmos to work alongside the Moonface workflow and if it fits your project then that's just amazing!
Removing Tailwind
By default atmos uses TailwindCSS to generate styles. We understand that Tailwind is not for everyone and that in some projects it may be easier to return to css or sass. Here's how you would go about that:
- Remove Tailwind from your npm scripts
- Uninstall
tailwindcss
,postcss
andautoprefixer
- Remove this from
.eleventy.js
if (!process.env.ELEVENTY_ENV) {
eleventyConfig.addPassthroughCopy({ './styles/_output.css': '/styles/tw.css' });
}
- Remove this from
components/head.njk
{% if env.environment == "production" %}
{% set css %}
{% include "styles/_output.css" %}
{% endset %}
<style>{{ css | cssmin | safe }}</style>
{% else %}
<link rel="stylesheet" href="/styles/tw.css">
{% endif %}
And replace with:
{% set css %}
{% include "styles/your-styles.css" %}
{% endset %}
- Delete the
tailwind.config.js
and you should be all set!
Bug reports/help 👋
If you need any help or want to file a bug report, contact the Lead developer.