Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gregives/Twelvety

An Eleventy starter project built to be fast
https://github.com/gregives/Twelvety

11ty components critical-css eleventy minify responsive-images sass starter-project webp

Last synced: 4 months ago
JSON representation

An Eleventy starter project built to be fast

Awesome Lists containing this project

README 

        
# 🕛 Twelvety



[See the demo site](https://twelvety.netlify.app)



Twelvety is a pre-configured Eleventy starter project built to be fast. It includes:



- Component architecture

- CSS pipeline using Sass, PostCSS and CleanCSS

- JS pipeline using Browserify, Babel and Uglify

- Page-specific CSS and JS

- Inline critical CSS and defer non-critical CSS

- Minified HTML, CSS and JS

- Responsive picture shortcode **with AVIF and WebP support**

- Content-hash of assets



Write components like this:



```html



  
Twelvety



{% stylesheet 'scss' %}

  @import "mixins";



  .home {

    @include container;



    &__title {

      color: red;

    }

  }

{% endstylesheet %}



{% javascript %}

  console.log("Super fast 💨");

{% endjavascript %}

```



## Deploy to netlify



To quickly deploy your own instance of Twelvety to netlify, just click the button below and follow the instructions.



[![Deploy to netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gregives/twelvety)



**What will happen when I click this button?** Netlify will clone the Twelvety git repository to your GitHub account (it will ask your permission to do this), add the new repository to your netlify account and deploy it!



## Run Locally



Click the Use this template button at the top of this repository to make your own Twelvety repository in your GitHub account. Clone or download your new Twelvety repository onto your computer.



You'll need [Node.js](https://nodejs.org) and npm (included with Node.js). To install the required packages, run



```sh

npm install

```



### Commands



- Run `npm run serve` to run a development server and live-reload

- Run `npm run build` to build for production

- Run `npm run clean` to clean the output folder and Twelvety cache



The brains of Twelvety live in the `utils` folder: if you just want to make a website, then you don't need to touch anything inside `utils`. However, if you want to change any of the shortcodes, have a look around!



## Features



Twelvety sets up transforms, shortcodes and some sensible Eleventy options. Click the features below to learn how they work.



stylesheet paired shortcode





Use the `stylesheet` paired shortcode to include your Sass. You can import Sass files from your `styles` directory (defined in `.twelvety.js`) and from `node_modules`. The Sass will be rendered using [dart-sass](https://github.com/sass/dart-sass#javascript-api), passed into [PostCSS](https://github.com/postcss/postcss) (with [PostCSS Preset Env](https://github.com/csstools/postcss-preset-env) and [Autoprefixer](https://github.com/postcss/autoprefixer) for compatibility) and either minified using [clean-css](https://github.com/jakubpawlowicz/clean-css) or beautified by [JS Beautifier](https://github.com/beautify-web/js-beautify) (in production and development respectively).



```html

{% stylesheet 'scss' %}

  @import "normalize.css/normalize";

  @import "mixins";



  .home {

    @include container;



    color: $color--red;

  }

{% endstylesheet %}

```



The second parameter of the `stylesheet` paired shortcode is the language; currently, this does nothing and is included solely to align with Shopify's definition of the shortcode. If you want to use Sass **indented syntax**, you can change the `indentedSass` Twelvety option, found in `.twelvety.js`.



The `stylesheet` paired shortcode also has a third parameter, which by default is set to `page.url`, the URL of the current page being rendered. This means that only the required CSS is included in each page. You can make your own 'chunk' of CSS using this parameter, for example, a CSS file common to all pages of your website.



___



styles shortcode





The `styles` shortcode collects together all Sass written in `stylesheet` paired shortcodes for the given chunk and outputs the rendered CSS. The 'chunk' defaults to `page.url`, the URL of the current page being rendered.



```html



  {% styles page.url %}



{% capture css %}

  {% styles page.url %}

{% endcapture %}



```



Note that the `styles` shortcode must be placed below any `stylesheet` paired shortcodes in the template; see the `append` paired shortcode and transform for more information.



___



javascript paired shortcode





Include your JavaScript using the `javascript` paired shortcode. Twelvety uses [Browserify](http://browserify.org) so that you can `require('modules')` and [Babel](https://babeljs.io) so you can use the latest JavaScript. Your JavaScript will then be minified using [Uglify](https://github.com/mishoo/UglifyJS) in production or beautified by [JS Beautifier](https://github.com/beautify-web/js-beautify) in development.



```html

{% javascript %}

  const axios = require("axios");



  axios.get("/api/endpoint")

    .then((response) => {

      console.log("Yay, it worked!");

    })

    .catch((error) => {

      console.log("Uh oh, something went wrong");

    });

{% endjavascript %}

```



The `javascript` paired shortcode has a second parameter, which by default is set to `page.url`, the URL of the current page being rendered. This means that only the required JavaScript is included in each page. You can make your own 'chunk' of JavaScript using this parameter, for example, a JavaScript file for all vendor code.



The output of each `javascript` paired shortcode will be wrapped in an [IIFE](https://developer.mozilla.org/en-US/docs/Glossary/IIFE) so that your variables do not pollute global scope. If you want to define something on `window`, use `window.something =`.



___



script shortcode





The `script` shortcode collects together all the JavaScript for the given chunk and outputs the JavaScript (after transpilation and minification). The 'chunk' defaults to `page.url`, the URL of the current page being rendered.



```html



  {% script page.url %}



{% capture js -%}

  {% script page.url %}

{%- endcapture -%}



```



Note that the `script` shortcode must be placed below any `javascript` paired shortcodes in the template; usually this is not a problem as JavaScript is often included immediately preceding `