CSS Plugins

Lightweight, simple, smart and well structured modular system built upon 16 scalable grids system that generates smooth and itch-free responsive layouts. It contains over 2000 inline plugin classes that can be used to create a fully responsive website with ease.

start coding

Definition

Cards are sheet or container with subtle rounded edge embelished with feather like shadow across its four edges to distinguish it from the square shaped tile whose corners are flat but not rounded.

Information on card may contain action-button , image, or combination of image and contents, or image and buttons.

Information supply to this component must be brief, simple, and logical. You should shun from flooding the sheet with excessive or bogus contents, doing this would becloud understanding of interested users and distract them from tapping into the intended message.

Cards give you convenient and consistent way of displaying related contents. It does always have constant width and a variable height that can expand temporarily depending on the space available.

Plugin Class

Classes Definition
card-image container holding only image
card-content responsible for visual design holding content block
card-imageCaption style responsible for combination of image and content block

Structure

card plugin

Suggested layout design for card component.

card plugin

Set up

In order to have a very great looking and responsive card design, the below html tag structure should be considered as a guide template. The card size is determined using the object size class (a utility class used to style a container dimension).

General Card Template

  
    <section class="card-#group cardsize">
	    <header>
	       ... image here
	    </header>
	    <article>
	       ... content here
	    </article>
	    <footer >
	      ... control button here
	    </footer>
    </section>

Card - Image

This card design option require only image to be displayed in form of card, you only require one specific region as a wrapper to wrap the image.

card plugin

Code - card image

  
           <section class="card-image size400px ">
	        <header>
		        <img src="../images/portfolio/logo/britappliabces-34.png" />
	        </header>
           </section>

Card - Image and Button

This option adopts the card-imageCaption to create image and action button. Excessive contents is not allowed with this type of card.

  
        <div class="card-imageCaption size400px">
	        <header>
		        <img src="../images/portfolio/brochure_zfold.jpg" title="" alt="" />
	        </header>
	        <footer class="color-set-white">
	            <a href="" class="button no-decoration no-border">Learn more</a> 
	        </footer>
        </div> 
    
  
        <div class="card-imageCaption size400px">
	        <header>
		        <img src="../images/portfolio/infography_whatever_it_takes.png" title="" alt="" />
	        </header>
	        <footer class="color-set-white">
	           <p class="align-right">
		           <a href="" class="button  border-all-xxs">Detail</a>
		           <a href="" class="button  border-all-xxs">Share</a>
	           </p>
	        </footer>
        </div>
        

Card - Content

This option used card-content class with an exemption of image to display contents as a card.

Heading

Beatiful view with a captivating ripples edges that span across the cross-section of the rockies.Aliquam erat volutpat. Pellentesque velit erat, lobortis a tellus vel

  
        <section class="card-content size400px">
	        <header class="color-set-silver height-200">
            </header>
	        <article>
		        <h3>Heading</h3>
		        <p>
			        Beatiful view with a captivating ripples edges that 
                    span across the cross-section
			        of the rockies.
		        </p>
	        </article>
	        <footer class="color-set-smoky">
	        <a href="#" class="button color-text-white">Learn more</a> 
	        </footer>
        </section>
        

Card - Content Two

This option used card-content class with an exemption of image to display contents as a card.

Heading

Beatiful view with a captivating ripple edges that span across the cross-section of the rockies.Aliquam erat volutpat. Pellentesque velit erat, lobortis a tellus vel

  
        <section class="card-content size400px">
	        <header class="color-set-silver">
		        <h3 class="color-text-white">Heading</h3>
	        </header>
	        <article class="color-set-blueWhale">                
		        <p>
			        Beatiful view with a captivating ripples edges that span across the cross-section
			        of the rockies.Aliquam erat volutpat. Pellentesque velit erat, lobortis a tellus vel
		        </p>   
	        </article>
	        <footer class="color-set-wildSand group">
		        <span class="left">
		            <a href="#" class="button color-text-smoky">Infography</a> 
		        </span>
		        <span class="right">
		            <button type="button" class="button btnRipple icon icon-share2 
		            circle color-set-redOrange"></button> 
		        </span>
	        </footer>
        </section> 
        

Card - image with content

This option used card-imageCaption class with flowing action button, also known as (FAB) to display contents as a card.

card plugin

follow this

Heading Sub-heading

Beatiful view with a captivating ripples edges that span across the cross-section of the rockies.Aliquam erat volutpat. Pellentesque velit erat, lobortis a tellus vel

code

  
        <div class="card-imageCaption size400px ">
	        <header>  
		        <img src="../images/portfolio/logo_viviandesign.png" title="" alt="" />
	        </header>
	        <article>
		        <p class="align-right">
			        <a href="#" class="button color-set-cinnabar">follow this</a>
		        </p>
		        <h3 class="color-text-silver">Heading 
		           <span class="block xsmall">Sub-heading</span>
		        </h3>	   
		        <p>
			        Beatiful view with a captivating ripples edges that 
			        span across the cross-section. 
			        Pellentesque velit erat, lobortis a tellus vel
		        </p>	   
	        </article>
        </div>          
        

Card - (twitter style)

This option used card-imageCaption class with flowing action button in form of image, also known as (FAB) to display contents as a card, a case study of twitter.

card plugin

twitter style

follow this

Heading Sub-heading

The mindset to be the best is enabled with ones curiosity and arouse with fervent persistence unalloyed.

code

  
        <div class="card-imageCaption size400px height-450 relative fab">
        <!-- Header section holding image -->
        <header class="">                    
	        <img src="../theme/placeholders/newentry/card-sample.png" />
        </header>
        <article>
        <!-- Floated micro image like FAB -->
	        <p>
	        <!-- Ref class: imagesize, shape, card extension (fab )-->
	        <img src="../theme/placeholders/newentry/cardimage.jpg" 
		        class="image100 rounded fab" 
			        alt="twitter style" title="twiter card style" />
	        </p>
	        <p class="align-right">
		        <a href="#" class="button color-set-cinnabar">follow this</a>
	        </p>
	        <h3 class="color-text-silver">Heading 
	        <span class="block xsmall">Sub-heading</span>
	        </h3>
	        <p>
		        The mindset to be the best is enabled with 
		        ones curiosity and arouse with fervent
		        persistence unalloyed.
	        </p>
        </article>
        </div>
        

Tile

A tile like card containing two layer folds; header and article section holding image and contents respectively.

 
            <section class="card-tile size400px">
                <header class="color-set-smoky  height-200"></header>
                <article class="color-set-white">
	                <h5>Tile</h5>
	                <h3>Tile with typo hierarchy</h3>
	                <p>
		                <a href="#" class="color-text-smoky">
			                The greatest gift to humanity is given unconditional 
			                freedom with love for all.
		                </a>
	                </p>
                </article>
            </section>

Style Two

Tile showing content with typography hierarchy.

card plugin
 
    <section class="card-tile size400px">
        <header">
          <img src="../theme/placeholders/newentry/card-sample.png" />
        </header>
        <article class="color-set-wildSand">
	        <h4 class="text-underline">Tile two</h4>
	        <h2>
		        <a href="#" class="color-text-smoky">
    			      Minimalistic
		        </a>
	        </h2>
        </article>
    </section>

Style Three

tile
 
        <section class="card-tile size400px">
	        <header>
		        <img src="../theme/placeholders/newentry/card-sample.png" 
		        alt="tile" title="tile" />
	        </header>
	        <article class="color-set-wildSand">
		        <h5 class="color-text-smoky">Small Title</h5>
		        <h2>
			        <a href="#" class="color-text-smoky">
			           Minimalistic content
			        </a>
		        </h2>
	        </article>
	        <footer class="color-set-blueWhale">
		        <a href="#link" class="color-text-white">
			        <span class="icon icon-airplane"></span>
			        <span>Flight Information</span>
		        </a>
	        </footer>
        </section>  

Style four

A complex tile design style with contents and grids block with a subtle dropdown menu that reveal when toggled.

Weather Forecast

 
        <section class="card-tile  size400px">
    <header class="color-set-burningOrange group padding-all-sma">
	    <h4 class="right">Weather Forecast</h4>
	    <div class="left">
		    <!-- The navigation module -->
		    <div class="nav-toggle">
			    <!-- Visible on smaller screen device -->
			    <input id="mobile-8" type="checkbox" hidden="hidden" />
			    <label for="mobile-8">
				    <span class="color-text-jagua medium hover-text-white">⋮</span></label>
			    <!-- The navigation container -->
			    <nav>
				    <ul class="color-set-cinnabar size250px">
				    <li><a href="#" class="color-text-white">Daily Update</a></li>
				    <li><a href="#" class="color-text-white">Weekly Update</a></li>
				    <li><a href=""class="color-text-white">All Weather</a></li>
				    </ul>
			    </nav>
		    </div>
	    </div>
    </header>
    <article class="color-set-wildSand padding-all-sma">
	    <p>
		    <a href="#" class="color-text-smoky">
			    The greatest gift to humanity is given unconditional freedom with
			    love for all. No string attached, unconstrained
			    conditions and life long continuity.
				
		    </a>
	    </p>
	    <!-- The Divider class -->
	    <div class="divider-full"></div>
	    <!-- The Grid module -->
	    <div class="group">	
		    <div class="g16-c-3 color-set-smoky">
			    <p>
			    </p>
		    </div>
		    <div class="g16-c-3 color-set-smoky">
			    <p>
			    </p>
		    </div>
		    <div class="g16-c-3 color-set-smoky">
			    <p>
			    </p>
		    </div>
	    </div>
    </article>
    </section>

Browser Supports

Code Editor - Customizes CSS plugin with ease

G16framework code it yourself is a handy tool for any code enthusiast who love to establish and extend the style rules already applied to the plugin.

Important: To override a new defined style rule on the existing target plugin, you must implement / inject a keyword (!important) immediately after a new value is being set.

Newly design will be released soon!.

The view only show very small proportion of the original size, copy the code and view in a larger screen.