Working with Sass
Sass is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions. Pages supports Sass and is pure built on top of Sass
Sass Files are found under pages/src/sass
Modules
The seperation of modules help you to remove whats not necessary and build your own custom pages css
| Name | Description |
|---|---|
| layout.scss | The core layout styles for pages |
| respnsive.scss | The responsive handlers |
| panels.scss | Bootstrap Panels over-written classes |
| typography.scss | Contains all typo related styles included bg-color |
| button.scss | Bootstrap button over-written classes and pages dropdown |
| alerts.scss | Bootstrap alert messages over-written classes |
| notifications.scss | Pages notifications, bootstrap badges, popovers |
| progress_indicators.scss | Pages progress bars, bootstrap native progress |
| modals.scss | Bootstrap Modal Classes |
| tabs_accordian.scss | Bootstrap tabs and accordains |
| sliders.scss | Class for sliders |
| treeview.scss | Class for treeview |
| treeview.scss | Class for nestables |
| form_elements.scss | All form related class including layouts & validations |
| tables.scss | Classes for bootstrap tables and datatables |
| tables.scss | Classes for bootstrap tables and datatables |
| vector_map.scss | Classes for mapplic plugin |
| Charts.scss | All chart related classes |
| print.scss | Print media query for invoice |
| lockscreen.scss | Class for lockscreen |
| calendar.scss | Pages Calendar plugin |
| social.scss | Pages Social |
| email.scss | Pages email |
| misc.scss | All other utilities and helper classes |
| z-index.scss | 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:
scss/themes/default/var.scss 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 scss,
mixins can be found under pages/src/scss/mixin.scss