Lionzcss is a CSS library. This means it provides components with CSS classes already styled to help you make your Site look prettier.

To use Lionzcss, you can either use the pre-compiled .css file or install the .sass files so you can customize it to your needs.

Option 1 One general .css file

You can import the CSS file directly from this site into your main css file :

CSS @import

You can import the CSS file directly from this site into your HTML page:

HTML <link>

Lionzcss also available on Cdnjs

Option 2 Separate scripts solution

"You can import or include your component styling only instead of importing one .css file" :

You can import the CSS file directly from this site into your main css file :

CSS @import

${component_name} :

cards
popups
tables
buttons
alerts

VERY IMPORTANT if you're using this method you need to include at the top ini.min.css file because it contains all the colors,methods etc ...

You can import the CSS file directly from this site into your HTML page :

HTML <link>

Option 1 One general .scss file

You can import the SCSS file directly from this site into your main Scss file :

SCSS @import

Option 2 Separate scripts solution

"You can import or include your component styling only instead of importing one .scss file" :

You can import the CSS file directly from this site into your main css file :

SCSS @import

${component_name} :

cards
popups
tables
buttons
alerts

Download the Github release

You can get the latest Lionzcss release as a .zip from GitHub :

or you can clone it :

SSH HTTPSGithub CLI

In order to get an interactive webpage Lionzcss provides you with one.js file or files to handle all the events onClick onDrop ondrag onload ...etc

Note Including or not .js file or files will not effect any of your lionzcss components , or push some error to your projects !

Option 1 One general .js file

You can include the Js file directly from this site into your application :

JS <script>

Option 2 Separate scripts solution

"You can import or include your component script only instead of importing one .js file" :

JS <script>

${component_name} :

cards
popups
tables
buttons
alerts

# Code requirements

For Lionzcss to work correctly, you need to make your webpage responsive.

1 Use the HTML5 doctype

2 Add the responsive viewport meta tag

# Starter template

If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer.

# Helpers - classes

"helpers or classes" are some css classes that you can rely on to customize your design such as : changing colors , add some margin ,padding , font-size etc....

# Colors

To apply any of the colors on a html Tag you can use the colorname as class Example : .danger But to apply the color as background you need to type the colorName+ "-bg" Example : .danger-bg

Available colors :

danger

success

warning

primary

secondry

info

dragon

marineblue

hrpink

white

darkGr

grey-3

grey-5

grey-4

facebook

twitter

youtube

github

# Icons

To use this icons you only need to create a <i> Tag and add to it a class .icn-${iconName} Example : facebook Icon <i class="icn-facebook"></i>

By default the icon color is the currentColor to change it you only need to add the colorname as classname Example
<i class="icn-bell info"></i>

Available Icons :

mail

heart

heart-empty

star

star-empty

user

users

video

videocam

picture

camera

check

close-bg

plus

minus

home

attch

lock

Lionzcss

Getting started with Lionzcss

Get the Lionzcss CSS file

Option 1 One general .css file

You can import the CSS file directly from this site into your main css file :

You can import the CSS file directly from this site into your HTML page:

Lionzcss also available on Cdnjs

Option 2 Separate scripts solution

You can import the CSS file directly from this site into your main css file :

You can import the CSS file directly from this site into your HTML page :

Get the Lionzcss Scss file

Option 1 One general .scss file

You can import the SCSS file directly from this site into your main Scss file :

Option 2 Separate scripts solution

You can import the CSS file directly from this site into your main css file :

Download the Github release

You can get the latest Lionzcss release as a .zip from GitHub :

or you can clone it :

Get the Lionzcss JS file

In order to get an interactive webpage Lionzcss provides you with one.js file or files to handle all the events onClick onDrop ondrag onload ...etc

Option 1 One general .js file

You can include the Js file directly from this site into your application :

Option 2 Separate scripts solution

# Code requirements

For Lionzcss to work correctly, you need to make your webpage responsive.

1 Use the HTML5 doctype

2 Add the responsive viewport meta tag

# Starter template

If you want to get started right away, you can use this HTML starter template. Just copy/paste this code in a file and save it on your computer.

# Helpers - classes

"helpers or classes" are some css classes that you can rely on to customize your design such as : changing colors , add some margin ,padding , font-size etc....

# Colors

To apply any of the colors on a html Tag you can use the colorname as class Example : .danger But to apply the color as background you need to type the colorName+ "-bg" Example : .danger-bg

Available colors :

# Icons

To use this icons you only need to create a <i> Tag and add to it a class .icn-${iconName} Example : facebook Icon <i class="icn-facebook"></i>

Available Icons :