Working with Less


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

Read more about how to setup Grunt


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

Read more about how to setup gulp