ainsley

ainsley

ainsley is a more efficient way to define your stylesheet.

It promises to let you:

• have an unmatched developer experience
• use your existing CSS knowledge
• compress your bytes sent by an order of magnitude
• serialize your framework as tiny, readable JSON

// Define your stylesheet using JavaScript, or JSON
const breakpoints = Object.entries({
  s: 384,
  m: 768,
  l: 1024
}).map(([prefix, pixels]) => [prefix, `@media(min-width:${pixels}px)`])

// This tiny object contains all the instructions to assemble a stylesheet
const ainsley = {
  // `variations` allow you to add modifiers to children
  // e.g. breakpoints, or hover styles
  variations: [breakpoints],
  // `variables` allow you to reuse groups of properties and values
  variables: {
    color: { b: 'black', w: 'white' }
  },
  children: [
    // You may use `"$..."` syntax to import configs and remote urls;
    // it is able to import CSS and JSON.
    '$https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css',
    // You may also use it to import configs installed by npm (or yarn);
    // this one would import the npm package "ainsley-config-example".
    '$example',
    // You may nest ainsley objects;
    // this allows you to scope variables, variations and configs.
    {
      variables: {
        // `variables` prefixed with a `+` will merge with any
        // definition higher up (otherwise, it behaves like normal).
        '+color': {
          lg: '#eee',
          g: '#888',
          dg: '#222'
        },
        // `variables` prefixed with a `?` will only be defined
        // if they have not been already been defined higher up.
        '?length': {
          0: 0,
          1: '1px',
          2: '2px'
        }
      },
      children: [
        // This is a "utility rule" - it looks like a typical CSS rule.
        // It uses a variable, which will output every possible permutation!
        ['bg', [['background-color', '{color}']]],
        // This string is the prefix of the "utility class".
        // ↙ Abbreviations of `variable` values will be appended to it.
        [
          'b',
          [
            // "Utility rules" support multiple declarations.
            // "Utility declarations" may use any number of variables.
            ['border', '{length} {color}'],
            ['border-style', 'solid']
          ]
        ]
      ]
    }
  ]
}

// flatten replaces external dependencies with their contents
// (i.e. CSS/JSON urls, configs)
// 💞 ➡ 💖
const configWithoutDependencies = await flatten(ainsley)
// minify generates a config which is designed to use less bytes
// after it has been compressed; this is how it should be sent to the client
// 💖 ➡ 💌
const minifiedConfig = minify(configWithoutDependencies)

// (ON THE CLIENT) to generate CSS, and embed it into the page
// 💌 ➡ 🧡💛💚💙💜
Ainsley.embed(Ainsley.generate(minifiedConfig /* , options */))

Compression potential

Instead of writing a stylesheet in CSS, you write it in a small JavaScript object, which can be optionally serialized as JSON.

The browser receives this small object and recursively compiles it into CSS. This compresses it massively.

                 ┌───────┬───────────┬────────────┐
                 │    JS │ JS-to-CSS │ Equivalent │
                 │ input │  compiler │ CSS output │
┌────────────────┼───────┼───────────┼────────────┤
│ minified bytes │ 5,094 │     2,751 │    786,877 │
└┬───────────────┼───────┼───────────┼────────────┤
 │ gzipped bytes │ 2,146 │     1,317 │    139,296 │
 └┬──────────────┼───────┼───────────┼────────────┤
  │ brotli bytes │ 1,821 │     1,163 │     23,747 │
  └─┬────────────┼───────┴───────────┼────────────┤
    │ TOTAL SENT │             2,984 │     23,747 │
    └────────────┴───────────────────┴────────────┘

(using default settings with ainsley-config-starter)

Comparisons to others

Ideas for ways to use it

• Use the interactive online tool to fetch configs and flatten
• Use Webpack with ainsley-loader to write your config in a .ainsley file
• Write it in JavaScript and unit test it
• Moving a project from CSS to ainsley - embed and gradually migrate
• Moving a project from SASS to ainsley - compile, embed and gradually migrate

Contribute

If you'd like to help, send me a message!

I didn't make this project to make money, but donating can help keep projects like this maintained properly. Contribute

Or perhaps you might like to donate to a top rated charity instead (they need the money more!)