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

Typography plugin takes care of a wide range of properties that make effective and responsive typography possible. It thus give you access to some unique font families courtesy of Google font. Its application to some css plugins is diverse such as changing the text orientation, applying styles, effects, colors e.t.c.

The plugin is packed with lots of functionality that cushion a well refined responsive typography and with some typo-related effects such as drop caps, styled quotation and many more possible tweaks.

Unit of measurement

Choosing the right units for typography is the basic foundation for a good responsive web design. G16framework adopts rem throughout the development as the base unit of measurement to help resolve intricate issue such as nesting. Nesting could be a gordian knot when a sibling properties is altered as opposed to the defined value set by the immediate parent element.

Rem as unit of measurement

This is one of the newest units introduced in CSS3 a root em . It possesses the same features as the units introduced in CSS2.1 but instead of being relative to the font-size value of the current element -em-, it is relative to the font-size value of the document root itself .

 
            /*--Root level declaration--*/
            html {
            font-size: 16px; /*--Base Default Size--*/
            }
            body {
            font-size: 1rem; /*--16px ~ 1rem ~ 100% declaration--*/
            }                
            

Unit Behaviour

Behaviour of units may be affected by inheritance depending on the route of call, either from the root element or parent element, and whether or not it's nested. These underlying factors relatively determine general typography presentation and appearance.

 
                    <!--HTML TAG-->
                    <div class="unit">
	                    <h3>Unit</h3>
	                    <p>
	                     Typography unit
	                    </p>
                    </div>
                   <style">
                     /*--CSS CODE--*/
                    .unit{
                       font-size:2rem; /*--2 x 16 (32px)--*/
                          }
                         h3{
                       font-size:3rem; /*--3 x 16 (48px)--*/
                          }
                         p{
                       font-size:1rem; /*--1 x 16 (16px)--*/
                          }
                   </style">
                    

The below code snippets show 2 different sibling elements h3 and p whose values are 48px and 16px respectively, their respective values are computed relatively to the root value set in html as opposed the one set by the parent class unit.

Why rem

  •   It conforms to the root layer structure of font-size and never alter the presentation of the typography.
  •   The value of any nested element is always relative to the root
  •   It retains the same value regardless the set value of inheritance

Typeface

There are two different categories of typeface group cited in this framework, the font-stack (the combination of web safe fonts) and the google-fonts.

The websafe and gfont typeface are collectively packed together inside the css framework and may be called to action using inline class declaration as shown below. It may be declared anywhere within html document and assign to any kind of html elements such as body, headings, article, div, figure, paragraph, anchor, span and so on.

A fallback mechanism is initiated in each of the group in the event of not having such font family installed on your computer.

web fonts

The web safe fonts originally found on your computer or desktop and are compiled in a such a way that, they are stacked together and grouped into 6 different categories. Class is identified by webfont-fontname.

Stack class Definition
webfont-franklins Franklin Gothic Medium, Arial Narrow, Arial, sans-serif
webfont-arials Arial, Helvetica, Sans-serif
webfont-gillsans Gill Sans MT, Calibri, Trebuchet MS, sans-serif sans-serif
webfont-trebuchets Trebuchet MS, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif
webfont-segoes Segoe UI, Tahoma, Geneva, Verdana, sans-serif
webfont-gillsans Verdana, Geneva, Tahoma, sans-serif, Lucida Sans, Arial, sans-serif
Web font classes

Google fonts

This class used Google font family and are packed together in the typography plugin without prior installation. Setting up custom fonts other than the web safe fonts is a breeze, you do not need to hardcode anything, all you need is call the gfont class and assign it to any target html element class attribute.

1. Abelfont

Class identifier gfont-abel

 
                        <div class="gfont-abel">
                        <h1>Abel font</h1>
                        </div>
                    

2. Alexbrush font

Class identifier gfont-alexbrush

 
                        <div class="gfont-alexbrush">
                        <h1>Alexbrush font</h1>
                        </div>
                    

3. Anton font

Class identifier gfont-anton

 
                        <div class="gfont-anton">
                        <h1>Anton font</h1>
                        </div>
                    

4. Arvo font

Class identifier gfont-arvo

 
                        <div class="gfont-arvo">
                        <h1>Arvo font</h1>
                        </div>
                    

5. Badscript font

Class identifier gfont-crazyscript

 
                        <div class="gfont-crazyscript">
                        <h1>Crazyscript font</h1>
                        </div>
                    

6. Caveat font

Class identifier gfont-caveat

 
                        <div class="gfont-caveat">
                        <h1>Caveat font</h1>
                        </div>
                    

7. chivo font

Class identifier gfont-chivo

 
                        <div class="gfont-chivo">
                        <h1>Chivo font</h1>
                        </div>
                    

8. greatvibes font

Class identifier gfont-greatvibes

 
                        <div class="gfont-greatvibes">
                        <h1>Greatvibes font</h1>
                        </div>
                    

9. handlee font

Class identifier gfont-handlee

 
                        <div class="gfont-handlee">
                        <h1>Handlee font</h1>
                        </div>
                    

10. josefinslab font

Class identifier gfont-josefinslab

 
                        <div class="gfont-josefinslab">
                        <h1>Josefinslab font</h1>
                        </div>
                    

11. juliussansone font

Class identifier gfont-juliussansone

 
                        <div class="gfont-juliussansone">
                        <h1>Juliussansone font</h1>
                        </div>
                    

12.khand font

Class identifier gfont-khand

 
                        <div class="gfont-khand">
                        <h1>Khand font</h1>
                        </div>
                    

13. lato font

Class identifier gfont-lato

 
                        <div class="gfont-lato">
                        <h1>Lato font</h1>
                        </div>
                    

14.montserrat font

Class identifier gfont-montserrat

 
                        <div class="gfont-montserrat">
                        <h1>Montserrat font</h1>
                        </div>
                    

15.niconne font

Class identifier gfont-niconne

 
                        <div class="gfont-niconne">
                        <h1>Niconne font</h1>
                        </div>
                    

16.notosans font

Class identifier gfont-notosans

 
                        <div class="gfont-notosans">
                        <h1>Notosans font</h1>
                        </div>
                    

17.oswald font

Class identifier gfont-oswald

 
                        <div class="gfont-oswald">
                        <h1>Oswald font</h1>
                        </div>
                    

18.paytoneone font

Class identifier gfont-paytoneone

 
                        <div class="gfont-paytoneone">
                        <h1>Paytoneone font</h1>
                        </div>
                    

19.poiretone font

Class identifier gfont-poiretone

 
                        <div class="gfont-poiretone">
                        <h1>Poiretone font</h1>
                        </div>
                    

20.quicksand font

Class identifier gfont-quicksand

 
                        <div class="gfont-quicksand">
                        <h1>Quicksand font</h1>
                        </div>
                    

21.righteous font

Class identifier gfont-righteous

 
                        <div class="gfont-righteous">
                        <h1>Righteous font</h1>
                        </div>
                    

22.tangerine font

Class identifier gfont-tangerine

 
                        <div class="gfont-tangerine">
                        <h1>Tangerine font</h1>
                        </div>
                    

23.varela font

Class identifier gfont-varela

 
                        <div class="gfont-varela">
                        <h1>varela font</h1>
                        </div>
                    

24.vollkorn font

Class identifier gfont-vollkorn

 
                        <div class="gfont-vollkorn">
                        <h1>Vollkorn font</h1>
                        </div>
                    

25.voltaire font

Class identifier gfont-voltaire

 
                        <div class="gfont-voltaire">
                        <h1>voltaire font</h1>
                        </div>
                    

Font weight

It specifies the weight of glyphs in the font, their degree of blackness or thickness in stroke.

Class Identifier
weight
.weight-100 .weight-200 .weight-300 .weight-400 .weight-500 .weight-600 .weight-700 .weight-800 .weight-900 .weight-bold .weight-bolder .weight-lighter

Preview of font weight

weight 100 is thin

weight 200 is extralight

weight 300 is light

weight 400 is normal

weight 500 is medium

weight 600 is semi-bold

weight 700 is bold and the same as bold weight

weight 800 is extrabold

weight 900 is heavy (black)

 
                       
                    

Font Styles

It allows italic or oblique faces to be selected, and may be identified using this class font-stylename

Class Identifier
style
.style-normal .style-italic .style-oblique

Italic style

Normal style

Oblique style

 
                       
                    

Font variant

It allows italic or oblique faces to be selected, and may be identified using this class font-stylename

Class Identifier
variant
.variant-inherit .variant-normal .variant-smallcaps

 
                       
                    

Text alignment

Text alignment is used to align inline content of a block horizontally and to apply this class use this syntax align-type, where type is center, left, right, or justify.

Class Identifier
align
.align-left .align-center .align-right .align-justify

center alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat cursus, pellentesque sem eget, finibus elit. Maecenas imperdiet tempus rhoncus. Nullam vitae tempus tortor, non ultricies neque. Cras non vulputate tortor. Aenean non eros iaculis, mattis ante ac, ullamcorper elit. Etiam non tincidunt sapien, ut volutpat nunc. Phasellus imperdiet ligula eu velit volutpat tristique. Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque. Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis

 
        <p class="align-center">
	        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	        Sed sed erat cursus, pellentesque sem eget, finibus elit. Maecenas imperdiet tempus rhoncus.
	        Nullam vitae tempus tortor, non ultricies neque. Cras non vulputate tortor.
	        Aenean non eros iaculis, mattis ante ac, ullamcorper elit.
	        Etiam non tincidunt sapien, ut volutpat nunc. Phasellus imperdiet ligula eu velit volutpat tristique.
	        Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque.
	        Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis
        </p>
                    

Right alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat cursus, pellentesque sem eget, finibus elit. Maecenas imperdiet tempus rhoncus. Nullam vitae tempus tortor, non ultricies neque. Cras non vulputate tortor. Aenean non eros iaculis, mattis ante ac, ullamcorper elit. Etiam non tincidunt sapien, ut volutpat nunc. Phasellus imperdiet ligula eu velit volutpat tristique. Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque. Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis

 
        <p class="align-right">
	        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	        Sed sed erat cursus, pellentesque sem eget, finibus elit. Maecenas imperdiet tempus rhoncus.
	        Nullam vitae tempus tortor, non ultricies neque. Cras non vulputate tortor.
	        Aenean non eros iaculis, mattis ante ac, ullamcorper elit.
	        Etiam non tincidunt sapien, ut volutpat nunc. Phasellus imperdiet ligula eu velit volutpat tristique.
	        Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque.
	        Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis
        </p>
                    

Justified alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed erat cursus, pellentesque sem eget, finibus elit. Maecenas imperdiet tempus rhoncus. Nullam vitae tempus tortor, non ultricies neque. Cras non vulputate tortor. Aenean non eros iaculis, mattis ante ac, ullamcorper elit. Etiam non tincidunt sapien, ut volutpat nunc. Phasellus imperdiet ligula eu velit volutpat tristique. Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque. Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis

 
        <p class="align-justify">
	        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	        Sed sed erat cursus, pellentesque sem eget, finibus elit. Maecenas imperdiet tempus rhoncus.
	        Nullam vitae tempus tortor, non ultricies neque. Cras non vulputate tortor.
	        Aenean non eros iaculis, mattis ante ac, ullamcorper elit.
	        Etiam non tincidunt sapien, ut volutpat nunc. Phasellus imperdiet ligula eu velit volutpat tristique.
	        Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque.
	        Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis
        </p> 
                    

Text transform

Text transform property controls capitalization effect of an element and is identified using this class transform-type, where type is cap, upp, and low

Class Identifier
transform
.transform-upp .transform-low .transform-cap

Capitalized

 
        <p class="transform-cap">
           Capitalized 
        </p> 
                    

Lowercase

 
        <p class="transform-low">
           Lowercase 
        </p> 
                    

Uppercase

 
        <p class="transform-upp">
           Uppercase 
        </p> 
                    

Blockquote

This is a special html block element that defines a section with an indication of an enclosed text alongside a well formed extended quotation. Blockquote can be styled with background, adding quotes before and after contents e.t.c.

Class Identifier
.blockquote

Border blockquote

Adding border style to blockquote.

The greatest achievement in life is believing in yourself & what your inner god belives in.

 
    <blockquote class="container-liquid-100 border-l-med">
        <p>
        The greatest achievement in life is believing in yourself & 
         what your <em>inner</em> <b>god</b>
        belives in.
        </p>
    </blockquote>
                    

The greatest achievement in life is believing in yourself & what your inner god belives in.

 
    <blockquote class="container-liquid-100 border-l-med border-color-redOrange color-set-smoky">
        <p>
        The greatest achievement in life is believing in yourself & 
        what your <em>inner</em> <b>god</b>
        belives in.
        </p>
    </blockquote>
                    

The greatest achievement in life is believing in yourself & what your inner god belives in.

 
    <blockquote class="container-liquid-100    border-ver-med  border-color-barossa style-italic">
        <p>
        The greatest achievement in life is believing in yourself 
        & what your <em>inner</em> <b>god</b>
        belives in.
        </p>
    </blockquote>
                    

The greatest achievement in life is believing in yourself & what your inner god belives in.

Blockquote with quote

Adding quote before and after blockquote contents.

The greatest achievement in life is believing in yourself & what your inner god belives in.

 
   <div class="blockquote border-all-sma rad-all-xsm  container-liquid-50 color-set-abbey">
    <blockquote>
        <p>
        The greatest achievement in life is believing in yourself & 
        what your <em>inner</em> <b>god</b>
        belives in.
        </p>
    </blockquote>
   </div>
                    

Color Blockquote

Beautifying block quote with background color.

The greatest achievement in life is believing in yourself & what your inner god belives in.

 
   <div class="blockquote color-set-atomicTangerine  container-liquid-50">
    <blockquote>
        <p>
        The greatest achievement in life is believing in yourself & 
        what your <em>inner</em> <b>god</b>
        belives in.
        </p>
    </blockquote>
   </div>
                    

Hovered Blockquote

Adding hover effect to blockquote content.

The greatest achievement in life is believing in yourself & what your inner god belives in.

 
   <div class="blockquote color-set-smoky hover-set-alizarinCrimson  container-liquid-70">
    <blockquote>
        <p>
        The greatest achievement in life is believing in yourself & 
        what your <em>inner</em> <b>god</b>
        belives in.
        </p>
    </blockquote>
   </div>
                    

Sizing up quotes

Blockquote contentes can be placed in fixed or liquid containers using container class.

The greatest achievement in life is believing in yourself & what your inner god belives in.

 
        <div class="blockquote container-liquid-100  border-all-sma rad-all-xxs">
        <blockquote>
	        <p>
		        The greatest achievement in life is believing in 
		        yourself & what your <em>inner</em> <b>god</b>
		        belives in.
	        </p>
        </blockquote>
        </div>
                    

Creative blockquote

The greatest obstacle in life towards attaining one's success is procrastination. Kill it and live a life of do it now.

- Simalks simalks
Founder of G16media Inc, Canada.
 
        <div class="blockquote color-set-smoky hover-set-aquaForest  container-liquid-70">
	        <blockquote>
		        <p>
			        The greatest obstacle in life towards attaining 
			        one's success is procrastination.
			        Kill it and live a life of do it now.
		        </p>
		        <cite class="size100px text-shadow-emboss">
			        - Simalks simalks<br />
			        Founder of G16media Inc, Canada.
		        </cite>
	        </blockquote>
        </div>
                    

Sample typography

creative typography

What it does

Creative typography is a great way of expressing the efficacy of all the major typo related features built into G16framework. Features such as styled insert, mark, magazine letter, text shadow, font size, responsive box layout, transformed letter set, and many more defined features that make typography an interesting thing to familiarize with.

Grid layout

Etiam non tincidunt sapien, ut volutpat nunc. Phasellus imperdiet ligula eu velit volutpat tristique. Pellentesque at eros justo. Etiam vulputate nunc eu lacus lobortis pellentesque. Cras id venenatis nunc. Fusce id leo in ex varius ultrices. In nunc libero, sagittis quis consectetur non, hendrerit eget augue.

Indefatigable spirit of productivity bring forth good seeds and the feedback to reality is meekness with success.

 
    <header class="color-set-smoky transform-upp container-basic gfont-paytoneone">
	    <h1 class="color-text-white">
		    creative typography
	    </h1>
    </header>
    <section class="container-basic color-set-wildSand row">
	    <article class="g16-c-2">
		    <h2>What it does</h2>
		    <p class="magazine">
			    Creative typography is a great way of expressing the efficacy 
			    of all the major typo related
			    features built into G16framework. 
			    Features such as styled <ins>insert</ins>, <mark>mark</mark>, 
			    magazine letter, text shadow,
			    font size, responsive box layout, transformed letter set, 
			    and many more defined features that make typography
			    an interesting thing to familiarize with.
		    </p>
	    </article>
	    <article class="g16-c-2">
		    <h2>Grid layout</h2>
		    <p>
			    Etiam non tincidunt sapien, ut volutpat nunc.
			    Phasellus imperdiet ligula eu velit volutpat tristique.
			    Pellentesque at eros justo. Etiam vulputate nunc eu lacus 
			    lobortis pellentesque. Cras id venenatis nunc.
			    Fusce id leo in ex varius ultrices. In nunc libero, 
			    sagittis quis consectetur non, hendrerit eget augue.
		    </p>
	    </article>
    </section>
    <section class="container-basic color-set-silver">
	    <div class="blockquote container-liquid-100 ">
		    <blockquote>
			    <p>
				    Indefatigable spirit of productivity bring 
                   forth good seeds and the
				    feedback to reality is meekness with success.
			    </p>
		    </blockquote>
	    </div>
    </section>
                    

Sample with fonts

You can get creative with typography in diverse ways such as adding gradient clip, text shadow, transformation and all lot of fanstastic features to play wiith.

I am beautiful

One more time to go

The end is near

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.