Responsive web Framework

DOCUMENTATION

Organization and notation

The files are classified according to their purpose under an established notation

NOT AVAILABLE FOR TINY SCREENS

(minimum width: 480px)

Class organization

Unlike other systems that in a single css file store all the functionalities and characteristics to be applied, many of them intertwined with each other; I have focused on grouping the characteristics into three files, each with different purpose.

layout image
layout
They are the ones in charge of the distribution of the contents or visual structuring.
typo image
typo
Font, dimensions, transformations, spacing.
effects image
effects
Colors, borders, transparencies.

There is a fourth css file that contains specific formats, being siteup.css for the admin control panel or custom.css for the home page.

These files are in the css / subdirectory and can be used independent for use of responsive design.

Notation

The following notation for classes has been established

type - dimension modifier - auxiliary
type
Color, border, transparency.
dimension
Option; used to restrict modifier to certain size..
modifier
Optional; the way it is affected.
auxiliary
Optional; subclass of modifier.

Then, the followin options are valid ones:

.col
Column define.
.text-mleft
Text alignament to left, available for medium and bigger sizes.
.table-list
Table used for listings.

External libraries

Inside the subdirectory lib/ are external libraries as:

normalize.css
Used for old browsers