Grid

ParaGRIDma uses a very standard method to display grid (very similar to popular frameworks like bootstrap or foundation). It has some basic rules

• The grid system is based on a 12 column layout, with a max-width defined on CSS (@row-max-width)
• All the rows must be wrapped in a a container with the class container
• All the columns in a row must be wrapper in a container with the class row
• Each column must have a class from g-1 to g-12 depending of the desired with

Centered columns

If you want to center a column you must add the class centered to the column. You can also add class ac to center text inside the column.

Columns with no padding

If we add the class np to the columns we can remove its padding.

Nested columns

The grid allows for nesting down. You can create complex layouts using nesting columns

Columns like there is no tomorrow

If you want to add a lot of columns, but you don't want to create a row element for each line you can simply add a class first to the column in which you want to start a new row.

Split Columns on big mobiles

Sometimes we want to reduce the amount of columns in small screens, but don't want to show them 100% width. In those cases we can add the class split-on-mobile on the row element.

• This change take effect between size of @screen-smal and @screen-medium
• To test it reduce the size of the browser. You will see that the following 4 columns will be shown in groups of 2.

Split Columns even on small mobiles

Sometimes we want to reduce the amount of columns in small screens, but don't want to show them 100% width. In those cases we can add the class split-on-mobile on the row element.

• This change take effect between size of @screen-smal and @screen-medium
• To test it reduce the size of the browser. You will see that the following 4 columns will be shown in groups of 2.

Fixed Block (always)

Those panels have two columns. One of them has a fixed width, and the other one is fluid.

Frameworks defualt values: 50px, 100px, 150px, 200px and 250px. You can create new sizes editing the css file. Look for the classes .pf

FLUID COLUMN

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus, ac egestas augue laoreet a. Quisque varius ligula non est porta sit amet dictum orci consequat. Morbi pellentesque luctus ligula, sit amet vehicula sapien imperdiet a. Suspendisse sed lacus at eros tristique vehicula eget sit amet sem.

FLUID COLUMN

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar fringilla risus, ac egestas augue laoreet a. Quisque varius ligula non est porta sit amet dictum orci consequat. Morbi pellentesque luctus ligula, sit amet vehicula sapien imperdiet a. Suspendisse sed lacus at eros tristique vehicula eget sit amet sem.

Fixed Block (with negative values)

This is another option to use when you need one fixed column and one fluid column.

Conditional Display

Some elements can be visible in some screen sizes and invisible in other. You can choose:

• Hide something on mobiles: hide-on-phones
• Hide something on tablets: hide-on-tablets
• Hide something on desktops: hide-on-desktops

Typography

Typography is built with rems, so it easier to adapt the font sizes in different breakpoints.

rem: It is the size relative to the root element (or the HTML element). So we can define a single font size on the html element and it affects to all elements with rem units to be a percentage of that.

<pre>: text

Headings

Headings exists from h1 to h6. Font sizes are defined in em

In addition to heading you can use add extra text. You can use the tag <small> inside the heading or add an adjacent heading with class subheader

Aligments

Responsive typhography

For headings and other big size text we need to adapt font-size in relation to display width. We can do this width media queries and width a javascript function call adjustTextSize.

This function accept 3 parameters:

1. strings: Elements to be resized
2. set_max_size: boolean to limit maximum font size to its defined size in CSS
3. min_size: Integer number to limit minimum font size.

All elements with class js-adjust-text will be adjusted

Default adjust text with no size limitations

$('.js-adjust-text').adjustTextSize(false, 12);

Adjust text with limitations

$('.js-adjust-text-limit').adjustTextSize(true, 30);

Lists

You can choose between different types of lists: empty list (default), unordered lists, ordered lists, and definition lists. In default ul lists we remove list styles, because in our apps most of times we don't want that our lists look like lists

Forms

Inputs

<div class="fg checkboxGroup">
  <label>Checkbox Group</label>
  <div class="options">
    <div class="option">
      <input type="checkbox" id="name" class="checkbox">
      <label for="name">option 1</label>
    </div>
    <div class="option">
      <input type="checkbox" id="name" class="checkbox">
      <label for="name">option 2</label>
    </div>
  </div>
</div>

<div class="fg radioGroup">
  <label>Radio Group</label>
  <div class="options">
    <div class="option">
      <input type="radio" id="name" class="radio">
      <label for="name">option 1</label>
    </div>
    <div class="option">
      <input type="radio" id="name" class="radio">
      <label for="name">option 2</label>
    </div>
  </div>
</div>

Buttons

Adding the class bt to a link, submit button or button element make them look like buttons.

<a class="bt" href="#">Button</a>

Messages

$(wrapper Selector).showMsg(
    size: big|small,
    type: warning|error|success|info,
    scroll to panel: 0|1,
    title: "Lorem ipsum",
    description: "Lorem ipsum dolor sit amet, consectetur..."
);
            

Tabs

This component give you the core styles and javascript functions to let you use tabs.

Tables

This component give you the core styles and javascript functions to let you use tables.

Condensed Tables

Responsive Tables

You can make your tables responsive just wrapping the table with a panel with the class table-responsive. In small widths the table will scroll horizontally

Pagination

Images

This is the default way to include an image.

Responsive Images

We know several libraries that offer this feature, but none of them fix our needs completly. We need a solution that:

• Work with out Javascript: If there is no Javascript on render time, then the large version of the image will be displayed
• The version of the image to show depens of its parent size. Other libraries rely this on window width, and we thing that this is not the best method to do it.
• Option to set diferent version sizes for different images groups: In a real project not all the images can be display with the same dimensions.
• Create several version of the image on the server: First implementation will be in PHP, but we'll do it also for JAVA & Grails.
• Bandwidth detection: If connection is slow the the lowest quality version of the image will be display.
• Lazy load: Load images only when they are inside the viewport.

To resize the image we use the PHP script timthumb.php. To make it work you need:

• Placed in a folder on your website. We like to inlcude it inside our main image folder.
• Create a directory called 'cache' with 775 permisions.

Other components

Breadcrumbs

This is the structure that Google recommens for a breadcrumbs

Tooltips

TODO: Tooltips

Responsive video embed & Lazy Iframe Video load

If your page needs to load an iframe from Youtube or Vimeo you'll notice that you have 2 problems: Page load time became much more slower and the iframe doesn't fix it's responsive parent size.

To make you iframe fits the desire width and height you hace to use this HTML structure and remove every iframe tag related to dimensions.

The problem with the page load time is that this kinds of iframe needs lots of resources to work fine. If we just embed one of those iframes the page will require al those Javascript and CSS, and our cool page'll became slower.

The solution that we use is to load the iframe only when the user want to see it (on user click).

At the moment it is only available to load video iframes from youTube and Vimeo.

Click to watch video

Click to watch video

Add ons

Font Awesome integration

To get more info abouit visit Font Awesome web site.