Aqua-Hema - Grid Layout

Grid Layout

geschrieben von aquahema
Freitag, 14 August 2015 03:41
Schriftgröße Schriftgröße verkleinern Schrift vergrößern
Drucken
E-Mail

Artikel bewerten

(0 Stimmen)

Clearfix method test for not colapsing margin. (Safari)

Float Test

1-2

M-1-2

L-1-2

Grid Nested

1-2

M-1-2

L-1-2

Grid Combined

Using uk-visible-* and uk-hidden-* classes.

M-1-2 L-1-3

hidden-medium

M-1-2 L-1-3

1-2 M-1-3

hidden-small

1-2 M-1-3

1-1 visible-small

M-1-1 visible-medium

L-1-1 visible-large

1-1 hidden-large

L-1-2

Push/Pull

Works only with uk-width-medium-*

First

Last

More Complexity

Here is some multiline text for testing purpose.

M-1-4

M-1-3

M-1-4

1-2

Some paragraph

Another paragraph

M-1-2

Panel

1-4

1-2

Multi-row

This grid contains multiple boxes which floats into multiple rows.

M-1-2
M-1-4
M-1-4
M-1-5
M-1-5
M-3-5

Custom pixel widths

Custom
Custom
Custom
Custom
Custom
Custom
Custom
Custom

Even widths

1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6

Collapse gutter

1-2

M-1-2

L-1-2

1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6

Small gutter

1-2

M-1-2

L-1-2

1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6

Medium gutter

1-2

M-1-2

L-1-2

1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6
1-2
S-1-3
M-1-4
L-1-5
XL-1-6

Divider

1-2

M-1-2

L-1-2

M-1-2 L-1-3

hidden-medium

M-1-2 L-1-3

1-2 M-1-3

hidden-small

1-2 M-1-3

100 visible-small

M-1-1 visible-medium

L-1-1 visible-large

Auto-match column heights

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

With target selector

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Match only within rows

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur.

Gelesen 6107 mal Letzte Änderung am Freitag, 14 August 2015 22:03

Publiziert in Warp Sample Data

aquahema

WarpTheme offer free high quality Joomla! Templates and WordPress Themes for you to create beautiful websites

Webseite: warptheme.com

Das Neueste von aquahema

Mehr in dieser Kategorie: « Close ScrollSpy »

Nach oben