Reticulas cssframework

lets you work faster using stylesheets

Download v2.1.2 from GitHub

Interface

interface.less or _interface.scss

This style sheet extend reticulas with user interface components.

Font size

Apply differents type sizes.

  • .mini();

    10px - Lorem ipsum dolor sit amet

  • .medium();

    13px - Lorem ipsum dolor sit amet

  • .large();

    22px - Lorem ipsum dolor sit amet

  • .big();

    36px - Lorem ipsum dolor sit amet

  • .enormous();

    62px - Lorem ipsum dolor sit amet

Text align

Different text alignments.

  • .textalignr();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • .textalignl();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • .textalignc();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • .textalignj();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Text greyscale colors

Apply differents text colors.

  • .white();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .light();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .lightgrey();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .mediumgrey();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .darkgrey();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .almostblack();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .black();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

Background greyscale colors

Apply differents background colors.

  • .bg-white();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .bg-light();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .bg-lightgrey();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .bg-mediumgrey();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .bg-darkgrey();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .bg-almostblack();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .bg-black();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

Color notices

Apply styling for notices.

  • .emphasized();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .correct();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

  • .erased();

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, alias, ipsam, error cupiditate explicabo sequi vitae atque necessitatibus optio quam iste rerum nihil veritatis nesciunt pariatur fuga enim eligendi perferendis.

Round corners can't use directly in html markup

Apply styling for round corners.

  • .round(value);

    Applies the same value to all corners, expressed as an integer.

    Lorem ipsum dolor sit amet

    html - less

    <div class="example"><p>Lorem ipsum dolor sit amet</p></div>
    
    .example {
    	.round(10);
    }
  • .round-corners(top-lef, top-right, bottom-right, bottom-left);

    Applies diferents values to corners, expressed as an integer.

    Lorem ipsum dolor sit amet

    html - less

    <div class="example"><p>Lorem ipsum dolor sit amet</p></div>
    
    .example {
    	.round-corners(10,10,0,0);
    }

Gradients can't use directly in html markup

Apply styling for diferents gradients.

  • .gradient-vertical(top-color, bottom-color);

    Applies vertical gradient, expressed as hexadecimal number.

    Lorem ipsum dolor sit amet

    html - less

    <div class="example"><p>Lorem ipsum dolor sit amet</p></div>
    
    .example {
    	.gradient-vertical(#CCC, #999);
    }
  • .gradient-horizontal(left-color, right-color);

    Applies horizontal gradient, expressed as hexadecimal number.

    Lorem ipsum dolor sit amet

    html - less

    <div class="example"><p>Lorem ipsum dolor sit amet</p></div>
    
    .example {
    	.gradient-horizontal(#999, #CCC);
    }
  • .gradient-radial(in-color, out-color);

    Applies radial gradient, expressed as hexadecimal number.

    Lorem ipsum dolor sit amet

    html - less

    <div class="example"><p>Lorem ipsum dolor sit amet</p></div>
    
    .example {
    	.gradient-radial(#CCC, #999);
    }

Box shadowcan't use directly in html markup

Apply styling for box shadow.

  • .shadow(shadow-x, shadow-y, gaussian, spread, #shadow-color);

    Applies radial gradient, expressed as an integer and hexadecimal number.

    Lorem ipsum dolor sit amet

    html - less

    <div class="example"><p>Lorem ipsum dolor sit amet</p></div>
    
    .example {
    	.shadow(0, 0, 10, 2, #CCC);
    }

Tabs

A set of tabs navigation.

  • .tabs();

    Basic tabs.

    html - css

    <ul class="tabs">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    html - less

    <ul class="example">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
    
    .example {
        .tabs();
    }
  • .tabs() .tab-top();

    Basic tabs top.

    html - css

    <ul class="tabs tab-top">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    html - less

    <ul class="example">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
    
    .example {
        .tabs;
        .tabs &.tab-top;
    }
  • .tabs() .tab-right();

    Basic tabs right.

    html - css

    <ul class="tabs tab-right">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    html - less

    <ul class="example">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
    
    .example {
        .tabs;
        .tabs &.tab-right;
    }
  • .tabs() .tab-left();

    Basic tabs left.

    html - css

    <ul class="tabs tab-left">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    html - less

    <ul class="example">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
    
    .example {
        .tabs;
        .tabs &.tab-left;
    }
  • .tabs() .stacked();

    Basic tabs stacked.

    html - css

    <ul class="tabs stacked">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    html - less

    <ul class="example">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
    
    .example {
        .tabs;
        .tabs &.stacked;
    }
  • .tabs() .menu();

    Basic tabs menu.

    html - css

    <ul class="tabs menu">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    html - less

    <ul class="example">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
    
    .example {
        .tabs;
        .tabs &.menu;
    }
  • .tabs() .menu() .pill();

    Basic tabs menu pill.

    html - css

    <ul class="tabs menu pill">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>

    html - less

    <ul class="example">
        <li><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li class="active"><a href="#">Tab 3</a></li>
        <li><a href="#">Tab 4</a></li>
    </ul>
    
    .example {
        .tabs;
        .tabs &.menu;
        .tabs &.menu &.pill;
    }

Button

Button appearance.

  • .btn();

    Button appearance

    a as button
  • html - css

    <a href="#" class="btn">a as button</a>
    <input class="btn" value="input as button" type="submit">
  • html - less

    <a href="#" class="example">a as button</a>
    <input class="example" value="input as button" type="submit">
    
    .example {
        .btn();
    }

Breadcrumb

Basic breadcrumb.

  • .breadcrumb();

    Breadcrumb appearance

  • html - css

    <ul class="breadcrumb">
        <li><a href="#">breadcrumb 1</a></li>
        <li><a href="#">breadcrumb 2</a></li>
        <li><a href="#">breadcrumb 3</a></li>
        <li><a href="#">breadcrumb 4</a></li>
    </ul>

    html - less

  • <ul class="example">
        <li><a href="#">breadcrumb 1</a></li>
        <li><a href="#">breadcrumb 2</a></li>
        <li><a href="#">breadcrumb 3</a></li>
        <li><a href="#">breadcrumb 4</a></li>
    </ul>
    
    .example {
        .breadcrumb();
    }
Back to Top

Shortcut help