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
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 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
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
We have made a wide varraity of mixins that can be used in less,
mixins can be found under pages/src/less/mixin.less
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 watchThis command will compile the less to css on execute
$ grunt lessRead more about how to setup Grunt
Using Gulp
This command will automatically compile the less to css on file save
$ gulp watchThis command will compile the less to css on execute
$ gulp less