Sass

Sass is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions. Pages support Sass and is purely built on top of Sass

Sass Files are found under pages/src/sass

• sass

  • modules

  • themes

  • mixin.scss

  • color.scss

  • modules.scss

  • pages.scss

  • responsive.scss

  • var.scss

Modules

The separation of modules help you to remove what's not necessary and build your own custom pages CSS. You can specify which module you need and do not need in modules.scss file.

NAME	DESCRIPTION
layout.scss	The core layout styles for pages
headers.scss	Top Navigation bar
respnsive.scss	The responsive handlers
cards.scss	Bootstrap cards over-written classes
chat.scss	Contains classes for the right hand sidebar chat
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
breadcrumb.scss	Bootstrap breadcrumb classes
notifications.scss	Pages notifications, bootstrap badges, popovers
checkbox.scss	Pages checkboxes
radio.scss	Pages radio element
horizontal_layout.scss	Pages horizontal layout classes for executive and casual layout
horizontal_menu.scss	Horizontal dropdown menu
icons.scss	Pages icons
list.scss	iOS style listview in chat and email
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
nestables.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
overlay-search.scss	Pages quick search classes
quick-view.scss	Pages right hand-side quick drawer
lockscreen.scss	Class for lockscreen
page-loader.scss	PaceJS classes for page loading bar
calendar.scss	Pages Calendar plugin
social.scss	Pages Social
email.scss	Pages email
login.scss	Login page
misc.scss	All other utilities and helper classes
gallery.scss	Image gallery
z-index.scss	To maintain heierachchy and order for layers

Variables

Variables help to generate themes, you can custom build your very own theme. The variables will be included inside a specific theme e.g: scss/themes/default/var.scss by changing the few 5 main color variables you can create your color palette

Creating your own Color Pallets

By simply changing the following variables the entire color palette mention here will change Color Palette Main Base color $color-contrast-lower $color-contrast-higher

Primary Colors $color-success $color-complete $color-primary $color-warning $color-danger $color-info

Mixins

We have made a wide variety of mixins that can be used in scss, mixins can be found under pages/src/scss/mixin.scss