Default grid system 24 fluid columns with a responsive twist

2
2
2
2
2
2
2
2
2
2
2
2
8
8
8
12
12
6
6
6
6
6
8
5
5
24

The default grid system provided in CMS pro! utilizes 24 fluid columns that render out at any widths. Below 767px viewports, the columns stack vertically.

  1. <div class="row">  
  2.   <div class="col grid_8">...</div>  
  3.   <div class="col grid_16">...</div>  
  4. </div>  

As shown here, a basic layout can be created with two "columns", each spanning a number of the 24 foundational columns we defined as part of our grid system.

Lists

Unordered Bullets

<ul class="bullets">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unordered Checks

<ul class="check">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Unordered Stars

<ul class="star">

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

<ol class="numbers">

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Labels

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Label Code

  1. <span class="label label-ok">your text</span>  
  2. <span class="label label-info">your text</span>  
  3. <span class="label label-alert">your text</span>  
  4. <span class="label label-error">your text</span>  

Progress Bars

Progress Bars Code

  1. <div class="progress-bar blue">      
  2.   <div style="width:20%"></div>      
  3. </div>     
  4. <div class="progress-bar yellow">      
  5.   <div style="width:40%"></div>      
  6. </div>     
  7. <div class="progress-bar green">      
  8.   <div style="width:60%"></div>      
  9. </div>     
  10. <div class="progress-bar red">      
  11.   <div style="width:80%"></div>      
  12. </div>  

Togglable Tabs

Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.
Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.
Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.

Togglable Tabs Code

  1. <ul class="tabs">  
  2.   <li><a data-title="tab1" href="#">Tab 1</a></li>  
  3.   <li><a data-title="tab2" href="#">Tab 2</a></li>  
  4.   <li><a data-title="tab3" href="#">Tab 3</a></li>  
  5. </ul>  
  6. <div class="tab-content clearfix">  
  7.   <div id="tab1"> Tab 1 content... </div>  
  8.   <div id="tab2"> Tab 2 content... </div>  
  9.   <div id="tab3"> Tab 3 content... </div>  
  10. </div>  

Accordion

Our Clients

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

Our Mission

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

Our Company

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.

Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.

Accordion Code

  1. <div class="accordion clearfix">  
  2.   <div class="accowrap">  
  3.     <h4>Our Clients<span class="chevron"></span></h4>  
  4.     <div class="acco-content">  
  5.       <p>Aliquam volutpat arcu ....</p>  
  6.     </div>  
  7.   </div>  
  8.   <div class="accowrap">  
  9.     <h4>Our Mission<span class="chevron"></span></h4>  
  10.     <div class="acco-content">  
  11.       <p>Aliquam volutpat arcu ...</p>  
  12.     </div>  
  13.   </div>  
  14.   <div class="accowrap">  
  15.     <h4>Our Company<span class="chevron"></span></h4>  
  16.     <div class="acco-content">  
  17.       <p>Aliquam volutpat arcu ...</p>  
  18.     </div>  
  19.   </div>  
  20. </div>  

Carousel

Your title goes here

  • Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
  • Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
  • Labore indoctum ullamcorper et his. volumus corpora verterem cum in, has in maiorum repudiare disputationi. Sed electram aliquando disputando ad.Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.

Carousel Code

  1. <div class="carousel clearfix">  
  2.   <ul class="slides">  
  3.     <li>Labore....</li>  
  4.     <li>Labore....</li>  
  5.     <li>Labore....</li>  
  6.     ...  
  7.   </ul>  
  8. </div>  

Message Boxes

Success!Eum ad enim laoreet graecis, ad vel sumo justo doming.
Alert!Eum ad enim laoreet graecis, ad vel sumo justo doming.
Info!Eum ad enim laoreet graecis, ad vel sumo justo doming.
Error!Eum ad enim laoreet graecis, ad vel sumo justo doming.

Message Boxes Code

  1. <div class="msgOk"> <span>Success!</span>Your content ...</div>  
  2. <div class="msgAlert"> <span>Alert!</span>Your content ...</div>  
  3. <div class="msgInfo"> <span>Info!</span>Your content ...</div>  
  4. <div class="msgError"> <span>Error!</span>Your content ...</div>  

Responsive Tables

# Sonet dus Eirmod an
1 Te natum eruditi Ex of modus pri
2 Te natum eruditi Ex of modus pri
3 Te natum eruditi Ex of modus pri
4 Te natum eruditi Ex of modus pri
5 Te natum eruditi Ex of modus pri

Responsive Tables Code

  1. <table class="datatable">    
  2.   <thead>    
  3.     <tr>    
  4.       <th>Sonet dus</th>    
  5.     </tr>    
  6.   </thead>    
  7.   <tbody>    
  8.     <tr>    
  9.       <td>Ex of modus pri</td>    
  10.     </tr>    
  11.     <tr>    
  12.       <td>Ex of modus pri</td>    
  13.     </tr>    
  14.   </tbody>    
  15. </table>    

Buttons

Normal Button Red Button Blue Button

Green Button Yellow Button Orange Button

Buttons Code

  1. <a href="#" class="button">Normal Button</a>  
  2. <a href="#" class="button butred">Red Button</a>  
  3. <a href="#" class="button butblue">Blue Button</a>  
  4. <a href="#" class="button butgreen">Green Button</a>  
  5. <a href="#" class="button butyellow">Yellow Button</a>  
  6. <a href="#" class="button butorange">Orange Button</a>  

Boxes

<div class="box"> ... </div> Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
<div class="box bluebox"> ... </div> Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
<div class="box redbox"> ... </div> Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
<div class="box greenbox"> ... </div> Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.
<div class="box whitebox"> ... </div> Autem comprehensam et duo. Sed et dicunt commodo qualisque. Ut vix eius iudico.

Image Lightbox

Video Lightbox

Image/Video Lightbox Code

  1. Image  
  2. <a href="images/pages/demo5.jpg" class="fancybox zoom">  
  3.   <img src="images/pages/thumb_demo5.jpg" />  
  4. </a>   
  5. Video  
  6. <a href="http://vimeo.com/29193046" data-media="media" class="video zoom">  
  7.   <img src="images/pages/thumb_demo6.jpg" />  
  8. </a>