Less

Last updated 5 months ago

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions. Pages supports Less and is pure built on top of Less

Less Files are found under pages/src/less

Modules

The seperation of modules help you to remove whats not necessary and build your own custom pages css

NAME

DESCRIPTION

layout.less

The core layout styles for pages

respnsive.less

The responsive handlers

cards.less

Bootstrap cards over-written classes

typography.less

Contains all typo related styles included bg-color

button.less

Bootstrap button over-written classes and pages dropdown

alerts.less

Bootstrap alert messages over-written classes

notifications.less

Pages notifications, bootstrap badges, popovers

progress_indicators.less

Pages progress bars, bootstrap native progress

modals.less

Bootstrap Modal Classes

tabs_accordian.less

Bootstrap tabs and accordains

sliders.less

Class for sliders

treeview.less

Class for treeview

treeview.less

Class for nestables

form_elements.less

All form related class including layouts & validations

tables.less

Classes for bootstrap tables and datatables

tables.less

Classes for bootstrap tables and datatables

vector_map.less

Classes for mapplic plugin

Charts.less

All chart related classes

print.less

Print media query for invoice

lockscreen.less

Class for lockscreen

calendar.less

Pages Calendar plugin

social.less

Pages Social

email.less

Pages email

misc.less

All other utilities and helper classes

z-index.less

To maintian heierachchy and order for layers

Varriables

Varriables help to generate themes, you can custom build you very own theme. The varriables will be include inside a specific theme e.g: less/themes/default/var.less by changing the a few 5 main color varrables you can create your own color palette

Creating your own Color Pallete

By simply changing the following varriables the entire color palete mention here will change Color Palette Main Base color @color-master Primary Colors @color-success @color-complete @color-primary @color-warning @color-danger @color-info

Mixins

We have made a wide varraity of mixins that can be used in less, mixins can be found under pages/src/less/mixin.less

Compiling

We recommend to compile locally without using less.js library, there are many Less compilers for Windows, Mac and also Linux users but we made it even easier. With pages powerful CLI you can compile it without any thirdparty software, simple do any changes to the less files in pages/less and it automatically updates the css in pages/css/pages.css

Use the following commmands on your terminal

Using Grunt

This command will automatically compile the less to css on file save

$ grunt watch

This command will compile the less to css on execute

$ grunt less

Using Gulp

This command will automatically compile the less to css on file save

$ gulp watch

This command will compile the less to css on execute

$ gulp less