Aerial.css

v

Introduction

The Aerial.css project uses a helper css file, containing a collections of classes that help us to create pages

Loading fonts

You can decided wether you want to load the fonts through aerial.css or not. For now you can find the variable $AERIAL_LOAD_FONTS in the aerial.sass file.

By default, the value is false !default. If set t true it will load the fonts through a Sass mixin.

Colors

1 - Plain

Here are all the colors we use :

$purple-heart: rgb(142,67,231)$mulberry: rgb(184,69,146)$radical-red: rgb(255,79,129)$bittersweet: rgb(255,108,95)$koromiko: rgb(255,193,104)$shamrock: rgb(45,222,152)$java: rgb(28,199,208)$algolia-blue: rgb(0,174,255)$royal-blue: rgb(51,105,231)$bunting: rgb(62,57,107)$titan-white: rgb(248,250,255)$logan: rgb(157,157,189)$deep-cove: rgb(5,15,44)$port-gore: rgb(58, 69, 112)$east-bay: rgb(73, 85, 136)$portage: rgb(137, 148, 198)$blue-bell: rgb(166, 176, 216)$ghost: rgb(196, 200, 216)$athens-gray: rgb(238, 240, 247)

The names of the colors are important. There is two ways to use those colors, the first is by defining them as a background, and the other is to use them as text color.

.fill-algolia-blue

Hello world

.color-algolia-blue

Hello world

2 - Gradients

.gradient-green or .gradient-primary

.gradient-blue or .gradient-secondary

.gradient-pink or .gradient-tertiary

.gradient-orange

.gradient-purple

.gradient-light-blue

.gradient-blue-purple

.gradient-dark

.gradient-white

Gradient text

This feature is stille experimental, use it with care

You can couple the .gradient-text class along with a gradient class, to obtain a cool gradient text effect.

Note that we are not using them yet on algolia.com

.gradient-text

#MillisecondsMatter
#MillisecondsMatter
#MillisecondsMatter
#MillisecondsMatter
#MillisecondsMatter
#MillisecondsMatter
#MillisecondsMatter
#MillisecondsMatter
#MillisecondsMatter

Spacers

Spacers are used to adjust the vertical rythm of the pages

.spacer8

.spacer16

.spacer24

.spacer32

.spacer40

.spacer48

.spacer56

.spacer64

.spacer80

.spacer120

Width

Widths classes are used to define the width of an element. It works the same way as the spacers, and can go up to 100%

.w100

.w150

.w200

.w100p

Max-Widths

Max-widths classes are used to define the max-width of an element. It works the same way as the width, and can go up to 1200px

.m100

.m200

.m300

.m400

.m500

.m600

.m700

.m800

.m900

.m1000

.m1200

.m100p

Height

The heights classes got the same use as the width ones, it's used to define the height of an element.

For obvious reasons I wont show them on the page

.h80
  height: 80px
.h100
  height: 100px
.h200
  height: 200px
.h300
  height: 300px
.h400
  height: 400px
.h500
  height: 500px
.h600
  height: 600px
.h700
  height: 700px
.h800
  height: 800px
.hfull
  height: 100%

Positions

The position classes are here to help you defining the position of an element, they are pretty straight forward

.pos-rel
  position: relative
.pos-stc
  position: static
.pos-abt
  position: absolute
.pos-fix
  position: fixed
.pos-sti
  position: sticky

Blocks classes

Those classes will help you defining blocks & inline-blocks elements

.block
  display: block
.inline
  display: inline-block

Float classes

Those classes will help you floating elements

.pull-left

.pull-right

.pull-none

.pull-in

Indexing

The indexing classes are used to set the z-index of an element

Hover the blocks to see their indexing

.z-1
.z-2
.z-3
.z-4
.z-5
.z-10
.z-20
.z-100

Font-size

The font-size classes helps you to define the font-size of your elements

.text-heading

Revelant search results at the speed of thoughts

.text-xxl

Revelant search results at the speed of thoughts

.text-xl

Revelant search results at the speed of thoughts

.text-lg

Revelant search results at the speed of thoughts

.text-bg

Revelant search results at the speed of thoughts

.text-regular

Revelant search results at the speed of thoughts

.text-sm

Revelant search results at the speed of thoughts

.text-xsm

Revelant search results at the speed of thoughts

.text-xs

Revelant search results at the speed of thoughts

Font-weight

The font-weight classes helps you to define the font-weight of an element

.text-thin

Revelant search results at the speed of thoughts

.text-normal

Revelant search results at the speed of thoughts

.text-demi

Revelant search results at the speed of thoughts

.text-bold

Revelant search results at the speed of thoughts

.text-bolder

Revelant search results at the speed of thoughts

Text-centering

Thoses classes will help you centering your text

.text-center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum perspiciatis rerum totam exercitationem, qui voluptatem dignissimos iste debitis obcaecati blanditiis, eligendi quis illum id, doloremque consequuntur suscipit sed. Animi, saepe.

.text-justify

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, aliquid. Dolores magni maiores vitae eveniet facere tempora deleniti, nam, reprehenderit obcaecati quidem velit. Accusantium veritatis harum ad architecto dolor eveniet.

.text-left

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit et sequi, iste debitis sapiente eius, inventore, unde minus magni dolorem possimus alias consectetur vel, quasi iusto at voluptas reiciendis qui.

.text-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas iste odit ipsam nulla temporibus earum saepe, rerum quidem consequatur delectus aperiam pariatur provident impedit nesciunt vel, facere, quia. Et, enim.

Text-settings

Those setting classes will help you altering your texts (ellipsis, breakword, transforms..)

.text-ellipsis

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias minima ad illo corrupti deserunt earum soluta molestiae, veniam repellendus itaque. Laboriosam fugiat sapiente eum, id quo quos ea modi voluptatibus!

.text-break-word

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perferendis laboriosam quas nobis enim cumque et. Et autem culpa dolores impedit asperiores officiis quia minus, tempora quos animi, saepe illo!

.nowrap

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quo enim suscipit eveniet accusamus, totam modi, magnam mollitia debitis magni reiciendis error cum eligendi. Error illo vel reprehenderit, incidunt assumenda.

.lower-case

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore error, sequi repellendus autem quia accusantium quisquam ab ex, eligendi sint nesciunt ut blanditiis repudiandae vel nihil, eius, dolores saepe recusandae.

.upper-case

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem veniam ratione cupiditate a tenetur sit maiores velit voluptas, quos explicabo debitis, nihil repudiandae. Alias vel sapiente commodi velit, delectus quo?

.hidden-text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel error amet ipsa distinctio possimus. Itaque deserunt aperiam saepe inventore laudantium voluptates beatae eos quos, reprehenderit porro sint quod nihil nisi?

Vertical-align

The vertical align classes helps you to define the vertical alignement of the elements

Inspect those elements to see the result

Relevant search results at the speed of thoughts

Relevant search results at the speed of thoughts

Line-heights

The line-height class helps you to define the proper line-height to your texts

.line-h-regular

Revelant search results at the speed of thoughts

.line-h-small

Revelant search results at the speed of thoughts

Text formats

There is two classes used to format text into a blockquote looking text

.line-v

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eligendi laborum est! Quibusdam aperiam ullam eaque non nostrum voluptatum numquam ipsam debitis distinctio temporibus, delectus, expedita voluptates at, velit odio!

.line-v-right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eligendi laborum est! Quibusdam aperiam ullam eaque non nostrum voluptatum numquam ipsam debitis distinctio temporibus, delectus, expedita voluptates at, velit odio!

Lists

The list class will help you removing the style of an ul tag

.list-none

  • Foo
  • Bar
  • Baz
  • Qux

Borders

The borders classes helps you define which element should have a border, and where this border should be

By default, the border color will take the value of $secondary-color

.b-t

.b-r

.b-b

.b-l

.b-n

Radius

The radius classes will help you giving a border-radius to an element

Please, note that by default, the Aerial design rule stipulate that Any box, if it has a radius, should use the .radius6 class, unless it's intended to be a circle

.radius6

.radius100p

.no-radius

Padding

The padding classes helps you defining the padding on an element

.padder

.p-mini

.p-small

.p-large

.p-xlarge

.p-t-mini

.p-t-small

.p-t-large

.p-t-xlarge

.p-b-mini

.p-b-small

.p-b-large

.p-b-xlarge

.p-l-small

.p-l-large

.p-l-xlarge

.p-r-small

.p-r-large

.p-r-xlarge

.p-l-xxlarge

.p-r-xxlarge

.no-padding

.no-p-l

.no-p-r

.no-p-t

.no-p-b

Margins

The margins classes helps you defining the margins on an element

.m-l-r-auto

.m-l

.m-l-none

.m-l-mini

.m-l-small

.m-l-large

.m-l-n

.m-l-n-mini

.m-l-n-small

.m-l-n-large

.m-t

.m-t-none

.m-t-mini

.m-t-small

.m-t-large

.m-t-n

.m-t-n-xmini

.m-t-n-mini

.m-t-n-small

.m-t-n-large

.m-r

.m-r-none

.m-r-mini

.m-r-small

.m-r-large

.m-r-n

.m-r-n-mini

.m-r-n-small

.m-r-n-large

.m-b

.m-b-none

.m-b-mini

.m-b-small

.m-b-large

.m-b-xlarge

.m-b-n

.m-b-n-mini

.m-b-n-small

.m-b-n-large

.no-margin

This class got an !important

Shadows

The shadows classes will define a different type of elevation

.elevation0

.elevation1

.elevation2

Lines

Those classes will help you making lines and boxes

By default, the color of .line is $secondary-color and the color of the .line-dashed takes the color of the parent

.line

.line-dashed

.headline

Flexbox

Of course we do have helper classes for flexbox, they will help you mastering layouts

To declare a flex-container, use this class

.flex-container
  display: flex

Each flexbox class got responsive modifiers. Use flex-it-x-sm to define a flexbox item width on "small screens", and use flex-it-x-lg to define a flexbox item width on large screen.

To learn more about responsive flexbox classes, take a look at this pen

Flex 100%

.flex-it-1

100%

Flex 50%

.flex-it-2

50%
50%

Flex 33.33%

.flex-it-3

33.33%
33.33%
33.33%

Flex 25%

.flex-it-4

25%
25%
25%
25%

Flex direction column

.flex-dir-col

25%
25%
25%
25%

Flex direction row

.flex-dir-row

25%
25%
25%
25%

Flex alignment

.flex-align-center

Centered

Flex spacing

.flex-space-around

25%
25%
25%

Flex spacing

.flex-space-between

25%
25%
25%

Flex grow

.flex-grow-1

Overflow

The overflow classes will help you managing the overflow of an element

.unscroll

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius perspiciatis voluptate sapiente accusantium quibusdam perferendis asperiores nesciunt autem aliquid nostrum! Quibusdam corrupti aperiam ex, quae aliquid at, omnis delectus magni.

Cursors

The cursors classes will help you changing the cursor style of an element

.clickable

Dummy text

Transforms

The transform classes will help you adding transformations to your elements

.rotate-45

Rotated

Box model

The box model classes will help you defining the box-model of an element

.content-box
  box-sizing: content-box

Fading

The fading classes will help you adding a fade out effect on elements

The .op0 class is obviously adding opacity 0

.faded

.op0

Centering

The centering classes will help you centering elements

To use those centering classes, your parent element must have a position defined

.v-center

.h-center

.vh-center

Hide classes

The hide classes will help you hiding elements

You can also use the hiding classes from bootstrap, this is the ones that we are mainly using

.hidden-sm
  @media (max-width: $screen-sm)
    display: none !important

.visible-sm
  @media (max-width: $screen-sm)
    display: block !important

.hidden
  visibility: hidden

Clearfix

The clearfix class will help you adding a break between two elements

<div class="demo-clearfix-off fill-titan p-large">
  <div class="w200 h200 inline fill-white m-r-large elevation0 radius6 p-large">
    <p>Revelant search results at the speed of thoughts</p>
  </div>
  <div class="w200 h200 inline fill-white m-r-large elevation0 radius6 p-large">
    <p>Revelant search results at the speed of thoughts</p>
  </div>
</div>

Revelant search results at the speed of thoughts

Revelant search results at the speed of thoughts

<div class="demo-clearfix-on fill-titan p-large">
  <div class="w200 h200 inline fill-white m-t-large elevation0 radius6 p-large">
    <p>Revelant search results at the speed of thoughts</p>
  </div>
  <div class="cf"></div>
  <div class="w200 h200 inline fill-white m-t-large elevation0 radius6 p-large">
    <p>Revelant search results at the speed of thoughts</p>
  </div>
</div>

Revelant search results at the speed of thoughts

Revelant search results at the speed of thoughts

Outline

You can remove an outline on a button or an input, by using the following class:

.otn

<div class="flex-container">
  <div class="flex-it-2 p-large text-center">
    <input type="text" placeholder="Type something..">
  </div>
  <div class="flex-it-2 p-large text-center">
    <input class="otn" type="text" placeholder="Type something..">
  </div>
</div>

Appearance

It's possible to disable the appearance on inputs and buttons, using the following class:

.apn

<div class="flex-container">
  <div class="flex-it-2 p-large text-center">
    <input type="text" placeholder="Type something..">
  </div>
  <div class="flex-it-2 p-large text-center">
    <input class="apn" type="text" placeholder="Type something..">
  </div>
</div>