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
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 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
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
Last modified 2yr ago