stil

About

Built to use

Just implement the css and create simple pages just using classes. Or include it in your Sass project and get the whole toolset for your exposal.

installation

How to use

Stil can be used in two different ways. As an implementable stylesheet where you don't have to do anything. Just use the classes or elements in your html and it will look good.

Or use it as a framework with a full set of sass tools. Create you own build of Stil using the settings and define your own variables.

Markup

Add the css to your html and it will work!

<link rel="stylesheet" type="text/css" href="https://stil.style/base.css" />

Toolset

Install the package using npm or yarn

npm install stil --save-dev
# or
yarn add stil --save-dev

Add to your project in the Sass file

@import "stil-style";
// Now you can use all tools

Check the Settings and Output guide to see more settings and use cases.

Colors

All colors

Red
Orange
Yellow
Lime
Grass
Green
Sky
Water
Blue
DeepBlue
Brown
Purple
DeepPurple
Rose
Lavender
Pink
Berry
Pomegranate
Turquoise
Gray
Black
White

Red

10 --red-1020 --red-2030 --red-3040 --red-4050 --red-5060 --red-6070 --red-7080 --red-8090 --red-90
--red
.background--red
.color--red

Orange

10 --orange-1020 --orange-2030 --orange-3040 --orange-4050 --orange-5060 --orange-6070 --orange-7080 --orange-8090 --orange-90
--orange
.background--orange
.color--orange

Yellow

10 --yellow-1020 --yellow-2030 --yellow-3040 --yellow-4050 --yellow-5060 --yellow-6070 --yellow-7080 --yellow-8090 --yellow-90
--yellow
.background--yellow
.color--yellow

Lime

10 --lime-1020 --lime-2030 --lime-3040 --lime-4050 --lime-5060 --lime-6070 --lime-7080 --lime-8090 --lime-90
--lime
.background--lime
.color--lime

Grass

10 --grass-1020 --grass-2030 --grass-3040 --grass-4050 --grass-5060 --grass-6070 --grass-7080 --grass-8090 --grass-90
--grass
.background--grass
.color--grass

Green

10 --green-1020 --green-2030 --green-3040 --green-4050 --green-5060 --green-6070 --green-7080 --green-8090 --green-90
--green
.background--green
.color--green

Sky

10 --sky-1020 --sky-2030 --sky-3040 --sky-4050 --sky-5060 --sky-6070 --sky-7080 --sky-8090 --sky-90
--sky
.background--sky
.color--sky

Water

10 --water-1020 --water-2030 --water-3040 --water-4050 --water-5060 --water-6070 --water-7080 --water-8090 --water-90
--water
.background--water
.color--water

Blue

10 --blue-1020 --blue-2030 --blue-3040 --blue-4050 --blue-5060 --blue-6070 --blue-7080 --blue-8090 --blue-90
--blue
.background--blue
.color--blue

DeepBlue

10 --deepblue-1020 --deepblue-2030 --deepblue-3040 --deepblue-4050 --deepblue-5060 --deepblue-6070 --deepblue-7080 --deepblue-8090 --deepblue-90
--deepblue
.background--deepblue
.color--deepblue

Brown

10 --brown-1020 --brown-2030 --brown-3040 --brown-4050 --brown-5060 --brown-6070 --brown-7080 --brown-8090 --brown-90
--brown
.background--brown
.color--brown

Purple

10 --purple-1020 --purple-2030 --purple-3040 --purple-4050 --purple-5060 --purple-6070 --purple-7080 --purple-8090 --purple-90
--purple
.background--purple
.color--purple

DeepPurple

10 --deeppurple-1020 --deeppurple-2030 --deeppurple-3040 --deeppurple-4050 --deeppurple-5060 --deeppurple-6070 --deeppurple-7080 --deeppurple-8090 --deeppurple-90
--deeppurple
.background--deeppurple
.color--deeppurple

Rose

10 --rose-1020 --rose-2030 --rose-3040 --rose-4050 --rose-5060 --rose-6070 --rose-7080 --rose-8090 --rose-90
--rose
.background--rose
.color--rose

Lavender

10 --lavender-1020 --lavender-2030 --lavender-3040 --lavender-4050 --lavender-5060 --lavender-6070 --lavender-7080 --lavender-8090 --lavender-90
--lavender
.background--lavender
.color--lavender

Pink

10 --pink-1020 --pink-2030 --pink-3040 --pink-4050 --pink-5060 --pink-6070 --pink-7080 --pink-8090 --pink-90
--pink
.background--pink
.color--pink

Berry

10 --berry-1020 --berry-2030 --berry-3040 --berry-4050 --berry-5060 --berry-6070 --berry-7080 --berry-8090 --berry-90
--berry
.background--berry
.color--berry

Pomegranate

10 --pomegranate-1020 --pomegranate-2030 --pomegranate-3040 --pomegranate-4050 --pomegranate-5060 --pomegranate-6070 --pomegranate-7080 --pomegranate-8090 --pomegranate-90
--pomegranate
.background--pomegranate
.color--pomegranate

Turquoise

10 --turquoise-1020 --turquoise-2030 --turquoise-3040 --turquoise-4050 --turquoise-5060 --turquoise-6070 --turquoise-7080 --turquoise-8090 --turquoise-90
--turquoise
.background--turquoise
.color--turquoise

Gray

10 --gray-1020 --gray-2030 --gray-3040 --gray-4050 --gray-5060 --gray-6070 --gray-7080 --gray-8090 --gray-90
--gray
.background--gray
.color--gray

Black

10 --black-1020 --black-2030 --black-3040 --black-4050 --black-5060 --black-6070 --black-7080 --black-8090 --black-90
--black
.background--black
.color--black

White

10 --white-1020 --white-2030 --white-3040 --white-4050 --white-5060 --white-6070 --white-7080 --white-8090 --white-90
--white
.background--white
.color--white

Defined colors

Primary
Secondary
Tertiary
Alert
Warning
Info
Dark
Light
Accent

Primary

--primary
.background--primary
.color--primary

Secondary

--secondary
.background--secondary
.color--secondary

Tertiary

--tertiary
.background--tertiary
.color--tertiary

Alert

--alert
.background--alert
.color--alert

Warning

--warning
.background--warning
.color--warning

Info

--info
.background--info
.color--info

Dark

--dark
.background--dark
.color--dark

Light

--light
.background--light
.color--light

Accent

--accent
.background--accent
.color--accent

Gradients

<div class="box background--gradient"></div>
<div
  class="background--gradient"
  style="
            --gradient-from: var(--red);
            --gradient-to: var(--blue)"
></div>

fdasfa

<div
  class="background--gradient"
  style="
        --gradient-from: var(--green-30);
        --gradient-to: var(--green-40);
        --gradient-direction: to bottom;"
></div>
Grid

The grid explained

Partials

Stil works just with named partials. Just add the partial name to your column (in a row) and it will be the right width.

column
full
column
half
column
half
column
third
column
two-third
column
quarter
column
three-quarter
column
quarter
column
quarter
column
quarter
column
quarter
column
fifth
column
two-fifth
column
fifth
column
fifth

When using fifths, you will need to add the .row--fifths class to the row. You can't use fifths in combination with others.

Responsive Partials

Try resizing your window and see how the blocks will go from third on a big screen, halfs on a medium screen and full on mobile.

column
small--full
medium--half
large--third
column
small--full
medium-half
large--third
column
small--full
medium--half
large--third
typography

Headers

The quick brown fox jumps over the lazy dog

h1

The quick brown fox jumps over the lazy dog

h2

The quick brown fox jumps over the lazy dog

h3

The quick brown fox jumps over the lazy dog

h4
The quick brown fox jumps over the lazy dog
h5
The quick brown fox jumps over the lazy dog
h6

The quick brown fox jumps over the lazy dog

h1.font--light

The quick brown fox jumps over the lazy dog

h2.font--light

The quick brown fox jumps over the lazy dog

h3.font--light

The quick brown fox jumps over the lazy dog

h4.font--light
The quick brown fox jumps over the lazy dog
h5.font--light
The quick brown fox jumps over the lazy dog
h6.font--light
sans-serif

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9

.font--sans-serif
serif

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9

.font--serif
code

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9

.font--code
Helvetica

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9

.font--helvetica
Avenir

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9

.font--avenir
Inter

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9

.font--inter
Poppins

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9

.font--poppins
Raleway

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9

.font--raleway
Work Sans

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
0 1 2 3 4 5 6 7 8 9

.font--work-sans
Principles

Everyone has it's principles, so has Stil. Here's a brief overview of what Stil stands for..

Responsive

In a way we shouldn't have to mark this here, because it's a given. If you don't build your website to be able to use on all devices, you are doing something wrong. But yeah, Stil is fully ready to create your responsive projects.

Accessible

Everyone should be able to visit a website, with styling we can already do a lot to make this possible. Stil tries to enforce the users as much as possible to create accessible projects.

Customisable

No website is the same, thats why Stil is fully customatisable.

Understandable

Understandable in the sense that everyone who has a little bit of styling should understand it. It should be easily usable for a beginner and an advanced user.

Fun to use

With all the principles above in place, Stil should be fun to use. When it's easy and gives fast good looking results. It's becomes fun to use automatically.

customizability

Every brand has it's own identity

Stil has it's opinions, but encourages you to have your own.

Stil is fully customisable, no two website should look the same. From the colors to the settings, sizes and all css outputs. Everything is customisable just defining some settings.

Colors

Stil comes with a set of colors which can be used by anybody. But if want to define your own colors, you can simple redefine the colors using custom properties. Or define a new colorset and generate all css using those colors.

Settings for Colors

Sizes

We defined a few sizes, for different screens, spacings, font-sizes, but if you don't agree with them, it's up to you to just redefine the sizes. No problem!

Settings for Sizes

Naming

We have our preferences for naming, but we can imagine you do too. That's why we keep it fully open how you call your elements. We like to use rows and columns, but you like to use groups and cols? A button should be a btn? It's up to you

Settings for Naming