getting started with anole

basics

Anole is primarily a class-based framework, and does not apply styles to anything on the page without a class attached to the element or its parent. Even the <body> requires the class ".anole" in order to apply the supplied default styling. However, Anole is a breeze to work with once you have a grasp of the basics, having being designed and built by a designer.

typography

By default, Anole uses the "Lato" font.

Font size is set responsizely, using the variable --anole-font-size, with a value of calc(0.735em + 1vh), as is line-height, governed by the variable --anole-line-height. The value for this variable is calc(1.5em + 1vh). You can easily change these values in your own projects by overwriting these variables. Letter spacing is governed by the variable --anole-letter-spacing, by default. Optionally, you can reference the variable --anole-letter-spacing-huge, for wide letter spacing. This variable uses a value of 0.5ch.

Using Anole

structure of an anole-based web page

Anole comes with a basic layout in three parts:

an-head
an-body
an-tail

Take a look at the following examples to see how it works:

standard website mobile website