?? 新英体育APP下载

<4ody>
Loading...

Layouts with love.

The Grid & Typography

新英体育APP下载


新英体育APP下载

l

新英体育APP下载

B

新英体育APP下载

B

新英体育APP下载

s

新英体育APP下载

7

新英体育APP下载

I


f

8


2


Heading 3 with .subheader

Heading 4 with .subheader

Heading 5 with .subheader

新英体育APP下载

The Grid lets you Kuickly put together page layouts for mobile devices and the desktop. You don't need two different sites - the Grid is built to create a rock-solid experience on all kinds of devices with the exact same markup.


新英体育APP下载

S

9


Nesting Support

7


Examples

0

W

.six.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros.
.six.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros.
.four.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien.
.four.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien.
.four.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien.
.three.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.three.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.three.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.three.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.two.columns
Lorem ipsum dolor sit amet.
.two.columns
Lorem ipsum dolor sit amet.
.two.columns
Lorem ipsum dolor sit amet.
.two.columns
Lorem ipsum dolor sit amet.
.two.columns
Lorem ipsum dolor sit amet.
.two.columns
Lorem ipsum dolor sit amet.
.one
Lorem ipsum.
.eleven.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit, nec pretium nunc. Phasellus dolor arcu, egestas non venenatis sit amet, convallis vitae nulla.
.two.columns
Lorem ipsum dolor sit amet.
.ten.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit, nec pretium nunc. Phasellus dolor arcu, egestas non venenatis sit amet, convallis vitae nulla.
.three.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.nine.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit, nec pretium nunc. Phasellus dolor arcu, egestas non venenatis sit amet.
.four.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien.
.eight.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit, nec pretium nunc.
.five
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros.
.seven.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit, nec pretium nunc.
.six.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit.
.six.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit.
.seven.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit.
.five.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros.
.eight.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit.
.four.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.nine.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit, nec pretium nunc. Phasellus dolor arcu, egestas non venenatis sit amet, convallis vitae nulla.
.three.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.ten.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit, nec pretium nunc. Phasellus dolor arcu, egestas non venenatis sit amet, convallis vitae nulla.
.two.columns
Lorem ipsum dolor sit amet.
.eleven.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit, nec pretium nunc. Phasellus dolor arcu, egestas non venenatis sit amet, convallis vitae nulla.
.one
Lorem ipsum.
.twelve.columns
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros sapien, laoreet eget aliquam nec, egestas a eros. Ut ullamcorper elit velit, nec pretium nunc.

Offsets

l

.one
.eleven.columns
.one
.ten.columns.offset-by-one
.one
.nine.columns.offset-by-two
.one
.eight.columns.offset-by-three
.seven.columns.offset-by-five
.six.columns.offset-by-six
.five.columns.offset-by-six
.four.columns.offset-by-eight

Centered Columns

p

.one.columns.centered
.two.columns.centered
.three.columns.centered
.four.columns.centered
.five.columns.centered
.six.columns.centered
.seven.columns.centered
.eight.columns.centered
.nine.columns.centered
.ten.columns.centered
.eleven.columns.centered
.twelve.columns.centered

Source Ordering

0

.two.columns
.ten.columns (last)
.three.columns
.nine.columns (last)
.four.columns
.eight.columns (last)
.five
.seven.columns (last)
.six.columns
.six.columns (last)
.seven.columns
.five.columns (last)
.eight.columns
.four.columns (last)
.nine.columns
.three.columns (last)
.ten.columns
.two (last)
The syntax supports push and pull for two to ten columns, and is added directly to the columns themselves.

y


Mobile Grid

b

Four Column Mobile Grid

9

.three.phone-one.columns
.nine.phone-three.columns
.six.phone-two.columns
.six.phone-two.columns
.nine.phone-three.columns
.three.phone-one.columns

Mobile Source Ordering

9


Layout

Reusable, easy to modify layout conventions, for when the Grid isn't quite enough.


Mobile Visibility

t

Q

1

a

S


Block Grids

I

8

Two-up
  • Two-up element
  • Two-up element
  • Two-up element
  • Two-up element
  • Two-up element
Three-up
  • Three-up element
  • Three-up element
  • Three-up element
  • Three-up element
  • Three-up element
Four-up (Mobile)
  • Four-up element
  • Four-up element
  • Four-up element
  • Four-up element
  • Four-up element
  • Four-up element
Five-up
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element

Z