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
Rails
This is a guide to install pages core and dependencies on Rails 6
Required Libraries
PLUGIN
DESCRIPTION
DEP. STATUS
jquery.js
Core JS Library
REQUIRED
mordnerizer.js
Browser Feature Detection
REQUIRED
bootstrap.js
Core Framework
REQUIRED
pace.js
Page Progress Loader
OPTIONAL
jquery-unviel.js
Library Used for displaying retina images
OPTIONAL
jquery.ioslist.js
Used Chat list on the quickview
OPTIONAL
jquery.actual.js
Determine image dimentions
OPTIONAL
jquery.scrollbar.js
Scrollbar plugin used in sidebar and portlets
OPTIONAL
Add the following dependencies in your
package.json
. Inside "
dependencies
" object
1
"jquery"
:
"^3.4.1"
,
2
"bootstrap"
:
"4.3.1"
,
3
"modernizr"
:
"3.10.0"
,
4
"pace-js"
:
"1.0.2"
,
5
"jquery-unveil"
:
"1.3.2"
,
6
"jquery.actual"
:
"1.0.19"
,
7
"jquery.scrollbar"
:
"0.2.11"
,
8
"popper.js"
:
"^1.16.0"
,
9
"pages-core"
:
"git+https://github.com/revoxltd/pages-core.git"
Copied!
Run the command to install the dependencies to your project
1
yarn install
Copied!
Import the libraries to webpack by adding it to the following file
config/webpack/environment.js
1
const
{
environment
}
=
require
(
'@rails/webpacker'
)
2
​
3
module
.
exports
=
environment
4
​
5
environment
.
plugins
.
prepend
(
'Provide'
,
6
new
webpack
.
ProvidePlugin
({
7
$
:
'jquery/src/jquery'
,
8
jQuery
:
'jquery/src/jquery'
,
9
Popper
:
[
'popper.js'
,
'default'
]
10
})
11
)
Copied!
Update
config/webpacker.yml
to be able to resolve assets stored in the
app/assets
folder.
1
resolved_paths
:
[
'app/assets'
]
Copied!
Import css/scss dependencies into our main webpack
application.scss
: in app/assets/stylesheets
1
@import
"bootstrap/scss/bootstrap"
;
2
@import
"pages-core/dist/scss/pages"
Copied!
Thats it! you can use the pages layouts mentioned below
Layouts
Other - Previous
Gulp
Last modified
2yr ago
Copy link