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
cards.scss Bootstrap cards 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