Quick Tips
You may remove all ID or Class names which contain _dm-, they are only used for demonstration.
Boxed Layout
| Fluid Layout | Remove the .boxed-layout and .centered-layout classes from the body. |
| Centered Layout | Add a class .centered-layout to the body. |
| Boxed Layout | Add a class .boxed-layout to the body. |
| Boxed Layout with background image |
Add background image to the <body class="boxed-layout" style='background-image: url("path_to_img/image.jpg");'>
..
..
</body>
Or it could be in your own class. .bg-img {
background-image: url("path_to_img/image.jpg");
}
<body class="boxed-layout bg-img">
..
..
</body>
|
Color Schemes
Replace the current Bootstrap CSS and Nifty CSS path with the new path of the CSS color schemes you wish to use.
This is where you can change the color scheme of your app / website.
<head>
...
<title>My Project</title>
...
<!-- STYLESHEETS -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--- -->
<!-- Bootstrap CSS [ REQUIRED ] -->
<link rel="stylesheet" href="./assets/css/color-schemes/SELECTED-SCEHEMS/bootstrap.min.css">
<!-- Nifty CSS [ REQUIRED ] -->
<link rel="stylesheet" href="./assets/css/color-schemes/SELECTED-SCEHEMS/nifty.min.css">
</head>
Header
| Sticky header | Add a class .hd--sticky to the #root. |
| Expanded header | Add a class .hd--expanded to the #root. |
| Expanded header with overlapping content. | Add a class .overlapping to the #content > .content__header. |
Animations
Add the following class to the body to change the animation transition.
| Transition function name | Class name |
|---|---|
| In Quart | .in-quart |
| Out Quart | .out-quart |
| In Back | .in-back |
| Out Back | .out-back |
| In Out Back | .in-out-back |
| easeInOutBack | .easeInOutBack |
| steps | .steps |
| jumping | .jumping |
| rubber | .rubber |
