Innota

In Innota you can write your stylesheets using SCSS. If you're new to SCSS or just prefer to write plain CSS, you're in luck. Any valid CSS is also valid SCSS. SCSS just adds some useful extra features.

Creating Stylesheets

Technical Details

At the moment Innota does not support @import directive, but we're working on this.

Select Appearance -> Add a new stylesheet. Give the file a name and just add the content.

The editor is smart enough to know that you're writing SCSS and it will help you with syntax highlighting.

Inlcuding Stylesheets

To include your stylesheet in your html you probably need something like this in your head tag.

<link href="stylesheet.css" rel=stylesheet />

There's nothing special here but you're probably wondering how you get the full url to your stylesheet. Here's what your link tag should look like in Innota if your filename is stylesheet.css.

<link href="{{ css('stylesheet.css') }}" rel=stylesheet />

This will be rendered as something like this

<link href="https://cdn.innota.co/username/assets/stylesheet1455627260.css" rel="stylesheet">

The css() is a special function in Innota that's used to generate full url's to stylesheets. The number 1455627260 in the filename is sort of a version number of the file. It's based on the last time the file was modified, and you really don't have to worry about it.

Versioning the stylesheets like this make it easier to cache the contents. Innota uses an aggressive caching strategy to cache all stylesheets. This is one of the reasons why Innota is so fast.

You can read more about caching in Innota in our blog.

Inline Stylesheets

Inlining CSS in Innota is really easy and it supports all the same great features you can use in external stylesheets, like SCSS processing and minification.

You create inlined CSS files the same way you create any external CSS. This makes it easy to separate styles from HTML and switch between external CSS and inlined CSS.

Lets assume you create a stylesheet called main.css with these contents

$color-bg: #99803D;
$color: #222222;
    
body {
    font-family: "Roboto Condensed", sans-serif;
    margin: 0 0 8rem; 
    color: $color;
    background: white;
}

header {
    background: $color-bg;
}

You can inline this stylesheet inside your head like this

<style>{{ css_inline('main.css') }}</style>

The function css_inline is really simple. You just give it the name of the file you want to inline, and the contents of that file after SCSS processing and minification will be included there. The result will look something like this

<style>body{font-family: "Roboto Condensed", sans-serif;margin: 0 0 8rem; color: #222222;background: white;}header {background: #99803D;}</style>

It's also possible to inline more than one file. css_inline can also take an array of filenames as its argument like this

<style>{{ css_inline(['reset.css', 'base.css']) }}</style>

This will inline both reset.css and base.css files.

Notice that the CSS is not minified if you're in preview mode.

Concatenation

You're probably used to split all your stylesheets in more than one file. This is the recommended practice in Innota as well.

The problem in using multiple stylesheets is that your head traditionally looks something like this

<link href="layout.css" rel=stylesheet />
<link href="buttons.css" rel=stylesheet />
<link href="main.css" rel=stylesheet />

This is bad for performance. The browser needs to make three requests to load all these files and there's always some overhead in making an HTTP request. This is where concatenating comes into the picture.

Here's how you would make the above example in Innota

<link href="{{ css_compiled() }}" rel=stylesheet />

That's it. When you publish your site, tha above tag will look something like this

<link href="https://cdn.innota.co/username/assets/compiled1455627260.css" rel="stylesheet">

The function css_compiled() tells Innota to create a concatenated version of all of your stylesheets and give the full url to that file.

Notice

The files are concatenated in alphabetical order. Best practice is to use a number in front of the file to make the ordering easier. You could name the files something like this:

• 00-reset.css
• 01-bootstrap.css
• 99-main.css

To make your site as fast as possible you should always try to use css_compiled() instead of including stylesheets separately.

Minification

Your stylesheets probably have lots of comments to make development easier. That's the way it should be, but comments are useless to the browser and from the browser's point of view they just make the file bigger.

To make the stylesheets as small as possible css_compiled() also automatically minifies the contents.

Minification is a simple process of removing all the things from the file that the browser doesn't need. For instance, all comments and empty spaces are removed. This makes the file smaller without sacrificing anything, and everyone saves precious bandwidth.