Sass

Last updated 7 months ago

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