Need help with Twelvety?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

gregives
171 Stars 10 Forks MIT License 109 Commits 1 Opened issues

Description

An Eleventy starter project built to be fast

Services available

!
?

Need anything else?

Contributors list

# 337,037
HTML
Shell
critica...
Sass
101 commits

🕛 Twelvety

See the demo site

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:

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

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 and npm (included with Node.js). To install the required packages, run

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, passed into PostCSS (with PostCSS Preset Env and Autoprefixer for compatibility) and either minified using clean-css or beautified by JS Beautifier (in production and development respectively).

{% 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.

<!-- Inline all styles on current page -->
<style>
  {% styles page.url %}
</style>

<!-- Capture styles on current page -->
{% capture css %}
  {% styles page.url %}
{% endcapture %}
<!-- And output asset using `asset` shortcode -->
<link rel="stylesheet" href="%7B%%20asset%20css,%20'css'%20%%7D">

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 so that you can require('modules') and Babel so you can use the latest JavaScript. Your JavaScript will then be minified using Uglify in production or beautified by JS Beautifier in development.

{% javascript %}
  const axios = require('axios')

  axios.get('/api/endpoint')
    .then((response) =&gt; {
      console.log('Yay, it worked!')
    })
    .catch((error) =&gt; {
      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 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.

<!-- Inline all JavaScript on current page -->
<script>
  {% script page.url %}
</script>

<!-- Capture JavaScript on current page -->
{% capture js -%}
  {% script page.url %}
{%- endcapture -%}
<!-- And output asset using `asset` shortcode -->
<script src="%7B%%20asset%20js,%20'js'%20%%7D" defer></script>

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 `

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.