The content class is the body of all our elements. This will house containers and columns. This class creates a left, right, and bottom margin and changes it's width on different devices to keep it responsive and beautiful.
The container class is the hosing wrapper of a specific feature, this class makes the code more easily readable and at the same time adds a margin bottom to your elements. Inside the container classes the features explained bellow will be added.
Control classes are added to specific classes to give them a second set of properties.
left-text: will make text align to the left
center-text: will make text align to the center
right-text: will make text align to the right
no-bottom: this class can be added to any element to remove the margin bottom completely. This can be used for example if you have a paragraph inside a container
half-bottom: this can be added to any element of the page, and it will use half the bottom of the main container class.
full-bottom: this can be added to any element that you wish to have a full bottom. The bottom value is determined by the container class.
responsive-image: when having an image on screen you wish to be fullly responsive and maintain aspect ratio, add the class responsive-image to it and it will automatically scale accordingly when changing resolutions.
disabled: adding this class to any element will turn that element off, by setting it's css to display none.
uppercase: adding this class will make your entire text uppercase
lowercase: adding this class will make your entire text lowercase
regular-anchor: if you don't want a link to change it's color, adding regular-anchor to it will make it take the color of it's parrent element.
hide-if-responsive: this class can be added to any element you wish to hide on tablets but show on mobiles
hide-if-mobile: this class can be added to any element you wish to hide on mobiles but show on tablets.
Responsive classes are columns and responsive columns that adapt according to resolutions. We've set the breaking point at 768px, which is the default small size of a tablet. Under 768px you risk hitting devices like Phablets and Large Phones and making them switch to tablet resolution.
Two Columns, Unresponsive Class.
Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns on any resolutions. You must add last-column to the last one-half to make sure the margins are perfect.
<div class="container"> <div class="one-half">CONTENT HERE</div> <div class="one-half last-column">CONTENT HERE</div> </div>
Three Columns, Unresponsive Class.
Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns on any resolutions. You must add last-column to the last one-third to make sure the margins are perfect.
<div class="container"> <div class="one-third">CONTENT HERE</div> <div class="one-third">CONTENT HERE</div> <div class="one-third last-column">CONTENT HERE</div> </div>
Two Columns, Responsive Class.
Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns, on a mobile device, they will show up as rows, so, unresponsive, but on tablets, they will show up as two columns, so, responsive.
<div class="container"> <div class="one-half-responsive">CONTENT HERE</div> <div class="one-half-responsive last-column">CONTENT HERE</div> </div>
Three Columns, Responsive Class.
Replace the "CONTENT HERE" zone with any feature you want, the code bellow will generate two columns, on a mobile device, they will show up as rows, so, unresponsive, but on tablets, they will show up as two columns, so, responsive.
<div class="container"> <div class="one-third-responsive">CONTENT HERE</div> <div class="one-third-responsive">CONTENT HERE</div> <div class="one-half-responsive last-column">CONTENT HERE</div> </div>
Sidebar columns are basically a column that's 25% the width of the screen and a column that's 75% the width of the screen. Sidebar columns will appear as one row on mobiles and as two columns on tablets.
<div class="container"> <div class="sidebar-right-big">CONTENT HERE</div> <div class="sidebar-left-small">CONTENT HERE</div> </div> <div class="container"> <div class="sidebar-left-big">CONTENT HERE</div> <div class="sidebar-right-small">CONTENT HERE</div> </div>
To create a responsive image, follow the structure bellow
<img src="images/img.jpg" alt="img" class="responsive-image">
To create a responsive video, follow the structure bellow
<iframe class="responsive-video" src="video_address_link"></iframe>
To create a responsive map, go to google maps, get the embed code, and paste it in the iframe example bellow!
<div class="maps-container"> <iframe class="responsive-image maps" src="https://maps.google.com/?ie=UTF8&ll=47.595131,-122.330414&spn=0.006186,0.016512&t=h&z=17&output=embed"></iframe> </div>
Text highlights will make a certain part of the text show up using a background. These are easy to use and are applied by adding a span class to the text you want highlighted. Please check the examples bellow. The span has the main class text-highlight that sets the proper spacings and the highlight-COLOR class that changes the color. Examples of colors can be seen in the code bellow, just copy and paste them to your desired location ( container )
<p><span class="text-highlight highlight-turqoise">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-green">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-blue">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-magenta">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-dark">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-yellow">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-red">This is a highlight</span>and this is the text</p> <p><span class="text-highlight highlight-orange">This is a highlight</span>and this is the text</p>
Altough we also incorporated font-awesome http://fortawesome.github.io/Font-Awesome/icons/ in our project, we included some PNG icons as well. To generate a icon list, you must first create an unsorted list ( ul ) with the class name icon-list, then, to the list you want, add any of the following classes. ( check the example bellow )
<ul class="icon-list"> <li class="address-list">Address icon</li> <li class="block-list">Block icon</li> <li class="bookmark-list">Bookmark icon</li> <li class="briefcase-list">Briefcase icon</li> <li class="bubble-list">Bubble icon</li> <li class="buy-list">Buy icon</li> <li class="calendar-list">Calendar icon</li> <li class="clipboard-list">Clipboard icon</li> <li class="clock-list">Clock icon</li> <li class="delete-list">Delete icon</li> <li class="diagram-list">Diagram icon</li> <li class="document-list">Document icon</li> <li class="down-list">Down icon</li> <li class="flag-list">Flag icon</li> <li class="folder-list">Folder icon</li> <li class="gear-list">Gear icon</li> <li class="globe-list">Globe icon</li> <li class="heart-list">Heart icon</li> <li class="help-list">Help icon</li> <li class="info-list">Info icon</li> <li class="key-list">Key icon</li> <li class="left-list">Left icon</li> <li class="letter-list">Letter icon</li> <li class="monitor-list">Monitor icon</li> <li class="pencil-list">Pencil icon</li> <li class="plus-list">Plus icon</li> <li class="present-list">Present icon</li> <li class="print-list">Print icon</li> <li class="right-list">Right icon</li> <li class="save-list">Save icon</li> <li class="search-list">Search icon</li> <li class="shield-list">Shield icon</li> <li class="statistics-list">Statistics icon</li> <li class="stop-list">Stop icon</li> <li class="tick-list">Tick icon</li> <li class="trash-list">Trash icon</li> <li class="up-list">Up icon</li> <li class="user-list">User icon</li> <li class="wallet-list">Walet icon</li> <li class="warning-list">Warning icon</li> <li class="home-list">Home icon</li> <li class="label-list">Label icon</li> </ul>
Regular lists are vital, and the code for them is very simple. To create an ordered list class name your class ( ol class ) number-list, to create a regular list, name your class (ul class) normal-list.
Static notifications are just background colored boxes used to attract the attention of the viewer. To create these classes, add them to a container and use the examples bellow.
<div class="static-notification-red"> <p class="center-text uppercase">Red notification!</p> </div>
By default, templates are responsive, but please keep in mind the reelestate of the screen you are adding the table to as you cannot add 50 columns to a 300 pixel width screen! Using tables implies the same old structure use since the begging of HTML, but just in case, we're adding the code here so you can copy and paste it to your page and edit from there on!
<table cellspacing='0' class="table"> <tr> <th>TABLE</th> <th class="table-title">PLUS</th> <th class="table-title">PRO</th> </tr> <tr> <td class="table-sub-title"> ONE</td> <td>Yes</td> <td>Yes</td> </tr> <tr class='even'> <td class="table-sub-title"> TWO</td> <td>No</td> <td>Yes</td> </tr> <tr> <td class="table-sub-title"> THREE</td> <td>No</td> <td>No</td> </tr> <tr class='even'> <td class="table-sub-title">VALUE</td> <td class="price">$9.<sup class="small-price">99</sup></td> <td class="price">$109.<sup class="small-price">99</sup></td> </tr> </table>
Responsive tabs are simple to use.
<div class="container"> <div class="tabs"> <a href="#" class="tab-but tab-but-1 tab-active">Tab 1</a> <a href="#" class="tab-but tab-but-2">Tab 2</a> </div> <div class="tab-content tab-content-1"> Tab Content </div> <div class="tab-content tab-content-2"> Tab Content </div> </div>
To add more submenu items, duplicate the anchor classes.
<div class="submenu-navigation"> <a href="#" class="submenu-nav-deploy">Deploy Submenu</a> <div class="submenu-nav-items"> <a href="#">Item 1</a> <a href="#">Item 2</a> <a href="#">Item 3</a> </div> </div>
You can choose between 3 toggles, to switch between these toggles, replace toggle-1, deploy-toggle-1 with -2 and -3. For the toggle-3, be sure to add the following code inside the anchor. <em><strong></strong></em>
<div class="container"> <div class="toggle-1"> <a href="#" class="deploy-toggle-1">This is content toggle</a> <div class="toggle-content"> Toggle Content Here </div> </div> </div>
Big notifications cna be used when a user must see a large notice and these can be closed as well. You can chose between 4 color codes red, green, yellow and blue. replace COLOR-notifcation with the color you want from the four above.
<div class="big-notification red-notification"> <h4 class="uppercase">Notification Title</h4> <a href="#" class="close-big-notification">x</a> <p>A lot of nice stuff you want to write in this notification! It's simple to use and awesome!</p> </div>
Static small notifications can be dismissed with a simple tap. These work the same as the features from the typography page and can be switched between four color codes, green, blue, yellow or red. Replace static-notification-COLOR with the color you wish.
<div class="static-notification-red tap-dismiss-notification"> <p class="center-text uppercase">A red notification! Dismiss!</p> </div>
Not much to be explained here, these are button classes, copy and paste them where you need them.
<a href="#" class="button button-red">Button</a> <a href="#" class="button button-green">Button</a> <a href="#" class="button button-blue">Button</a> <a href="#" class="button button-magenta">Button</a> <a href="#" class="button button-tea">Button</a> <a href="#" class="button button-yellow">Button</a> <a href="#" class="button button-orange">Button</a> <a href="#" class="button button-light">Button</a> <a href="#" class="button button-grey">Button</a> <a href="#" class="button button-dark">Button</a> <a href="#" class="button button-red">Button</a> <a href="#" class="button button-green">Button</a>
3D Buttons have a darker 4 pixel stroke beneeth them to give them a three dimensional effect. Just copy and paste them where you need them.
<a href="#" class="button-3d button-red red-3d">Button</a> <a href="#" class="button-3d button-green green-3d">Button</a> <a href="#" class="button-3d button-blue blue-3d">Button</a> <a href="#" class="button-3d button-magenta magenta-3d">Button</a> <a href="#" class="button-3d button-tea tea-3d">Button</a> <a href="#" class="button-3d button-yellow yellow-3d">Button</a> <a href="#" class="button-3d button-orange orange-3d">Button</a> <a href="#" class="button-3d button-light light-3d">Button</a> <a href="#" class="button-3d button-grey grey-3d">Button</a> <a href="#" class="button-3d button-dark dark-3d">Button</a> <a href="#" class="button-3d button-red red-3d">Button</a> <a href="#" class="button-3d button-green green-3d">Button</a>
The font awesome class ( http://fortawesome.github.io/Font-Awesome/icons/ 4.1.0 curent version ) allows you to import icons by simply adding the <i class="fa fa-ICON-NAME"></i> to your button. Check the link to see all icons available. Make sure you copy and paste the icon name corectly. In case you see that an icon is not displayed, it means that font-awesome has updated their classes and you need to update the font-awesome.css file.
We won't be updating our files just for font-awesome.css because it would be a logistical nightmare to update all our 60+ files for just one CSS. Updating the class is extremely simple. Open http://fortawesome.github.io/Font-Awesome/ , download the pack, extract the file, (make a backup of font-awesome.css from our styles folder then ) replace font-awesome.css in our item, with the font-awesome.css you've just downloaded! Voila! Font awsome has been updated!
In case this method does not work, revert to the old font-awesome you've just backed up and send us a message. We will fix the issue in less than 24 hours and give you a free update!
<a href="#" class="button button-red"><i class="fa fa-navicon"></i>Button</a> <a href="#" class="button button-green"><i class="fa fa-life-saver"></i>Button</a> <a href="#" class="button button-blue"><i class="fa fa-paw"></i>Button</a> <a href="#" class="button button-magenta"><i class="fa fa-camera"></i>Button</a> <a href="#" class="button button-tea"><i class="fa fa-cog"></i>Button</a> <a href="#" class="button button-yellow"><i class="fa fa-picture-o"></i>Button</a> <a href="#" class="button button-orange"><i class="fa fa-question"></i>Button</a> <a href="#" class="button button-light"><i class="fa fa-exclamation"></i>Button</a> <a href="#" class="button button-grey"><i class="fa fa-angle-right"></i>Button</a> <a href="#" class="button button-dark"><i class="fa fa-angle-left"></i>Button</a>
The following code must be added in a container.
<em class="speach-left-title">John Doe says:</em> <p class="speach-left">This is just an awesome bubble! It's quite cute isn't it?</p> <div class="clear"></div> <em class="speach-right-title">Jane Doe replied:</em> <p class="speach-right blue-bubble">Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!</p> <div class="clear"></div>
Once you've copied the code above, replace the text you need with yours. The top code will create a left speach bubble, the bottom code will create a right speach bubble. Copy and paste as many times as many bubbles you need.
Device specific classes will apear only for the device that browse them. We've added android, ipod, ipad, and iphones to the mix, because these represent 99% of the mobile marketshare. To change the device, simply replace the main class DEVICE-detected with android, ipod, iphone, or ipad.
We've made a small design for you, but inside the DEVICE-detected class you can add whatever content you wish to display for that specific platform.
<div class="android-detected"> <div class="detected-wrapper"> <img src="images/detector/android.png" alt="img"> <h4>Get it on Google Play</h4> <em>For your Android Device</em> <p> This is a demo box, included in the template, but you can detect Androids and add whatever text or element appear for that platform only! </p> </div> </div>
Inside the content class, create a class called portfolio-one, and inside it, add the following code to create a portfolio item. You can duplicate the code bellow to create more items.
<div class="portfolio-one-item full-bottom"> <div class="portfolio-one-image"> <a href="images/pictures/3.jpg" class="swipebox" title="Caption Here"> <i class="fa fa-plus"></i> </a> <img src="images/pictures/3.jpg" class="responsive-image"> </div> <div class="portfolio-one-text"> <h3 class="title">Portfolio Item</h3> <em class="subtitle">Awesome one column portfolio</em> <div class="portfolio-one-details"> <a href="#">10 September 2055</a> <a href="#">Mobile</a> <a href="#">Envato Item</a> </div> <p class="half-bottom"> Lorem ipsum dolor sit amet, consectetur est adipiscing elit. Pellentesque lacus ex, sollid um facilisis elementum quis, vulputate nec urna. In scelerisque tincidunt enim, eutsmax. </p> <div class="portfolio-one-links"> <a href="#"><i class="fa fa-arrow-right"></i> Visit Project</a> <a href="#">Details <i class="fa fa-link"></i></a> </div> </div> </div>
Inside the content class, create a class called portfolio-two, and inside it, add the following code to create a portfolio item. You can duplicate the code bellow to create more items.
<div class="portfolio-two-item full-bottom"> <div class="portfolio-two-image"> <a href="images/pictures/3.jpg" class="swipebox" title="Caption Here"> <i class="fa fa-plus"></i> </a> <img src="images/pictures/3s.jpg" class="responsive-image"> </div> <div class="portfolio-two-text"> <h3 class="title">Portfolio Item</h3> <em class="subtitle">Portfolio items placed on multiple columns.</em> <p class="half-bottom"> Lorem ipsum dolor sit amet, consecte tur est adipiscing elit. Lacus sollid um facilisis eleme quis, vulputat nec. </p> <div class="portfolio-two-links"> <a href="#"><i class="fa fa-arrow-right"></i> Visit Project</a> </div> </div> </div>
<div class="portfolio-wide"> <a href="#" class="portfolio-wide-item"> <h3>Swing near the ocean</h3> <p>This is a wide item, just tap it to read more</p> <div class="overlay"></div> <img class="responsive-image" src="images/pictures/1ww.jpg" alt="img"> </a> </div>
To make more wide items, duplicate the anchor class.
Line 3 creates the wide portfolio title.
Line 4 creates the wide portfolio text
Line 5 creates the overlay for the image
Line 6 creates the image itself.
<ul class="gallery round-thumb"> <li> <a class="swipebox" href="images/pictures/1.jpg" title="An awesome gallery!"> <img src="images/pictures/1s.jpg" alt="img" /> </a> </li> </ul>
<div class="portfolio-wide"> <a href="images/pictures/1.jpg" class="swipebox portfolio-wide-item" titlte="caption here"> <h3>Swing near the ocean</h3> <p>This is a wide item, just tap it to read more</p> <div class="overlay"></div> <img class="responsive-image" src="images/pictures/1ww.jpg" alt="img"> </a> </div>
The wide gallery is the exact same thing as a portfolio, only, it houses the swipebox class inside the main anchor.
<div class="coverpage coverpage-bg3 coverpage-error">
<div class="coverpage-content">
<h1>404</h1>
<h4>You're on the wrong page!</h4>
<p>
We're either building this page now, and you're
here too soon, or the page doesn't exist! So
how about going back home?
</p>
<a class="coverpage-button" href="#">Homepage</a>
</div>
<div class="overlay"></div>
</div>
This code generates the 404 page. It should be outside the content. We suggest not including a footer on these pages
Line 1 creates the coverpaage, meaning, the 100% height of the page, this has the class coverpage-bg3 which is the background image. To edit and replace the background image, open framework.css and find (ctrl + f or cmd + f ) .coverpage-bg3, replace the image there with your own.
Line 3 is the main title
Line 4 is the small title
Line 5 to 9 is the 404 page text
Line 10 is the button to direct users back to a page you desire.
<div class="coverpage coverpage-bg4 coverpage-construction"> <div class="coverpage-content"> <h1>Coming Soon</h1> <h4>We're still building this page</h4> <p> This page is curently under construction, but feel free to check it later we'll have it complete realy soon! </p> <div class="countdown"> <!-- Time Generated By Custom.JS --> </div> <a class="coverpage-button" href="#">Homepage</a> </div> <div class="overlay"></div> </div>
The same principle of placing the construction page applies as for the 404 page
Line 3 is the main title
line 4 is the main sub title
line 5 is the text
line 9 to 11 is the countdown timer, you can open custom.js and locate the countdown code, it's on the top lines. Replace the date there with yours.
Line 12 is the button to redirect users wherever you want them!
<div class="profile-header full-bottom"> <div class="profile-header-contents"> <img class="profile-header-logo" src="images/pictures/3s.jpg" alt="img"> <h4 class="profile-header-heading">John Doe</h4> <em class="profile-header-subheading">Professional Consultant</em> <div class="profile-header-socials"> <a href="#"> <i class="fa fa-facebook"></i> 5k+ Likes </a> <a href="#"> <i class="fa fa-twitter"></i> 9k+ Followers </a> <a href="#"> <i class="fa fa-google-plus"></i> 2.5k + Plus </a> </div> </div> <div class="profile-header-background"></div> <div class="profile-header-overlay"></div> </div>
The following code creates a notification that uses a image for the icon. Replace the second line image with an image you desire.
<p class="notification-page-item"> <img src="images/pictures/1s.jpg" alt="img"> <em> Site outage for update. More updates soon. Tap read more for further information. </em> <a href="#">Read More</a> <a href="#">15th July 2016</a> </p>
<p class="notification-page-item"> <i class="fa fa-facebook" style="background-color:#3B5998;"></i> <em> We just launched a Facebook page, for news and updates, go ahead and like our page. </em> <a href="#">Like our Page</a> <a href="#">15th July 2016</a> </p>
<p class="notification-page-item"> <i class="fa fa-warning yellow-notification"></i> <em> Important notifications here! Just a simple class, copy and paste it and you're ready! </em> <a href="#">Follow on Twitter</a> <a href="#">15th July 2016</a> </p>
This documentation is made for the page features, but the first documentation will cover the navigation, header, changing logos and more details that are independent to each template.
That's simple. Send us a message using this form -> http://enableds.com/html-support/
If there is something wrong with the file, we'll help you, if there are features ( and by features we don't mean things like creating a new social network for you that competes with facebook ) we'll most likely add that too, and usually for free! If there is anything we can do to help, we will, plus, you got a mobile app like interface template for 10$. A 5 star rating will not hurt you, and it will only take a minute to give, but it will help us more than you can imagine! So thnak you in advance for your purchase and your rating!
Let us know if we can help you at http://enableds.com/html-support/