Hello!

Forten is an ongoing project to create a CSS framework that combines a mobile-first flexbox grid system, a B.E.M. class-naming scheme, no Javascript, a clean 2.5-dimensional aesthetic, and modular SCSS features.

Feature Focuses:

  • B.E.M. naming schemes
  • Curated Grid class system
    • Simplified media query breakpoints
    • Flexbox-based
    • Mobile-first
    • Common "container>row>col" scheme
  • No Javascript necessary
~15KB
Easy Grid
Flexbox
No Javascript

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Here is a typical paragraph to demonstrate the stylings. Forten keeps track of commonly used web design elements, but it also tries to focus on providing contextual elements to aid in readability.

The underline style, u, is a custom CSS styling using a border for a cleaner look. This is underlined as an example.

Minimalistic Grid System Based On Flexbox

Standard, yet basic Grid class assignments

Flexbox allows easy and consise style assignments for any type of layout. Conventional structures work, along with B.E.M.-named class augments.

.col
.col
.col
.col .col--50
.col
.col
.col .col--20
.col .col--50 .col--offset-10
.col
.col
.col
.col
.col
.col
.col

Colors

Colors in the color scheme can be inputted into the SCSS partial, _options.scss and used throughout main.scss. On compilation, shades of the chosen color palette will be generated, and can be refered to with the SCSS suffix "-Dark".

$color-Primary
#79EADF

$color-Secondary
#FB4D3A

$color-Tertiary
#8D70C5

Built-in Shades & Tints

$color-Primary-Dark

$color-Primary-Light

$color-Secondary-Dark

$color-Secondary-Light

$color-Tertiary-Dark

$color-Tertiary-Light

Elements

Lists

A simple list can look like:

  • Unordered
  • Unordered
  • Unordered
  • Unordered

A simple list for ordering:

  1. Ordered
  2. Ordered
  3. Ordered
  4. Ordered

Visual Cues

Captions

This is a caption. Using the .caption class, you can add a preliminary explanation that doesn't retract from the content of the content by keeping a lighter font-color, or use it as an aside from the inline content you're presenting as a way to have commentary on the subject.

Swatches

$color-Primary-Dark

Badges

Badge
Secondary Badge

Forms












Buttons

Coding blocks

Using the .pre class:

            
  .container {
    .row {
      .col{
      }
      & col--50 {
      }
    }
  }

Using both .pre and .pre--primary classes:

              
  .container {
    .row {
      .col{
      }
      & col--50 {
      }
    }
  }

Using both .pre and .pre--secondary classes:

              
  .container {
    .row {
      .col{
      }
      & col--50 {
      }
    }
  }

Using both .pre and .pre--dark classes:

              
  .container {
    .row {
      .col{
      }
      & col--50 {
      }
    }
  }