       		
       		Español
        
Index·
Reference·
Contribute·
Contact
Reduces time web layout code

        Code open source for web page layout,

        flexibly and quickly, based on standard CSS.

Installation Layout Examples Colors

References preset with Makercss

Many of the references are pre-defined, as the examples 1 to 8:

Example 01: Setting the body

<body class="A s13 c666 tc">

References "T" "A" "C" "GG" "V" "GV" "TT"
References to typefaces such as "A" family Arial.

Reference "s" + number of 7 to 20, or 20 to 200, 10 to 10
Font size, eg "s14" size 14 pixels.

Reference "c" + preset numbers
See preset colors, such as "c16".

Referencia "tl" "tc" "tr"
Text aligned right at the center, or right respectively; example "tc".

Example 02: Values of texts

<div class="lh120"></div>
<div class="b"></div>
<div class="i"></div>
<div class="n"></div>
<div class="u"></div>

Reference "lh" + number from 80 to 200, 10 to 10
Spacing of 80% to 200% from 10 to 10, eg "lh120"

Reference "b" bold

Reference "i" italics

Reference "n" normal

Reference "u" underline

Example 03: Example of construction

<div class="ma w900">
    <div class="ma w700"></div>
    <div class="ma w500 h300"></div>
</div>

Reference "ma"
Building Reference (on coat, automatic left and right margins, center the horizontal layer in the browser), eg "ma".

Reference "w" + number of 10px to 1000px of 10px in 10px
Width of coating, such as "w320".

Reference "h" + number of 10px to 1000px of 10px in 10px
Width of coating, such as "w320".

If you want an elastic layer with variable height should not put any value in height.

Example 04: Internal layers

<div class="r ww"></div>
<div class="rl"></div>
<div class="roc"></div>

Reference "r" relative
Layer relative; example "r".

Referencia "rl" relativa flota a la izquierda
Layer relative and float left; example "rl".

Referencia "rr" relativa flota a la derecha
Layer relative and float right; example "rr".

Reference "ww" width 100%
Depending where you are adapting a different value if it has a layer that contains "ww" is worth the width of the browser, if it were contained within a layer of 300px, then the value of "ww" = 300px.

Ejemplo 05: Margin and padding layer

<div class="ml20 mt30 p5"></div>
<div class="pl20 pb40"></div>

References "mt" "mr" "mb" "ml" + values of 10px to 100px by 10px in 10px
Margin top, margin right, down, left layer respectively; "example mt50".

References"pt" "pr" "pb" "pl" + values of 5px to 50px by 5px in 5px
Padding, right, down, left layer respectively; "ejemplo pl90".

References "p"+ values of 5px to 50px by 5px in 5px
Padding, right, down, left layer; "ejemplo p35".

Consider that the inner margins added, for example in a layer of 100px by 200px and inner margins pt20, pr10, pb30, pl40 will result of 150px (100 +10 +40) by 250px (200 +20 +30) .

Example 06: Layers absolute internal

<div class="ab l45 t20 w500 z2"></div>

Reference "ab" absolute
The layer is complete, and contain a pair of coordinates x and y width and height; example "ab".

Reference "l" + 1000px values of 10px to 10px in 10px
Left position 10 to 1000 from 10 in 10; example "l40".

Reference "t"+ 1000px values of 10px to 10px in 10px
Top position 10 to 1000 from 10 in 10; example, "T70".

Reference "z" + values from 0 to 5
Position layers of 0 to 5, eg "z4".

Example 07: preset background colors

<div class="bcF00"></div>

Reference "bc" + 0 or 3 or 6 or 9 or C or F
6 colors, such as "BC9".

Example 08: Border Radio

<div class="br9"></div>

Reference "br" + number of 5px to 30px of 5 in 5
Edge radius of 5px to 30px of 5 in 5, only works in Explorer 8 +, Firefox, Safari and Chrome; Example "br25".

References configurable in the CSS Makercss

References are not predefined are examples of 9 to 14:

Example 09: Single link

<a href="#" class="l1"></a>

Open file link.css

a.l1 { 
    color: #1C9EBE; 
    text-decoration: none;
    }
a.l1:hover { 
    color: #999999; 
    text-decoration: underline;
    }

Example 10: Link menu

<a href="#" class="m1"></a>

Open file link.css

a.m1 {
    text-decoration: none;
    float: left;
    display: block;
    width: 30px;
    height: 60px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
    color: #000;
    background:url(bg1.jpg) repeat-x bottom;
    }
a.m1:hover {
    text-decoration: none;
    background: url(bg2.jpg) repeat-x bottom;
    }

Example 11: Lists

<ul class="ul1"> 
    <li>Item 1</li>  
</ul>

Open file list.css

li.li1 { 
    list-style-image: url(list.jpg); 
    line-height:140%;
    }

Example 12: Background

<div class="b1"></div>

Open file background.css

.b1 { 
    background: #FFF url(a1.jpg) left top repeat-x; 
    }

Example 13: Border

<div class="bo1"></div>

Open file border.css

.bo1 { 
    border:solid 1px #EEE; 
    }

Example 14: Form

<input type="text" name="nombre" class="fi1"/>
<textarea name="textarea" class="ft1"></textarea>
<input type="submit" value="Enviar" class="fs1" >

Open file form.css

input.fi1 {
    display: block; 
    width: 400px;
    height:40px;
    padding: 5px;
    font: normal 20px Verdana, sans-serif;
    border: #EEE solid 1px;
    }
textarea.ft1 {
    display: block; 
    width: 320px;
    height:100px;
    padding: 5px;
    font: normal 20px Verdana, sans-serif;
    border: #EEE solid 1px;
    }
input.fs1 {
    display: block;
    cursor:pointer; 
    width: 80px;
    height:30px;
    padding: 4px;
    font: normal 15px Verdana, sans-serif;
    border: #AAA solid 1px;
    background-color:#666666;
    background: #FFF url(b1.jpg) left top repeat-x;
    }

Example 14: Tables

<table class="ta1"></table>

Open file table.css

table.ta1 {
    font-family: Georgia, Times, serif;
    font-size:13px;
    }

We also give example and pass the W3C standards.

W3C members are mainly aimed at driving the Web its full potential: for Markercss was essential
to ensure a code that meets these standards.