Lilium Framework

• Lilium Framework
• Getting Started
  • Installation
  • Usage
• Documentation
  • Breakpoints
  • Flexbox
  • Fluid (Responsive) Typography
    • Example
  • Gradients
    • Background
    • Text
  • Grid
    • Columns
    • Responsive
    • Offset

A group of mixins, functions and variables to get your frontend project started.

Getting Started

Installation

npm install starlette-sass-helpers

Usage

Include the following "import" in your sass files.

@import "path/to/your/node_modules/starlette-sass-helpers/scss/lilium";

Remember to change out "path/to/your/" to match your folder structure.

For example, if your sass file is located at "/assets/sass/layout.scss" then the code would change to this:

@import "../../node_modules/starlette-sass-helpers/scss/lilium";

Documentation

Breakpoints

body {
    @include breakpoint(sm) { 
        color: green;
    }
    @include breakpoint(sm, max) { 
        color: blue;
    }
    @include breakpoint(sm, between) {
        color: red;
    }
    @include breakpoint(lg, between) {
        color: black;
    }
}

The above code compiles to this

@media(min-width: 576px) {
    body {
        color: green;
    }
}
@media(max-width: 575px) {
    body {
        color: blue;
    }
}
@media(min-width: 576px)and (max-width: 767px) {
    body {
        color: red;
    }
}
@media(min-width: 992px)and (max-width: 1199px) {
    body {
        color: #000;
    }
}

Flexbox

See how flexbox works.

body {
    @include flexbox;
    @include flex-direction( col );
}

Fluid (Responsive) Typography

Mixin	Param 1	Param 2
font-size	Mobile font size	Desktop font size

As the screen size changes the font size will change accordingly. This all happens between the mobile and desktop breakpoints.

When it hits the mobile breakpoint it will stay a fixed size (example below - 16px). Same goes for desktop (example below - 35px).

The responsive size will never be smaller than the mobile font size or bigger than the desktop font size.

Example

h1 {
    // 16px - mobile font size
    // 35px - desktop font size
    @include font-size( 16px, 35px );
}

Gradients

Direction	Colors
down / up / right / left	List of colors (space separated)

Background

body {
    @include linear-gradient( down, red orange yellow green blue purple pink );
}

Text

h1 {
    @include text-background-gradient( left, rgba(255,255,255,0) #444444 );
}

Grid

Uses a 24 grid column structure.

col-1 is the smallest size column (4.16%).

Columns

<div class="container">
    <div class="row">
        <div class="col-1"> 1 </div>
        <div class="col-2"> 2 </div>
        <div class="col-3"> 3 </div>
        <div class="col-4"> 4 </div>
        <div class="col-5"> 5 </div>
        <div class="col-6"> 6 </div>
        <div class="col-7"> 7 </div>
        <div class="col-8"> 8 </div>
        <div class="col-9"> 9 </div>
        <div class="col-10"> 10 </div>
        <div class="col-11"> 11 </div>
        <div class="col-12"> 12 </div>
        <div class="col-13"> 13 </div>
        <div class="col-14"> 14 </div>
        <div class="col-15"> 15 </div>
        <div class="col-16"> 16 </div>
        <div class="col-17"> 17 </div>
        <div class="col-18"> 18 </div>
        <div class="col-19"> 19 </div>
        <div class="col-20"> 20 </div>
        <div class="col-21"> 21 </div>
        <div class="col-22"> 22 </div>
        <div class="col-23"> 23 </div>
        <div class="col-24"> 24 </div>
    </div>
</div>

Responsive

<div class="container">
    <div class="row">
        <div class="col-sm-1"> </div>
        <div class="col-md-1"> </div>
        <div class="col-lg-1"> </div>
        <div class="col-xl-1"> </div>
    </div>
</div>

Offset

<div class="container">
    <div class="row">
        <div class="col-1"> </div>
        <div class="offset-col-1"> </div>
    </div>
</div>