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

List is an essential components used in listing items such as contents, image, combination of images and content. This task may be displayed either in single line, double line, as checked mark, use of avatar and icon.

Plugin Class

List classes Definition
Ready to use list classes.
list-content List and display contents without image
list-avatar List and display both the image and contents

List - Basic

List component comes with border by default, however, the border property may be eliminated completely by assigning an extended utility class no-border.

  • Williams Brown
  • Kelvin Drake
  • Johnson Crawford
  • Tanya Robins
 
    <ul class="list-content no-border">
	    <li><span>Williams Brown </span></li>
	    <li><span>Kelvin Drake </span></li>
	    <li><span>Johnson Crawford </span></li>
	    <li><span>Tanya Robins </span></li>
    </ul>

List - Border

You can append border to the parent container with border class.

  • Williams Brown
  • Kelvin Drake
  • Johnson Crawford
  • Tanya Robins
 
        <ul class="list-content border-all-xxs">
	        <li><span>Williams Brown </span></li>
	        <li><span>Kelvin Drake </span></li>
	        <li><span>Johnson Crawford </span></li>
	        <li><span>Tanya Robins </span></li>
        </ul>
 

There are various border options that may be applied, such as intensifying the border width.

  • Williams Brown
  • Kelvin Drake
  • Johnson Crawford
  • Tanya Robins
 
        <ul class="list-content border-all-xxs">
	        <li><span>Williams Brown </span></li>
	        <li><span>Kelvin Drake </span></li>
	        <li><span>Johnson Crawford </span></li>
	        <li><span>Tanya Robins </span></li>
        </ul>
 

Change the embedding border color.

  • Williams Brown
  • Kelvin Drake
  • Johnson Crawford
  • Tanya Robins
 
        <ul class="list-content border-all-med border-color-redOrange">
	        <li><span>Williams Brown </span></li>
	        <li><span>Kelvin Drake </span></li>
	        <li><span>Johnson Crawford </span></li>
	        <li><span>Tanya Robins </span></li>
        </ul>
 

List - Icon

You can append relevant icon to the span element immediately before the listed content with icon class.

  •  Amazon
  •  Behance
  •  Flight
  •  Flickr
 
    <ul class="list-content">
        <li class=""><span class="icon icon-amazon"></span> <span>Amazon</span></li>
	    <li class=""><span class="icon icon-behance"></span> <span>Behance</span></li>
	    <li class=""><span class="icon icon-airplane"></span> <span>Flight  </span></li>
	    <li class=""><span class="icon icon-flickr"></span> <span>Flickr </span></li>
   </ul>

Vary the color of the added icon with the inclusion of color class.

  •  Amazon
  •  Behance
  •  Googleplus
  •  Flickr
 
    <ul class="list-content">
        <li class=""><span class="icon icon-amazon color-text-redOrange">
                </span> <span>Amazon</span></li>
	    <li class=""><span class="icon icon-behance color-text-blueWhale">
                </span> <span>Behance</span></li>
	    <li class=""><span class="icon icon-google-plus color-text-red">
                </span> <span>Googleplus  </span></li>
	    <li class=""><span class="icon icon-flickr color-text-bahamaBlue">
                </span> <span>Flickr </span></li>
   </ul>

List - Card

List can be displayed in form of a card with the implementation of box shadow and radius class. In this case, box-shadow-card class is used, there are lot more of box shadow options.

  • Williams Brown
  • Kelvin Drake
  • Johnson Crawford
  • Tanya Robins
 
        <ul class="list-content box-shadow-card rad-all-xsm">
	        <li><span>Williams Brown </span></li>
	        <li><span>Kelvin Drake </span></li>
	        <li><span>Johnson Crawford </span></li>
	        <li><span>Tanya Robins </span></li>
        </ul>

List - Color

Listed items color can be changed to any color with color class color-set-#colorname including the foreground and background.

Color: color-set-aquadeep

  • Williams Brown
  • Kelvin Drake
  • Johnson Crawford
  • Tanya Robins

Color: color-set-blueWhale

  • Williams Brown
  • Kelvin Drake
  • Johnson Crawford
  • Tanya Robins
 
        <ul class="list-content color-set-aquadeep">
	        <li><span>Williams Brown </span></li>
	        <li><span>Kelvin Drake </span></li>
	        <li><span>Johnson Crawford </span></li>
	        <li><span>Tanya Robins </span></li>
        </ul>

List - Hover state

Listed item can have hover effect using pseudo hover state.

  • Williams Brown
  • Kelvin Drake
  • Johnson Crawford
  • Tanya Robins
 
        <ul class="list-content color-set-wildSand">
            <li class="hover-set-alizarinCrimson"><span>Williams Brown </span></li>
            <li class="hover-set-jagua"><span>Kelvin Drake </span></li>
            <li class="hover-set-yellowMetal"><span>Johnson Crawford </span></li>
            <li class="hover-set-green"><span>Tanya Robins </span></li>
        </ul>

List - Cancel Action

You can create action event on the listed item by setting the parent element wrapping the content to display ="none", with a very simple onlick event action.

  • Williams Brown
  • Kelvin Drake
  • Johnson Crawford
  • Tanya Robins
 
        <ul class="list-content color-set-wildSand">
	        <li>
		        <span>Williams Brown </span>
		        <span onclick="this.parentElement.style.display='none'" 
                     class="closebtn right "></span>
	        </li>
	        <li>
		        <span>Kelvin Drake </span>
		        <span onclick="this.parentElement.style.display='none'" 
                     class="closebtn right"></span>
	        </li>
	        <li>
		        <span>Johnson Crawford </span>
		        <span onclick="this.parentElement.style.display='none'" 
                     class="closebtn right"></span>
	        </li>
	        <li>
		        <span>Tanya Robins </span>
		        <span onclick="this.parentElement.style.display='none'" 
                     class="closebtn right"></span>
	        </li>
        </ul>

List - Avatar

This class list item with image or avatar and contents to display information, the default image size used is 50px.

The size of the image can be changed, however, the corresponding content line-height immediately after the image must be adjusted to the same height value assigned to image in order to vertically centered the embedding contents.

 
        .list-avatar li span:last-of-type {
          /*-- Line height of the content--*/
                 line-height:50px;
        }
        .list-avatar li span img { 
                 width:50px; 
                 height:50px;                                  
        }
  • list item Williams Brown
 
        <ul class="list-avatar color-set-wildSand">
            <li class="hover-set-alizarinCrimson">
                <span class="left">
                    <img src="../images/portfolio/logo/britappliabces-34.png" class="circle" />
                </span>
                <span>Williams Brown </span>
            </li>      
        </ul>

List - Table replica

Items can be listed as though it were arrayed with table element.

Style One
 
        <ul class="list-content color-set-white box-shadow-floated">
    	    <li><a href="#"><span class="left">Grids</span><span class="right">120</span></a></li>
	        <li><a href="#"><span class="left">List</span><span class="right">10</span></a></li>
	        <li><a href="#"><span class="left">Gallery</span><span class="right">20</span></a></li>
	        <li><a href="#"><span class="left">Buttons</span><span class="right">80</span></a></li>
	        <li><a href="#"><span class="left">Slideshow</span><span class="right">60</span></a></li>
        </ul>
Style two
 
        <ul class="list-content color-set-alto">
	        <li class="color-set-alizarinCrimson transform-upp"><h2>g16framework</h2></li>
	        <li><a href="#"><span class="left">Grids</span><span class="right">120</span></a></li>
	        <li><a href="#"><span class="left">List</span><span class="right">10</span></a></li>
	        <li><a href="#"><span class="left">Gallery</span><span class="right">20</span></a></li>
	        <li><a href="#"><span class="left">Buttons</span><span class="right">80</span></a></li>
	        <li><a href="#"><span class="left">Slideshow</span><span class="right">60</span></a></li>
        </ul>

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.