NivelStyle

NivelStyle is a CSS framework that focus in:

• Use flexible estructures without needing grids
• Re-use always the same classes to build your layout
• Build structures without redundant code that will be rewriten

How to install

Add CSS folder archives to your style folder. Inside head in your template add a call to main.css :

<link rel="stylesheet" href="css/main.css" type="text/css" media="screen, projection">

In main.css¹ you will find some @import calls, to the other stylesheets:

• reset.css: This is reset archive created by Eric Meyer. It isn’t required to use it, you can use the reset.css file you preffer.
• nivelstyle_form.css: Styles to build a form. In form.html you will find de structure.

• nivelstyle.css: Layout styles. With this styles you can build any structure you want.
• estructuras.css: Your styles. You can choose this name or include the stylesheet you are working on.

How to use it

NivelStyle is half HTML and half CSS, you need both to create flexible strcutures and easy to control.

Basic site’s structure:

<div class="container">
    <div class="header">
        <h1><a href="#">Site name</a></h1>
    </div>
    <div class="container-content">
        <div class="content">
            <!-- NIVELES -->	
        </div>
    </div>

    <div class="footer" >
        <p>Your footer</p>
    </div>
</div>

Basic site classes explanation

• .header: HTML and CSS in your header
• .container-content: .content can function with a 100% width
• .content : You put your content here and you can set padding or/and margin to the content.
• .footer : “clear” all site

Nivel’s structure

NivelStyle work in “nivels” (levels). In each nivel you can control all stuff inside.

<div class="nivel your-div-name1 ">
	<div class="container-block">
    	
        <!-- CONTENT BLOCKS-->
        
    </div>
	<!-- end container-block-->
</div>
<!-- end nivel your-div-name1 -->

Nivel structure classes explenation

• .nivel: Default width 100% but you can set a fixed width. It is better not apply top/button padding/margin/border becouse this affect width.
• .your-div-name1: The nivel name you choose. You can control all the structure with this class.
• .container-block: Padding/margin/border to separete your blocks. Better It is better not apply width unless you think it’s necessary.

Content block basic structure

<div class="block a">
    <div class="content-block">
        <!-- BLOCK CONTENT-->
    </div>
    <!-- end content-block -->
</div>
<!-- end block a -->

Block structure classes explenation

• .block: You can control the widht of every block in you nivel.
• .a, .b, .c, etc.: Extends block and you can control a specific block in your nivel and apply width, background color, typography, etc. It’s better not apply padding/margin.
• .content-block: It is like “.container-block” but inside each block, you can set margin/padding/borde, etc.

¹ It is not necessary incluide main.css, if you only want to use the layout code, you can call only nivelstyle.css. If you will use NivelStyle in a builded project, verify that your classes are not using the same class names. This may alter the functioning of the style sheet nivelstyle.