Structure

Container

There are two containers available, 'container' and 'container-beta'. These containers will horizontally center the block with a specific min and max-width. Widths can be specified in the settings.scss file.

<div class="container">
    your content
</div>

CSS columns

Pure CSS columns. Classes available for 2, 3 and 4 columns.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique animi cupiditate inventore repellendus placeat voluptate at nobis assumenda! Accusantium aspernatur id voluptatum itaque autem at dolore eligendi quisquam vitae dolor? 

<p class="css-columns-4">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique animi cupiditate inventore repellendus placeat voluptate at nobis assumenda! Accusantium aspernatur id voluptatum itaque autem at dolore eligendi quisquam vitae dolor?
</p>

With the avoid column modifier HTML tabs don't flow over the columns, so for example a list item will not flow over multiple columns.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<ul class="css-columns-2 css-columns--avoid-column">
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

Flexible grid

This module can be used to fancy yourself a flexible grid with evenly height elements, just drop these elements in the flexible grid element. It's important to note twice that these elements need the same height, or you'll get in trouble. You could use the equalize module if you have variable content.

A title
Some content
A title
Some content
A title
Some content
A title
Some content
A title
Some content
A title
Some content 
<div class="flexible-grid-3">
    <div class="card">
        <div class="card__header card__header--beta">
            <div class="card__title">A title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
    <div class="card">
        <div class="card__header card__header--gamma">
            <div class="card__title">A title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
    <div class="card">
        <div class="card__header card__header--delta">
            <div class="card__title">A title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
    <div class="card">
        <div class="card__header card__header--beta">
            <div class="card__title">A title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
    <div class="card">
        <div class="card__header card__header--gamma">
            <div class="card__title">A title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
    <div class="card">
        <div class="card__header card__header--delta">
            <div class="card__title">A title</div>
        </div>
        <div class="card__content">
            Some content
        </div>
        <div class="card__action">
            <button class="btn btn--beta btn--medium">action</a>
        </div>
    </div>
</div>

Functions

Tint

Tint is a better way to make a color lighter instead of the standard Sass function "lighten".

.some-class {
    color: tint( $color, $percentage );
}

Shade

Shade is a better way to make a color darker instead of the standard Sass function "darken".

.some-class {
    color: shade( $color, $percentage );
}

Grid

The default grid is a 12 columns grid which you can change in the settings, even as the gutter width.

Just a basic grid

column-3
column-3
column-3
column-3
<div class="grid">
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
</div>

No gutters

column-3
column-3
column-3
column-3
<div class="grid grid--no-gutters">
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
    <div class="column-3">
        <div class="card">
            <div class="card__content">column-3</div>
        </div>
    </div>
</div>

Breakpoint specific

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
<div class="grid">
    <div class="column-alpha-6 column-beta-12 column-gamma-and-up-3">
        <div class="card">
            <div class="card__content">Lorem ipsum dolor sit amet</div>
        </div>
    </div>
    <div class="column-alpha-6 column-beta-4 column-beta--first column-gamma-and-up-3">
        <div class="card">
            <div class="card__content">Lorem ipsum dolor sit amet</div>
        </div>
    </div>
    <div class="column-alpha-6 column-alpha--first column-beta-4 column-gamma-and-up-3">
        <div class="card">
            <div class="card__content">Lorem ipsum dolor sit amet</div>
        </div>
    </div>
    <div class="column-alpha-6 column-beta-4 column-gamma-and-up-3">
        <div class="card">
            <div class="card__content">Lorem ipsum dolor sit amet</div>
        </div>
    </div>
</div>

Centered

column-6
<div class="grid">
    <div class="column-6 column-centered">
        <div class="card">
            <div class="card__content">column-6</div>
        </div>
    </div>
</div>

Pre class

column-6 pre-2
<div class="grid">
    <div class="column-6 pre-2">
        <div class="card">
            <div class="card__content">column-6 pre-2</div>
        </div>
    </div>
</div>

Post class

column-7 post-1
column-4
<div class="grid">
    <div class="column-6 post-2">
        <div class="card">
            <div class="card__content">column-7 post-1</div>
        </div>
    </div>
    <div class="column-4">
        <div class="card">
            <div class="card__content">column-4</div>
        </div>
    </div>
</div>

Grid (flexbox)

You shouldn't use this grid for overall page layout, use the standard grid module in that case. In the future we can use the CSS grids module for overall layout, but it's not ready as of writing.

This is perfect for things as nav bars.

Simple

Flexy
Flexy
Flexy
Flexy
<div class="flexbox-grid">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Top

Flexy
<div class="flexbox-grid flexbox-grid--top" style="height: 200px;">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Middle

Flexy
<div class="flexbox-grid flexbox-grid--middle" style="height: 200px;">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Buttom

Flexy
<div class="flexbox-grid flexbox-grid--bottom" style="height: 200px;">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Stretch

Flexy
<div class="flexbox-grid flexbox-grid--stretch" style="height: 200px;">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Baseline

Flexy
<div class="flexbox-grid flexbox-grid--baseline" style="height: 200px;">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Left

Flexy
<div class="flexbox-grid flexbox-grid--left">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Center

Flexy
<div class="flexbox-grid flexbox-grid--center">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Right

Flexy
<div class="flexbox-grid flexbox-grid--right">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Space between

Flexy
Flexy
<div class="flexbox-grid flexbox-grid--between">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Space around

Flexy
Flexy
<div class="flexbox-grid flexbox-grid--around">
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
    <div class="flexbox-column-3 card">
        <div class="card__content">Flexy</div>
    </div>
</div>

Helper classes

Clearfix

Clearfix container class, add this class to a wrapping element which contains floating elements.

<div class="clearfix">
    <div class="float-left"></div>
    <div class="float-left"></div>
</div>

You can also extend it in your SCSS files like this;

.your-class {
    @extend .clearfix;
}

Hide

Hide classes are used for responsive design, for some breakpoints you can hide content if you need to.

This will show on medium to large screens
This will show on larger screens
This will show on small screens
This will show on even larger screens
<div class="hide-alpha">This will show on medium to large screens</div>
<div class="hide-alpha-and-beta">This will show on larger screens</div>
<div class="hide-beta-and-up">This will show on small screens</div>
<div class="hide-gamma-and-up">This will show on even larger screens</div>

Lists

Unordened list

  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
<ul>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>

Ordened list

  1. Lorem ipsum
  2. Lorem ipsum
  3. Lorem ipsum
<ol>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ol>

Unstyled list

  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
<ul class="list-unstyled">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>

Inline list

  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
<ul class="list-inline">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>

Visually hidden

Hide only visually, but have it available for screenreaders.

.visuallyhidden
.show-screenreaders

Grid margin

Percentual grid margins
<div class="grid-margin-top">Percentual grid margins</div>

Margin

These classes will give margin to any element. It will overrule the specified margin of the element.

Keys available:

  • alpha (default: 10)
  • beta (default: 20)
  • gamma (default: 30)
  • delta (default: 40)
  • epsilon (default: 50)
  • zeta (default: 80)
  • eta (default: 100)

Default margin

Margin alpha all around
<div class="margin-alpha">Margin alpha all around</div>

Left margin

Margin beta left
<div class="margin-beta-left">Margin beta left</div>

Reset margin classes

  • no-margin
  • no-bottom-margin
  • no-top-margin
  • no-left-margin
  • no-right-margin
  • no-vertical-margin
  • no-horizontal-margin

Padding

These classes will give padding to any element. It will overrule the specified padding of the element.

Keys available:

  • alpha (default: 10)
  • beta (default: 20)
  • gamma (default: 30)
  • delta (default: 40)
  • epsilon (default: 50)
  • zeta (default: 80)
  • eta (default: 100)

Default padding

padding alpha all around
<div class="padding-alpha">padding alpha all around</div>

Left padding

padding beta left
<div class="padding-beta-left">padding beta left</div>

Reset padding classes

  • no-padding
  • no-bottom-padding
  • no-top-padding
  • no-left-padding
  • no-right-padding
  • no-vertical-padding
  • no-horizontal-padding

Float

Give a float or disable float for an element.

  • float-left
  • float-right
  • float-none

Round

Make something round, for an avatar for example.

  • round

Text align

Align text. Available classes are;

  • text-align-left
  • text-align-center
  • text-align-right

You can also use these classes with a media query appendix.

  • text-align-left-beta-and-up
  • text-align-left-gamma-and-up

Text transform

  • text-transform-caps
  • text-transform-thin
  • text-transform-small

Font style

  • font-style-normal
  • font-style-italic
  • font-style-bold

Position

  • position-relative
  • position-absolute

Display

  • display-inline
  • display-inline-block
  • display-block
  • display-none

Display table

Display table class needs some an extra child if you need to vertically center content.

This text will center align 
<div class="display-table card" style="height: 100px;">
    <div class="card__content display-table__middle">
        This text will center align
    </div>
</div>
This text will bottom align 
<div class="display-table card" style="height: 100px;">
    <div class="card__content display-table__bottom">
        This text will bottom align
    </div>
</div>

Ellipsis

Pure CSS ellipsis class

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis rem, ullam magnam, esse numquam voluptatum culpa neque laboriosam officiis, sint animi beatae qui vero molestias aliquam dolore ea autem. Ipsam! 
<div class="ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis rem, ullam magnam, esse numquam voluptatum culpa neque laboriosam officiis, sint animi beatae qui vero molestias aliquam dolore ea autem. Ipsam!
</div>

Break word

Break a word with a hyphen (hyphen not supported in Blink as of writing).

Loremipsumdolorsitametconsecteturessenumquamvoluptatumculpa 
<div class="break-word" style="width: 200px">
    Loremipsumdolorsitametconsecteturessenumquamvoluptatumculpa
</div>

Icons

There are several icons predefined in basos, but you could ditch them all and add your own icons.

These icons are generated with fontello.com, you can use the fontello config.json in assets/src/fonts/src/fontello/ to preselect the icons already defined for basos on fontello.com.

<ul class="list-inline">
    <li><div class="icon icon--spinner"></div></li>
    <li><div class="icon icon--ok"></div></li>
    <li><div class="icon icon--cancel"></div></li>
    <li><div class="icon icon--cancel-circle"></div></li>
    <li><div class="icon icon--info"></div></li>
    <li><div class="icon icon--attention"></div></li>
    <li><div class="icon icon--question"></div></li>
    <li><div class="icon icon--eye"></div></li>
    <li><div class="icon icon--eye-off"></div></li>
    <li><div class="icon icon--menu"></div></li>
    <li><div class="icon icon--down"></div></li>
    <li><div class="icon icon--left"></div></li>
    <li><div class="icon icon--right"></div></li>
    <li><div class="icon icon--up"></div></li>
    <li><div class="icon icon--cog"></div></li>
    <li><div class="icon icon--download"></div></li>
    <li><div class="icon icon--upload"></div></li>
</ul>

Icon margin

You can add margin with the icon margin modifier to the icons if you use it in a button for example.

Margin modifiers available;

  • icon--margin-alpha (default: 10)
  • icon--margin-beta (default: 20)
just a button 
<a class="btn btn--beta btn--medium icon icon--menu icon--margin-alpha">just a button</a>

Media queries

Basos uses the mobile first principle so you will never write a mobile media query. There are several breakpoints defined in the settings.scss file which will get you covered in most cases, if you need an even bigger media query (eg. TV), you could simply add a rule in the settings file.

How to add a media query to your SCSS file:

@include mq(gamma-and-up) {
    ...
}

You can nest the above code in your CSS selector like this.

.your-selector {
    @include mq(gamma) {
        ...
    }

    @include mq(epsilon-and-up) {
        ...
    }

    etc..
}

Mixins

Arrow

This mixin will create a CSS triangle. Direction values: up, right, bottom, left.

@include arrow($width, $height, $direction, $color);
@access public
@param {Color} $color - color to shade
@param {Number} $percentage - percentage of `$color` in returned color
@return {Color}

Sections

Sections are blocks of content with a background color or image. Usually you combine this with a container class child element. There are five colors defined for you as modifiers (section--alpha, section--beta, etc..) but you can add extra or change the predefined colors in the settings.scss file if you need to.

Some content.. 
<div class="section section--alpha">
    <div class="container">
        Some content..
    </div>
</div>
Some content.. 
<div class="section section--beta">
    <div class="container">
        Some content..
    </div>
</div>
Some content.. 
<div class="section section--gamma">
    <div class="container">
        Some content..
    </div>
</div>
Some content.. 
<div class="section section--delta">
    <div class="container">
        Some content..
    </div>
</div>
Some content.. 
<div class="section section--epsilon">
    <div class="container">
        Some content..
    </div>
</div>