. Containeren er som udgangspunkt altid responsiv. Det vil sige, at dens bredte er fleksibel. Men den har en maks (940px) bredte og en minimums (300px) bredte. Og understøtter som udgangpunkt de breakpoints der i TorqueUI bliver kaldt Small, Medium og Large.

Det kan dog ændres med nogle utility klasser som TorqueUI tilbyder. Klasserne skal sættes på det samme element som du også sætter .container klassen. Forneden er vist to eksempler. Et eksempel på en almindelig container og en container som har fået utility klassen .with-xlarge sat på.

 

Med .with-xlarge klassen bliver containerens maks bredte forøget til 1260px og du kan bruge de kolonne klasser der hedder .col-xl-1, .col-xl-2, ... .col-xl-24 til at definere opsætningen af dit grid. .with-xlarge definere med andre ord at grid'et skal understøtte alle TorqueUI breakpoint fra Small til Xlarge.

Fast container

Med utility klasserne har du også mulighed for at lave en fast container, sagt med andre ord, kan du lave et låst og ikke responsivt grid. Det gøres med klasserne .is-small og .is-large, der lige som .with-xlarge skal sættes på det samme element som du også sætter .container klassen. Eksemplerne forneden viser hvordan det ser ud:

Med .is-small, låser du containeren til en fast bredte på 300px. med .is-large, låser du containeren til at have en fast bredte på 940px. Det vil med andre ord sige, at med de to utility klasser kan du gøre så grid'et ikke opfører sig responsivt og dermed beholder en fast bredte på henholdsvis 300px og 940px. De breakpoints der i TorqueUI bliver betegnet som Small og Large.

Simpelt eksempel

TorqueUI grid'et har 4 breakpoints indbygget som kaldes for Small, Medium, Large og Xlarge. Hvert af de enkelte breakpoint har et fast antal af kolonner:

• Small (s) har 4 kolonner.
• Medium (m) har 12 kolonner.
• Large (l) har 12 kolonner.
• Xlarge (xl) har 24 kolonner.

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.
Eksemplet forneden viser et grid med 3 bokse, der hver fylder 1/3 af siden på m, l og xl, men som på s tager fuld bredte og bliver 3 bokse oven på hinanden. Læg mærke til vi bruger en container med .with-xlarge for at få xl breakpointet med:

Lig mærke til hvordan CSS classerne bruges: col-s-4 col-m-4 col-l-4 col-xl-8 til at fortælle hvor bredt elementerne skal være på de enkelte breakpoints.

• 4 kolonner på s som er fuld bredte da s kun har 4 kolonner.
• 4 kolonner på m som er 1/3 da m har 12 kolonner ialt. Med andre ord: 12/4 = 3.
• 4 kolonner på l som er 1/3 da l har 12 kolonner ialt. Med andre ord: 12/4 = 3.
• 8 kolonner på xl som er 1/3 da xl har 24 kolonner ialt. Med andre ord 24/8 = 3.

 

Liste eksempel

TorqueUI's rækker er lavet så de understøtter overflowing, det betyder at selvom der er for mange kolonner i en række i forhold til hvad der er maks. Det rækken gør, er at den lader elementerne flyde ned og blive til en list af elementer. Det vil med andre ord sige, at elementerne (der har fået anvist en kolonne bredte / kolonne antal) altid vil behold deres bredte, men hvis der er for mange til de kan være på en række så vil de flyde ned på næste linie.
Eksemplet forneden viser en responsiv liste af elementer, som hver fylder 1/4 del på xl, 1/3 del på l og m og 1/2 del på s. Lig mærke til der i dette tilfælde er flere elementer / kolonner på en række end der er plads til i en normal række, så elementerne flyder ned. Læg mærke til vi bruger en container med .with-xlarge for at få xl breakpointet med:

Lig mærke til hvordan CSS classerne bruges: col-s-2 col-m-4 col-l-4 col-xl-6 til at fortælle hvor bredt elementerne skal være på de enkelte breakpoints.

• 2 kolonner på s som er 1/2 da s har 4 kolonner ialt. Med andre ord: 4/2 = 2.
• 4 kolonner på m som er 1/3 da m har 12 kolonner ialt. Med andre ord: 12/4 = 3.
• 4 kolonner på l som er 1/3 da l har 12 kolonner ialt. Med andre ord: 12/4 = 3.
• 8 kolonner på xl som er 1/4 da xl har 24 kolonner ialt. Med andre ord 24/6 = 4.

 

Nested eksempel

Med TorqueUI er det muligt at bygge sit website op med mere end et grid. Det er nemlig muligt, at ligge et grid ind i et andet grid, så du på den måde kan opbygge komplekse elementer og komponenter.
Den grundlæggende ide bag at ligge et grid ind i et grid er faktisk bare at ligge en .row ind i en kolonne, som du gerne vil lave et grid indeni.
Det nedenstående eksempel er opdelt med én small kolonne til venstre (en sidebar) og en bred kolonne til højre (indholds elementet) som indeholder den liste af elementer vi lavede foroven. På s og m ligger sidebaren sig oven på listen / indholdsfeltet ved siden af. Læg mærke til vi bruger en container med .with-xlarge for at få xl breakpointet med:

Som det kan ses på eksemplet så er det ikke nødvendigt at have mere end en .container, for at ligge et grid ind i et andet. En .row er alt hvad der skal til.
Sidebaren ligger sig oven på produktlisten fordi begge elementer har fuld bredte på s og m med CSS classerne .col-s-4 og .col-m-12.

Komplet eksempel

Eksemplet forneden er mere komplekst og er taget direkte fra TorqueUI hjemmesiden. Eksemplet viser, udover hvordan en side kan opbygges, hvordan det med grid'ets hjælper klasser er muligt at styre det man kalder 'source order'. 'Source order' eller 'source code order' er den rækkefølge elementerne har i selve koden. Og det er vigtigt når man skal have elementerne til at stå rigtigt på de helt små skærme. Hvor de som regel optager fuld bredte og dermed står i deres naturlige ('source order') rækkefølge.  Læg mærke til vi bruger en container med .with-xlarge for at få xl breakpointet med:

Vil du vide mere om hvordan de her hjælpe klasser fungere, så kig på TorqueUi's hjemmeside om TorqueUI grid og om TorqueUI helper classes.