All Projects → gregives → Twelvety

gregives / Twelvety

Licence: mit
An Eleventy starter project built to be fast

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Twelvety

Blueprint
A React-based UI toolkit for the web
Stars: ✭ 18,376 (+9323.59%)
Mutual labels:  components, sass
Design System Components
🛠 Component code and tests for the Australian Government design system
Stars: ✭ 696 (+256.92%)
Mutual labels:  components, sass
components
A Web component library that brings the power of TwicPics to your favorite web framework.
Stars: ✭ 21 (-89.23%)
Mutual labels:  components, responsive-images
Vx Ui
vue components 移动端UI组件库
Stars: ✭ 194 (-0.51%)
Mutual labels:  components, sass
Egeo
EGEO is the open-source UI library used to build Stratio's UI. It includes UI Components, Utilities, Services and much more to build user interfaces quickly and with ease. The library is distributed in AoT mode.
Stars: ✭ 69 (-64.62%)
Mutual labels:  components, sass
Vanilla Lazyload
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
Stars: ✭ 6,596 (+3282.56%)
Mutual labels:  webp, responsive-images
Gulp Tutorial
Code examples for my Gulp.js tutorial series
Stars: ✭ 383 (+96.41%)
Mutual labels:  webp, sass
Instapack
All-in-one TypeScript and Sass compiler for web applications! 📦 🚀
Stars: ✭ 131 (-32.82%)
Mutual labels:  minify, sass
Gulp Boilerplate
A boilerplate for building web projects with Gulp.js.
Stars: ✭ 840 (+330.77%)
Mutual labels:  minify, sass
Instantbootstrap
Instant Bootstrap is a quick and easy way to start creating bootstrap themes using LESS, SASS, GRUNT, and BOWER.
Stars: ✭ 5 (-97.44%)
Mutual labels:  minify, sass
Refills
Refills is maintained by the thoughtbot design team. It is funded by thoughtbot, inc. and the names and logos for thoughtbot are trademarks of thoughtbot, inc.
Stars: ✭ 1,523 (+681.03%)
Mutual labels:  components, sass
Glup
Some of the gulp tutorial -《gulp笔记》
Stars: ✭ 136 (-30.26%)
Mutual labels:  minify, sass
Yii2 Minify View
Yii2 View component with minification css & js
Stars: ✭ 186 (-4.62%)
Mutual labels:  minify
Design System
Open source design and front-end development resources for creating Section 508 compliant, responsive, and consistent websites.
Stars: ✭ 192 (-1.54%)
Mutual labels:  sass
Bootstrap Vue
BootstrapVue provides one of the most comprehensive implementations of Bootstrap v4 for Vue.js. With extensive and automated WAI-ARIA accessibility markup.
Stars: ✭ 13,603 (+6875.9%)
Mutual labels:  components
Smartstorenet
Open Source ASP.NET MVC Enterprise eCommerce Shopping Cart Solution
Stars: ✭ 2,363 (+1111.79%)
Mutual labels:  sass
Typed Scss Modules
🎁 Generate type definitions (.d.ts) for CSS Modules using SCSS
Stars: ✭ 192 (-1.54%)
Mutual labels:  sass
Graaf
A collection of pure CSS grids for designing your new projects
Stars: ✭ 186 (-4.62%)
Mutual labels:  sass
Hexo Theme Laughing
A lightweight hexo theme
Stars: ✭ 185 (-5.13%)
Mutual labels:  sass
Type
🎉 Minimal and Clean Free Jekyll Theme
Stars: ✭ 185 (-5.13%)
Mutual labels:  sass

🕛 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:

<main class="home">
  <h1 class="home__title">Twelvety</h1>
</main>

{% 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="{% asset css, 'css' %}">

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) => {
      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 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="{% asset js, 'js' %}" 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 </body>. If you want the JavaScript somewhere else, see the append paired shortcode and transform.


asset shortcode

The asset shortcode outputs a content-hashed asset with the given content and extension. The content may be either a String or Buffer. Assets will be saved to the assets directory inside the output directory (both defined within .twelvety.js).

<!-- Capture some content -->
{% capture css %}
h1 {
  color: red;
}
{% endcapture %}

<!-- Save content to content-hashed file with .css extension -->
<link rel="stylesheet" href="{% asset css, 'css' %}">

<!-- Output of shortcode -->
<link rel="stylesheet" href="/_assets/58f4b924.css">

You can import the asset shortcode function in JavaScript: this is how the picture shortcode saves your responsive images into the assets directory.


picture shortcode

The picture shortcode takes src and alt parameters and outputs a responsive picture element with AVIF and WebP support. Your images must be stored within the images directory, defined within .twelvety.js. Twelvety will save the outputted images to the assets directory inside the output directory (both defined within .twelvety.js). The picture shortcode also takes two other parameters: sizes which defaults to 90vw, (min-width: 1280px) 1152px, based upon the breakpoint sizes; and loading which defaults to lazy, can also be eager.

<!-- Picture shortcode with src, alt, sizes and loading -->
{% picture 'car.jpg', 'Panning photo of grey coupe on road', '90vw', 'eager' %}

<!-- Absolute paths also work -->
{% picture '/src/_assets/images/car.jpg', 'Panning photo of grey coupe on road', '90vw', 'eager' %}

<!-- Output of shortcode -->
<picture style="background-color:rgb(38%,28%,26%);padding-bottom:50%">
  <source srcset="/_assets/ccb61a31.avif 160w,/_assets/5e167f97.avif 320w,/_assets/79654321.avif 480w,/_assets/6f39f557.avif 640w,/_assets/5f92b843.avif 800w,/_assets/b215cf66.avif 960w,/_assets/f662f584.avif 1120w,/_assets/a7d9e107.avif 1280w,/_assets/3db91a0e.avif 1440w,/_assets/7ce35313.avif 1600w,/_assets/7e74c36b.avif 1760w,/_assets/3737beec.avif 1920w" sizes="90vw" type="image/avif">
  <source srcset="/_assets/672a842c.webp 160w,/_assets/0e7cdd2f.webp 320w,/_assets/3b62393e.webp 480w,/_assets/ba4e43dd.webp 640w,/_assets/c5cecc99.webp 800w,/_assets/bc541ea5.webp 960w,/_assets/c13f6467.webp 1120w,/_assets/6d620165.webp 1280w,/_assets/72ce0629.webp 1440w,/_assets/756857ea.webp 1600w,/_assets/bb6ad358.webp 1760w,/_assets/483e9c95.webp 1920w" sizes="90vw" type="image/webp">
  <source srcset="/_assets/551ddc5e.jpeg 160w,/_assets/6a3b0321.jpeg 320w,/_assets/8f677440.jpeg 480w,/_assets/2bf90b83.jpeg 640w,/_assets/806f0621.jpeg 800w,/_assets/4a810813.jpeg 960w,/_assets/3766add2.jpeg 1120w,/_assets/601b629c.jpeg 1280w,/_assets/216167e2.jpeg 1440w,/_assets/c39ac58c.jpeg 1600w,/_assets/d5728fe8.jpeg 1760w,/_assets/25a2b530.jpeg 1920w" sizes="90vw" type="image/jpeg">
  <img src="/_assets/25a2b530.jpeg" alt="Panning photo of grey coupe on road" loading="lazy">
</picture>

The picture shortcode uses native lazy-loading but it would be easy to add support for lazysizes or a similar library if you wished. The picture shortcode calculates the average colour of the image to show while the image loads, using padding-bottom to avoid layout shift.

The picture shortcode is automatically used for every image in Markdown. To disable this, you'll need to edit the instance of markdown-it (see Markdown feature).

<!-- Automatically uses picture shortcode -->
![Panning photo of grey coupe on road](car.jpg)

The images outputted by the picture shortcode are cached. If you want to clear the cache, delete .twelvety.cache (just a JSON file) or run npm run clean to delete the cache and the output directory. If you delete the output directory but .twelvety.cache, things will break.


append paired shortcode and transform

Okay folks, here it is: the one gotcha with Twelvety. In order for the styles shortcode to work, it must come after all stylesheet paired shortcodes, which would usually be in the body. However, if we want our CSS to be linked or inlined in the head. This is where the append paired shortcode and transform come in, to move the output of the styles shortcode back into the head where we want it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Everything in append paired shortcode will be moved here -->
  </head>
  <body>
    <!-- Stylesheet paired shortcodes can go here -->
    ...
    <!-- Append paired shortcode with styles inside -->
    {% append 'head' %}
      <style>
        {% styles page.url %}
      </style>
    {% endappend %}
  </body>
</html>

The append paired shortcode will actually be replaced with a template. The append transform then uses jsdom to append the contents of the template to the given selector (in this case, head).

The same problem exists for the script shortcode, however, this is not such a problem because it's very common to include JavaScript from the bottom of body anyway.


markdown paired shortcode and configuration

Twelvety sets its own instance of markdown-it. The configuration options are:

{
  html: true,
  breaks: true,
  typographer: true
}

Twelvety also modifies the image rule of the renderer: instead of outputting an img element, Twelvety uses the responsive picture shortcode to render each image. If you want to disable this, remove the following lines in utils/markdown.js.

md.renderer.rules.image = function(tokens, index) {
  const token = tokens[index]
  const src = token.attrs[token.attrIndex('src')][1]
  const alt = token.content
  return pictureShortcode(src, alt)
}

Twelvety also adds a markdown paired shortcode which uses the markdown-it configuration.

{% markdown %}
# `markdown` paired shortcode

Let's you use **Markdown** like _this_.
{% endmarkdown %}

This is also really useful for including Markdown files into a template.

{% markdown %}
  {%- include 'content.md' -%}
{% endmarkdown %}

Be careful of the common pitfall of indented code blocks when using the markdown paired shortcode.


critical transform

The critical transform extracts and inlines critical-path CSS on every page using critical. Currently, the critical CSS is not removed from the linked CSS file(s), which means that some CSS may be loaded twice; I'm looking into a solution for this.


format transform

The format transform beautifies HTML in development using JS Beautifier and minifies HTML in production using HTMLMinifier. Any inline CSS and JavaScript will also be beautified or minified.


Visual Studio Code

If you're using Visual Studio Code I recommend this Liquid extension so that your Sass and JavaScript will be highlighted correctly.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].