Reticulas cssframework

lets you work faster using stylesheets

Download v2.1.2 from GitHub

Utilities

utilities.less or _utilities.scss

This style sheet extend reticulas base with some utilities and helpers.

Float elements

Float right and left elements.

  • .floatl();

    float: left;
  • .floatr();

    float: right;
  • .left();

    Float a image to left inside a paragraph

    p img.left{...}
  • .right();

    Float a image to right inside a paragraph

    p img.right{...}

Clear and clearfix

Techniques to clear floats.

  • .clear();

    clear: both;
  • .clearfix();

    Force element to self-clear its children.

Visibility

Different classes to hide elements as required.

  • .hide();

    Hide from screenreaders and browsers: h5bp.com/u

  • .invisible();

    Hide visually and from screenreaders, but maintain layout.

  • .visuallyhide();

    Hide only visually, but have it available for screenreaders: h5bp.com/v

Image replacement

Technique of replacing a text element with an image.

  • .imageback();

    Followed by the class name for the image. Remember to specify the height and width in the style sheet.

    html - css

    <h1 class="imageback example"><a href="#">My example</a></h1>
    
    .example {
        background-image: url(example.jpg);
        width: 150px;
        height: 100px;
    }

    html - less

    <h1 class="example"><a href="#">My example</a></h1>
    
    .example {
    	.imageback();
    	a{
    	    background-image: url(example.jpg);
    	    width: 150px;
    	    height: 100px;
    	}
    }

Helpers

Support for development.

  • .boxcenter();

    You can use this class to center a row on the page.

  • .baseline();

    With this class you can see the baseline.

  • .font-size(value); can't use directly in html markup

    Value as a number in px. With this class you create values in rem and px.

    html - less

    <h1 class="myexample"><a href="#">My example</a></h1>
    
    .myexample {
    	.font-size(18);
    }
Back to Top

Shortcut help