Pages UI
Search…
Pages UI
v5.0.1 - Pages HTML
Getting Started
Introduction
Layouts
Themes
Sass
Content
Apps
Calendar
Social
Email
API Reference
UI Elements
Color
Typopgrahy
Icons
Buttons
Notifications
Modals
Progressbar
Collapse
Tabs
Sliders
Treeview
Nestable
Form Elements
Checkboxes and Radio
Toggle
Typehead
Selectbox
Datepicker
Masked Input
Autonumeric
Quill Editor
Tags Input
File Upload
Form Layouts
Form Validation
Form Wizard
Charts
Maps
Google Maps
Vector Maps
Tables
Cards
Timeline
Views
Grid
Helpers
Troubleshooting
Browser Support
Change log
Legacy Docs
Other
Grunt
Gulp
Rails
Powered By GitBook
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
Introduction - Previous
Themes
Next - Introduction
Content
Last modified 1yr ago
Copy link
Contents
Modules
Variables
Creating your own Color Pallets