Navigation bars (Nav Bars) are the most prominient features of a webpage. They not only make websites userfriendly but also classy.
Making them can never be so easy with this framework. For a Nav Bar docked to the top just make a nav.nav.nav-top with div.left, div.center and div.right nested in it, with p nested in each of them.
Similarly, to make a Nav Bar docked to left, make a nav.nav.nav-left with some div.section in it and p nested in each. To toggle this Left Nav, just make a Javascript function call to toggleLeftNav().
And that's it!
| Lorem ipsum | dolor sit amet, |
| consectetur adipiscing elit | Curabitur sit amet |
| ullamcorper lectus. | Nunc congue quam |
| at diam porttitor, | vitae laoreet nulla aliquet |
.table.highlight-alternate
| Lorem ipsum | dolor sit amet, |
| consectetur adipiscing elit | Curabitur sit amet |
| ullamcorper lectus. | Nunc congue quam |
| at diam porttitor, | vitae laoreet nulla aliquet |
.table.interactive
| Lorem ipsum | dolor sit amet, |
| consectetur adipiscing elit | Curabitur sit amet |
| ullamcorper lectus. | Nunc congue quam |
| at diam porttitor, | vitae laoreet nulla aliquet |
.table.interactive.highlight-alternate
div.card with heder as div.header and similarly for the body and footer.Login Form
16
div.card.card-number with div.number and div.matter for respective sections.
Captions ...
div.card.card-picture with div.picture (don't forget to include a background image!) and div.caption (use <p> element to wrap the caption) in it.
Dialog boxes are very easy, convinient and 'famous' way to prompt or inform the user about something. This thing was absent on the web, but yes, it's now possibile to get it there. Just use div.d-box in which, a span.toogle for the name of the button, div.content which includes all other items. It includes div.box which inturn includes a div.header, div.matter, and div.footer. div.footer may include a special button.close to close the modal/dialog box. And, not to forget that every text in div.header, div.matter, div.footer shall be included in a <p> element.
Try to open this modal / dialog box.
What's a dialog box?
The graphical control element dialog box (also called dialogue box or just dialog) is a small window that communicates information to the user and prompts them for a response.
Dialog boxes are classified as "modal" or "modeless", depending on whether they block interaction with the software that initiated the dialog. The type of dialog box displayed is dependent upon the desired user interaction. [Wikipedia]
Beautiful Slideshow. Beautiful Waterfalls ...
Himalayas !!
Bamboo Forests of Japan
Rare Double Rainbow :D
A rabbit
<
>
div.picture-slideshow with desired tansition effects using .effect-submerge, .effect-blur or .effect-dilate as per choice. Then, add div.picture for images with background image using CSS, for a simple caption just add a p inside the div.picture. Finally, for scrolling purposes, add two div's -- div.goleft and div.goright and finally nest a p inside them for desired icons.data-autoscroll="true".
Loading Icons can be used to show up when the webpage is loading, it gives user an impression of better and stylish web build plus a reliable website. It also gives info. the webpage is loading and should not be disturbed now for the best experience.
Codes for loading animation is pretty complicated but highly shortened.
Just use div.loading.loading-square-circle
Just use div.loading.loading-flappy-square with a div in it.
Just use div.loading.loading-two-circles with two non-nested div in it.
div.loading-page and nest the animation in it. Rest all is handled automatically.
Tabination or simply tab is a very important tool for navigation. I can be made with ease with this framework.
Take an example -> Did you liked this framework? Explore the different tabs and the smooth animation.
Just use div.tabination with two childs - div.tabs and div.information. div.tabs contain various div.item with attribute data-tabtarget and a value corresponding to the id of the div.info present in div.information.
div.progress-bar and a div.progress, div.progress.progress-striped, div.progerss.progress-animated or their combinations to make any desired progress bar. An attribute data-value=i where (-1 < i < 101) can be added to the div.progress.
This beautiful scrolling effect is known as masked scroll, keeping the background image/pattern fixed with respect to the viewport.
Making it is very easy. Just use div.masked-page with an attribute data-maskedbkground of your desired value (the link of image, directly). Then there are two options, have a full page slide or a centerd slide, they can be made by using div.slide-full and div.slide respectively within the div.masked-page.
To see how to make a page like this, check out it's source code.