Note: This Documentation has been deprecated and will not be updated anymore

Please use this link from now: https://advaithm26.github.io/litcss/docs

Overview

LitCSS is is usually utilized with Bootstrap CSS but it can also be used by itself

Include LitCSS and LitJS if you haven't already 

<!--LitCSS-->
<link href="https://cdn.jsdelivr.net/npm/css-litcss/main/css/litcss.min.css" crossorigin="anonymous"/>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<!--LitJS-->
<script src="https://cdn.jsdelivr.net/npm/css-litcss/main/js/litjs.min.js"></script>

Components that require LitJS

If you are planning to or using these components, you must include LitJS

Default CSS

LitCSS ships with some default CSS applied to the <html> and <body> tags:

  1. min-height and min-width are both set to 100% for the html element
  2. The height and width of the body tag are set to 100%

Changing any of these values may result in unexpected errors

Height and Width classes

Quickly set the height or width of an element in pixels using our lit classes

Syntax

{desired-dimension}-{bs4-breakpoint}-{px}

Syntax explained

  1. {desired-dimension} (required, ht or wd) desired dimension you want to change. ht for height and wd for width
  2. {bs4-breakpoint} (optional) any Bootstrap 4 breakpoint for responsive width. See Bootstrap responsive breakpoints to learn about breakpoints.
  3. {px} (required, number) desired width in pixels of the selected element

Available classes

Here is a table showing all of the values included in LitCSS

Note: D stands for dimension and B stands for breakpoint
Class Value
{D}-{B}-10 10px
{D}-{B}-15 15px
{D}-{B}-25 25px
{D}-{B}-35 35px
{D}-{B}-50 50px
{D}-{B}-60 60px
{D}-{B}-75 75px
{D}-{B}-85 85px
{D}-{B}-100 100px
Class Value
{D}-{B}-125 125px
{D}-{B}-150 150px
{D}-{B}-175 175px
{D}-{B}-200 200px
{D}-{B}-250 250px
{D}-{B}-300 300px
{D}-{B}-400 400px
{D}-{B}-500 500px
{D}-{B}-600 600px
Class Value
{D}-{B}-700 700px
{D}-{B}-750 750px
{D}-{B}-800 800px
{D}-{B}-900 900px
{D}-{B}-1000 1000px
{D}-{B}-min-content min-content
{D}-{B}-max-content max-content
{D}-{B}-half 50%
{D}-{B}-max 100%

Width Examples

.wd-200
.wd-max-content
.wd-min-content
.wd-half
.wd-max 
<div class="p-2 bg-primary text-white wd-200">.wd-200</div>
<div class="p-2 bg-dark text-white wd-max-content">.wd-max-content</div>
<div class="p-2 bg-danger text-white wd-min-content">.wd-min-content</div>
<div class="p-2 bg-warning text-white wd-half">.wd-half</div>
<div class="p-2 bg-warning text-white wd-max">.wd-max</div>

Height Examples

.ht-60
.ht-100
.ht-250
Note: The values max-content, min-content, half, and max don't work with the height property 
<div class="p-2 bg-primary text-white ht-60">.ht-60</div>
<div class="p-2 bg-dark text-white ht-100">.ht-100</div>
<div class="p-2 bg-danger text-white ht-250">.ht-250</div>
Note: The code snippets above include some Bootstrap classes

Font size

Quickly set the desired font size, with or without responsiveness, with LitCSS classes

Syntax

fs-{bs4-breakpoint}-{px}

Syntax explained

  1. {bs4-breakpoint} (optional) any Bootstrap 4 breakpoint for responsive width. See Bootstrap responsive breakpoints to learn about breakpoints.
  2. {px} (required, number) desired font size in pixels of the selected element

Available classes

Here is a table showing all of the font size values in LitCSS

Note: B stands for breakpoint
Class Value
fs-{B}-7 font-size: 7px;
fs-{B}-10 font-size: 10px;
fs-{B}-13 font-size: 13px;
fs-{B}-16 font-size: 16px;
fs-{B}-18 font-size: 18px;
Class Value
fs-{B}-20 font-size: 20px;
fs-{B}-23 font-size: 23px;
fs-{B}-25 font-size: 25px;
fs-{B}-35 font-size: 35px;
fs-{B}-45 font-size: 45px;
fs-{B}-60 font-size: 60px;

Examples

.fs-10

.fs-18

.fs-35

.fs-60

<p class="fs-10">.fs-10</p>
<p class="fs-18">.fs-18</p>
<p class="fs-35">.fs-35</p>
<p class="fs-60">.fs-60</p>

Font weight

Easily set the font weight of text elements using our font weight classes

Syntax

fs-{value}

Syntax explained

  1. {value} (required, number) desired font weight value See Available classes

Available classes

Here is a table showing all of the font weight values included in LitCSS

Class Value
fw-100 font-weight: 100;
fw-200 font-weight: 200;
fw-300 font-weight: 300;
fw-400 font-weight: 400;
fw-500 font-weight: 500;
fw-600 font-weight: 600;
Class Value
fw-700 font-weight: 700;
fw-800 font-weight: 800;
fw-900 font-weight: 900;
fw-lighter font-weight: lighter;
fw-bold font-weight: bold;
fw-bolder font-weight: bolder;

Examples

.fw-200

.fw-600

.fw-lighter

.fw-bold

.fw-bolder 

<h3 class="fw-200">.fw-200</h3>
<h3 class="fw-600">.fw-600</h3>
<h3 class="fw-lighter">.fw-lighter</h3>
<h3 class="fw-bold">.fw-bold</h3>
<h3 class="fw-bolder">.fw-bolder</h3>

Border radius

Quickly set the border-radius of an element with LitCSS

Syntax

b{corner}-round-{value}

Syntax explained

  1. {corner} (optional, corner direction) optional desired element corner to change the value of (values are: t, b, l, or r)
  2. {value} (required, number) desired font weight value See Available classes

Available classes

This table shows all of the available border radius classes in LitCSS

Note: C stands for corner
Class Value
b{C}-round-5 border-radius: 5px;
b{C}-round-10 border-radius: 10px;
b{C}-round-15 border-radius: 15px;
b{C}-round-25 border-radius: 25px;
Class Value
b{C}-round-50 border-radius: 50px;
b-circle border-radius: 50%;
b-round-0, b-round-none border-radius: 0px;

Examples

.b-round-5
.bm-round-15
.br-round-25
.bt-round-50 
<div class="bg-primary p-2 wd-150 ht-150 b-round-5">.b-round-5</div>
<div class="bg-primary p-2 wd-150 ht-150 bm-round-15">.bm-round-15</div>
<div class="bg-primary p-2 wd-150 ht-150 br-round-25">.br-round-25</div>
<div class="bg-primary p-2 wd-150 ht-150 bt-round-50">.bt-round-50</div>

Transition duration

Control the transition duration of an element with LitCSS

Syntax

trans-{value}

Syntax explained

  1. {value} (required, number) desired transition duration value. See Available classes

Available classes

The following table shows all of the transition duration classes in LitCSS

Class Value
trans-100 transition-duration: 100ms;
trans-300 transition-duration: 300ms;
trans-500 transition-duration: 500ms;
trans-750 transition-duration: 750ms;
trans-1s transition-duration: 1s;
Class Value
trans-2s transition-duration: 2s;
trans-3s transition-duration: 3s;
trans-fast transition-duration: 100ms;
trans-medium transition-duration: 300ms;
trans-slow transition-duration: 600ms;

Examples

Hover over the boxes to see transition duration in action

.trans-300
.trans-2s
.trans-fast
.trans-slow 
<div class="bg-primary p-2 b-round-5 trans-300">.trans-300</div>
<div class="bg-info p-2 b-round-5 trans-2s">.trans-2s</div>
<div class="bg-success p-2 b-round-5 trans-fast">.trans-fast</div>
<div class="bg-secondary p-2 b-round-5 trans-slow">.trans-slow</div>

Positioning

Quickly control the position of an element with our LitCSS positioning classes

Position

Syntax

pos-{position}

Syntax explained

  1. {position} (required, css3 position) desired CSS3 position

Available classes

This table shows all of the position classes LitCSS comes with

Class Value
pos-absolute position: absolute;
pos-relative position: relative;
pos-sticky position: sticky;
pos-fixed position: fixed;
pos-static position: static;

Top, bottom, left, and right

Set the top, bottom, left, and right properties of absolute or relative elements easily with LitCSS classes

Note: These classes will only work on elements with position set to absolute or relative

Syntax

{direction}-{value}

Syntax explained

  1. {direction} (required) desired direction to move the element away from (top, bottom, left, or right)
  2. {value} (required) value in pixels

Available classes

The following table shows all of the values that can be paired with any position direction

Note: DIR stands for direction
Class Value
{DIR}-5 5px
{DIR}-8 8px
{DIR}-10 10px
{DIR}-15 15px
{DIR}-25 25px
Class Value
{DIR}-35 35px
{DIR}-50 50px
{DIR}-60 60px
{DIR}-75 75px
{DIR}-85 85px
{DIR}-100 100px

Examples

Note: Content may not display properly on devices with small screens
.pos-relative.left-50
.pos-relative.top-35
.pos-relative.bottom-35
.pos-relative.right-85 
<div class="bg-danger pos-relative wd-max-content p-2 left-50">.pos-relative.left-50</div>
<div class="bg-primary pos-relative wd-max-content p-2 top-35">.pos-relative.top-35</div>
<div class="bg-success pos-relative wd-max-content p-2 bottom-35">.pos-relative.bottom-35</div>
<div class="bg-warning pos-relative wd-max-content p-2 right-25">.pos-relative.right-85</div>
Note: The code snippets above include some Bootstrap classes

Z-index

Control the z-position of absolute, relative, or fixed elements directly with LitCSS classes

Syntax

z-{value}

Syntax explained

  1. {value} (required) z position of the selected element. See Z-index available classes

Available classes

This table shows all of the z-index values that are included in LitCSS

Class Value
z-1 1
z-2 2
z-3 3
z-5 5
z-10 10
z-max 999999
Class Value
z-n1 -1
z-n2 -2
z-n3 -3
z-n5 -5
z-n10 -10
z-min -999999

Overflow

Set the overflow property on any element use LitCSS classes

Syntax

overflow-{axis}-{value}

Syntax explained

  1. {axis} (optional, x or y) Optional axis to apply the overflow property on
  2. {value} (required) any supported overflow value: scroll, hidden, or auto

Examples

This content has the class .overflow-scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ullamcorper quam sed arcu ullamcorper auctor. Maecenas vitae libero eget sem cursus tincidunt ac sit amet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce molestie consequat volutpat. Maecenas porta ullamcorper urna id vulputate. Aliquam semper nisl in diam molestie, et mattis sem porttitor. Integer vitae erat justo. Nulla ultricies sit amet sapien eu condimentum. Integer consequat imperdiet dignissim. Pellentesque elementum vehicula lorem at lacinia. Nam faucibus massa ac pellentesque sagittis. Fusce et lobortis dolor. Ut venenatis ullamcorper nisl sed dapibus. Nam tincidunt cursus nisl, eu pellentesque quam. Nunc accumsan libero eu libero lobortis, auctor interdum sapien sagittis.

This content has the class .overflow-hidden

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ullamcorper quam sed arcu ullamcorper auctor. Maecenas vitae libero eget sem cursus tincidunt ac sit amet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce molestie consequat volutpat. Maecenas porta ullamcorper urna id vulputate. Aliquam semper nisl in diam molestie, et mattis sem porttitor. Integer vitae erat justo. Nulla ultricies sit amet sapien eu condimentum. Integer consequat imperdiet dignissim. Pellentesque elementum vehicula lorem at lacinia. Nam faucibus massa ac pellentesque sagittis. Fusce et lobortis dolor. Ut venenatis ullamcorper nisl sed dapibus. Nam tincidunt cursus nisl, eu pellentesque quam. Nunc accumsan libero eu libero lobortis, auctor interdum sapien sagittis. 

<div class="ht-300 overflow-scroll">.overflow-scroll</div>
<div class="ht-300 overflow-hidden">.overflow-hidden</div>

Scale

LitCSS includes classes that allow you to scale down elements like iframes to a smaller size

Syntax

scale-{percent}

Syntax explained

  1. {percent} (required, number) Percentage to scale the selected element down to. See Available classes

Available classes

This table shows the scale classes included in LitCSS

Class Value
scale-25 scale(0.25)
scale-50 scale(0.50)
scale-75 scale(0.75)
Class Value
scale-25-no-zoom scale(0.25) (w/o zoom)
scale-50-no-zoom scale(0.50) (w/o zoom)
scale-75-no-zoom scale(0.75) (w/o zoom)

Examples

Here is an iframe containing a full webpage that is scaled down to fit into this documentation

Note: Some content may have trouble displaying on devices with small screens

.scale-25

.scale-50 

<iframe class="scale-25" style="zoom: 500%;" src="#"></iframe>
<iframe class="scale-25" style="zoom: 500%;" src="#"></iframe>

SVG color support

That SVG you wanted in your website unfortunaly doesn't have the color you were looking for? Fear not because LitCSS allows you to change the color of any SVG or picture using the CSS3 filter property

Syntax

svg-fill-{bs4-color}

Syntax explained

  1. {bs4-color} (required, bootstrap 4 color) color to filter the selected element to. See See Available colors

Available colors

The following table lists all of the available filter classes in LitCSS

Class
svg-fill-primary
svg-fill-danger
svg-fill-secondary
svg-fill-success
Class
svg-fill-info
svg-fill-warning
svg-fill-white
svg-fill-black

Hoverable svgs

To darken an svg on hover simply add the .hoverable class

.hoverable
.svg-fill-danger.hoverable.trans-medium

Examples

Original Java svg
.svg-fill-warning
Original Python svg
.svg-fill-primary.hoverable 
<img class="svg-fill-warning" src="path/to/your.svg"/>
<img class="svg-fill-primary hoverable" src="path/to/your.svg"/>

Gradients

Making the gradients you want shouldn't have to be hard, thankfully LitCSS offers classes just for gradients

Syntax

lg-{color1}-{color2}-{gradient direction}

Syntax explained

  1. {color1}and {color2} (required) colors to blend together to make a gradient See Available gradients
  2. {gradient direction} (optional) direction the gradient should blend. See

Available directions

{gradient direction} Direction
lg-{color1}-{color2}-t Top
lg-{color1}-{color2}-b Bottom
lg-{color1}-{color2}-l Left
lg-{color1}-{color2}-r Right
{gradient direction} Direction
lg-{color1}-{color2}-tl Top left
lg-{color1}-{color2}-tr Top right
lg-{color1}-{color2}-bl Bottom left
lg-{color1}-{color2}-br Bottom right

Available colors

These are all of the gradients that LitCSS includes

Class
lg-black-white-{gradient direction}
lg-red-yellow-{gradient direction}
lg-blue-lightblue-{gradient direction}
lg-green-red-{gradient direction}
lg-blue-green-{gradient direction}
lg-skyblue-green-{gradient direction}
lg-blue-red-{gradient direction}
Class
lg-lightblue-purple-lightred-{gradient direction}
lg-pink-blue-{gradient direction}
lg-purple-indigo-{gradient direction}
lg-red-orange-{gradient direction}
lg-green-lightblue-purple-{gradient direction}
lg-cyan-darkgreen-{gradient direction}
lg-rainbow-{gradient direction}

Notes

Need your website viewer to know something important? LitCSS has got you covered with our note classes

Syntax

note-{bs4 color}

Syntax explained

  1. {bs4 color} (required) color of the note

Available notes

These are all of the note classes that LitCSS has

.note-info Use this note to inform the viewer
.note-success Use this note to notify a successful attempt at something
.note-warning Use this note to warn the viewer
.note-danger Use this note to notify about something dangersous 
<div class="note-info"><code>.note-info</code> Use this note to inform the viewer</div>
<div class="note-success"><code>.note-success</code> Use this note to notify a successful attempt at something</div>
<div class="note-warning"><code>.note-warning</code> Use this note to warn the viewer</div>
<div class="note-danger"><code>.note-danger</code> Use this note to notify about something dangersous</div>

Back to top button

Long pages like this documentation make it hard for the user the scroll all the way back to the top of the page, luckily LitCSS offers a solution for that

Note: Make sure you include LitJS for this element to work

Add to your page

  1. First, add the class.back-to-top-btn to an <a> element at the top of your page
  2. Then, add any icon inside the <a> element to customize the button

Example

You should see an example of this at the bottom right corner of the page 

<a class="back-to-top-btn pt-2" title="Back to top"><img src="path/to/your.icon"/></a>
Note: If your note is off center, override the existing padding

Animated hamburger icons

LitCSS offers unique hamburger icons for opening menues etc.

Note: Make sure you include LitJS for this element to work

Examples

LitCSS offers 3 different types of hamburger icon animations

Normal 

<a class="hamburger-icon">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</a>

Hamburger spin

Add .hamburger-spin after .hamburger-icon for the spin animation 

<a class="hamburger-icon hamburger-spin">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</a>

Hamburger press

Add .hamburger-press after .hamburger-icon for the press animation 

<a class="hamburger-icon hamburger-press">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</a>

Smaller hamburgers

To scale down the size of the hambuger icons use the .scale class

.scale-25 
<div class="ht-25 wd-25">
  <a class="hamburger-icon hamburger-spin scale-25">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </a>
</div>
Note: You must include a div element with a fixed height and width to cut of the whitespace caused by the scale property

Scroll progress indicators

Create a indicator that shows how far the user scrolled with a LitCSS scroll indicator

Note: Make sure you include LitJS for this element to work

Examples

Unfortunately you can only have one scroll progress indicator per page, but you can see an example of this at the top of the documentation 

<div class="progress-bg bg-transparent">
  <div class="progress-bar lg-blue-lightblue-r" id='scroll-indicator'></div>
</div>

Syntax

The outer div must have the class .progress-bg white the inner div must have the class progress-bar and have the id #scroll-indicator

Tip: You can change the color of the background and the scroll bar to any color or gradient you like!

Gradient buttons

LitCSS includes beautiful gradient buttons in four different colors and in two different states

Examples

LitCSS offers 4 different gradients for you to chose from

.gradient-btn-blue .gradient-btn-green .gradient-btn-orange .gradient-btn-purple 
<a href="#" class="gradient-btn-blue">.gradient-btn-blue</a>
<a href="#" class="gradient-btn-green">.gradient-btn-green</a>
<a href="#" class="gradient-btn-orange">.gradient-btn-orange</a>
<a href="#" class="gradient-btn-purple">.gradient-btn-purple</a>

Pop on hover

By adding the class .gradient-btn-pop the button will "pop" when you hover over it

HOVER ME HOVER ME HOVER ME HOVER ME 
<a href="#" class="gradient-btn-blue gradient-btn-pop">HOVER ME</a>
<a href="#" class="gradient-btn-green gradient-btn-pop">HOVER ME</a>
<a href="#" class="gradient-btn-orange gradient-btn-pop">HOVER ME</a>
<a href="#" class="gradient-btn-purple gradient-btn-pop">HOVER ME</a>

Large gradient button

Adding the class .gradient-btn-lg will increase the size of the button

HOVER ME HOVER ME HOVER ME HOVER ME 
<a href="javascript:void(0)" class="gradient-btn-blue gradient-btn-lg">HOVER ME</a>
<a href="javascript:void(0)" class="gradient-btn-green gradient-btn-lg">HOVER ME</a>
<a href="javascript:void(0)" class="gradient-btn-orange gradient-btn-lg">HOVER ME</a>
<a href="javascript:void(0)" class="gradient-btn-purple gradient-btn-lg">HOVER ME</a>

Codeboxes

If you are a web developer like me you may need a way to show your viewers your code snippets, thankfully LitCSS has got your back

Note: I reccomend using highlight.js to highlight your code

Examples

LitCSS includes 2 different codebox themes

Dark codebox (defualt) 

<div class="codebox overflow-auto">
  <pre><code>
    <!--Your code here-->		
    	
  </code></pre>
</div>

Light codebox 

<div class="codebox codebox-light overflow-auto">
  <pre><code>
    <!--Your code here-->		
    	
  </code></pre>
</div>

Codebox with copy button

Note: The copy button snippet uses Bootstrap classes 
<div class="codebox overflow-auto">
  <button
    class="copy-btn btn btn-danger fs-10 p-1 float-right"
    onclick="this.blur()"
  >Copy</button>
  <pre><code>
    <!--Your code here-->		
    	
  </code></pre>
</div>
Note: I recomend using clipboard.js to copy text to the clipboard

Slider switch

LitCSS toggle switches look aesthetically cool but can also be customized!

Examples 

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>
Tip: add the attrubute checked to the input element to make the toggle switch load as checked

Custom colors

Note: To change the color of the unchecked swich just add styles to the span.slider element 
<label class="switch">
  <input type="checkbox">
  <span class="slider bg-danger"></span>
</label>

Or...

<label class="switch">
  <input type="checkbox">
  <span class="slider" style="background-color: red;"></span>
</label>

The table below shows all of the checked colors that LitCSS ships with

Class Value
slider-checked-danger
slider-checked-primary
slider-checked-success
Class
slider-checked-warning
slider-checked-indigo
slider-checked-pink
slider-checked-orange

Wow you actually read the documentation!

Now you can use LitCSS in your own projects!