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.

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 .

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.

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.

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.

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 Identifiertransform.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.

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.