Overview:

• Container Options
• Simple Examples
• List Examples
• Nested Examples
• Complete Examples

 

The examples on this page show different guidelines in setting up a TorqueUI grid. If you want to read a more in depth guide about TorqueUI’s grid you can visit TorqueUI’s website: TorqueUI Grid. The examples are intended as code examples and are intended to be copy/pasted onto a page that already has TorqueUI implemented.

 

Container Options

When you build a website with TorqueUI grid, you should have a container,which is a kind of wrapper element. The container is defined with .container on a dom element, basically always a

. The container is basically always responsive. That means the width is flexible, but only has a max width of 940px and a minimum width of 300px. This also supports the basic breakpoints from TorqueUI which are called Small, Medium, Large.

 

This may change with some of the utility classes that are offered by TorqueUI. The classes must be put on the same element that you put on the .container class. Below you will see two examples of this. One example on a normal container and another with the utility class .with-xlarge.

*CODE* *SNIPPIT*

*CODE*
*CODE* *SNIPPIT*

*CODE*

With .with-xlarge class on the container the maximum width is overidden to a maximum of 1260px and you can use the column classes that are called .col-xl-1, .col-xl-2, ..., .col-xl-24 to define the settings of the grid. .with-xlarge supports all TorqueUI breakpoints from small to xlarge.

 

Solid Container

With utility classes you also have the option to create a solid container, in other words, you can create a locked and no-responsive grid. This is done with the classes .is-small and .is-large as with .with-xlarge you need to put it in the same element that you also set the .container class on. The examples below show how how this can be accomplished:

*CODE* *SNIPPIT*

*CODE*
*CODE* *SNIPPIT*

*CODE*

With .is-small, it locks the conatainer width to 300px. With .is-large, it locks the container width to 940px. In other words, with the two utility classes you can use that will not behave responsively and will hold a fixed width of 300px and 940px respectively. The breakpoints in TorqueUI is referred to as small and large.

 

Simple Example

The ToqueUI gord has 4 breakpoints built-in and are called: Small, Medium, Large, Xlarge. Each one of these breakpoints have a set number of columns:

• Small (s) has 4 columns.
• Medium (m) has 12 columns.
• Large (l) has 12 columns.
• Xlarge (xl) has 24 columns.

Størrelse og kolonner skal du bruge når du skal opsætte dit website. Den måde grid'et fungere på er at man give sine kolonner en bredte ved hjælp af kolonnerne. Det er vigtigt at notere, at alle kolonner skal placeres i et element med klassen .row for at fortælle grid'et at nu vil man gerne begynde på en ny række. På den måde fungere grid'et meget som en tabel eller de kolonner og rækker du kender fra Excel.

The example below shows a grid with 3 boxes, each box fills 1/3 or the pages width on m, l and xl, but s fills the full width and the 3 boxes line up on top of each other. Note we use a container with .with-xlarge to get the xl breakpoint with:

*CODE* *SNIPPIT*
    
        
Box 1
        
Box 2
        
Box 3
    
*CODE*

 

This is similar to how CSS classes use: col-s-4 col-m-4 col-l-4 col-xl-8 to tell how wide the elements must be in the individual breakpoints.

• 4 columns on s breakpoint takes full width on top of each other.
• 4 columns on m breakpoint takes 1/3 width next to each other and has 12 columns in all. In other words: 12/4 = 3.
• 4 columns on l breakpoint takes 1/3 width next to each other and has 12 columns in all. In other words: 12/4 = 3.
• 8 columns on xl breakpoint takes 1/3 width next to each other and has 24 columns in all. In other words: 24/8 = 3.

 

List Example

TorqueUI's rows are created so they support overflowing, it means that even if there are too many columns in a row compared to what the maximum is. What this row/series does is it lets the elements flow down into a list of items, so it can conform to different screen sizes. This means that if there are too many rows to fit the width of the screen it will allow them to flow down onto another row underneath.

The example below shows a responsive list of elements, each of which occupies 1/4 part of xl, 1/3 part of l and m and1/2 part of s. Notice that this case is similar that multiple elements/columns in a range can fit in a normal row but can flow down if necessary. Note: We use a container me .with-xlarge to get the xl breakpoint with:

*CODE* *SNIPPIT*



*CODE*

 

Note: How the CSS classes use: col-s-2 col-m-4 col-l-4 col-xl-6 to tell how wide elements should be for one of the following breakpoints.

• 2 columns on s breakpoint takes 1/2 width next to each other and has 4 columns in all. In other words: 4/2 = 2.
• 4 columns on m breakpoint takes 1/3 width next to each other and has 12 columns in all. In other words: 12/4 = 3.
• 4 columns on l breakpoint takes 1/3 width next to each other and has 12 columns in all. In other words: 12/4 = 3.
• 8 columns on xl breakpoint takes 1/4 width next to each other and has 24 columns in all. In other words: 24/6 = 4.

 

Nested Element

With TorqueUI it is possible to build your website with more than a grid. It is possible, to have a grid within another grid, so in this way you can build complex elements and components.

The basic idea of having a grid within a grid is actually just a .row in a column that you want to create a grid inside.

In the example below is split with a small column to the left (a sidebar) and a wide column to the right (content element) which contains a list of elements we made at the top. The s and m is used for the sidebar at the top of the list / content field to the side. Notice we use a container with .with-xlarge to get the xl breakpoint with:

*CODE* *SNIPPIT*

*CODE*

 

As it can be seen in the example it is not necessary to to have more than one .container, to have a grid within another. A .row is all it takes.

The sidebar sits above the product list because both elements have full widths on s and m with CSS with classes .col-s-4 and .col-m-12.

 

Complete Example

The example below are more complex and are taken directly from the TorqueUI website. The example shows, how a page can be built, how it's possbile to control the grid with the helper class called 'source order'. 'Source Order' or 'source code order' is a sequence of elements that has its own code. It is important when you want elements to sit in the correct order on a small screen. Where they usually occupy the full width and in the correct ('source order') order. Notice we use a container with .with-xlarge to get the xl breakpoint with:

*CODE* *SNIPPIT*

*CODE*

Do you want to know more about how helper classes, if so look on TorqueUI's website for TorqueUI Grid and TorqueUI Helper Classes.