Loading...

Layouts with love.

The Grid & Typography

Typography


Heading 1

北京赛车 www.3a0e.com Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel neque lacus, vitae interdum metus. Vestibulum at nulla ac est fermentum vehicula et id leo. Donec viverra quam eu metus auctor id bibendum erat interdum. Nam sit amet justo nisl, non feugiat erat. Suspendisse venenatis turpis nisl.

Vestibulum blandit, ante consequat congue euismod, eros neque ullamcorper nibh, porttitor hendrerit leo leo eget enim. Vestibulum ac nisi quam, ac eleifend nulla. Integer sem massa, rutrum quis placerat in, feugiat eu diam. Phasellus tincidunt fermentum velit.


Images or anything can be aligned using .left or .right classes.


Heading 3 with .subheader

Heading 4 with .subheader

Heading 5 with .subheader

The Grid

The Grid lets you quickly 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.


The Basics

The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure. Everything on your page that you don't give a specific structural style to should be within a container, row and column.

What you need to know is that columns don't have a fixed width: they can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.


Nesting Support

In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.


Examples

Take this page for example - we've set up this page by containing this section in eight columns, and the sidebar in four. When the screen is larger than iPad resolution you'll see them laid out normally - smaller than that and columns become 100% width objects for mobile devices.

Below you can see how the rows and columns come together. All columns are inside a row and for this we've colored the rows and columns for visibility. You can also see how nesting works - this example is inside an eight column container, but below we have all 12 columns to use. You can nest them down quite a ways before the percentage widths become absurdly small.

.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

Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven. Like the rest of the grid they're nestable.

.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

Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: for this to work, there cannot be any other column blocks in the row.

.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

Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using these source ordering classes you can shift columns around on desktops and tablets. On phones the grid will still be linearized into the order of the markup.

.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.


Mobile Grid

The grid has two modes of adapting for small displays like phones. The first requires no work at all — the grid will linearize on a small device so your columns stack vertically. This is useful to quickly adapt a desktop layout to a simple scrolling mobile layout. The other option is to use some simple classes to implement a four-column phone grid.

Four Column Mobile Grid

When you're creating your layout you can optionally attach classes that take your existing grid elements and attach them to a four column phone grid.

.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

You can use the same push and pull style classes on the 4 column phone grid. The syntax includes .pull-one-phone, .pull-two-phone, .pull-three-phone, as well as .push-one-phone, .push-two-phone, .push-three.phone.


Layout

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


Mobile Visibility

With Foundation 2.0 we've included various mobile visibility affordance classes. Want to hide something on phones, or show it only on tablets? Got you covered.

For example, the following text should describe the device you're using: You are on a desktop machine. You are on a tablet device. You are on a smartphone like an iPhone or Android phone.

That example uses the 'show-on-x' classes seen here:

This example uses the opposite rules, so the following text should describe the device you're using: You are not on a desktop machine. You are not on a tablet device. You are not on a smartphone like an iPhone or Android phone.

Each of these classes have an implied 'only' as in 'show only on tablet' or 'hide only on phones'.


Block Grids

Block grids are ULs with 2-up, 3-up, 4-up and 5-up styles. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.

By default these blocks will stay in their N-up configuration on mobile devices, but you can add a class of 'mobile' to have them reshuffle on smartphones into one element per line, just like the Grid.

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

Most of the documentation is by the Zurb Team. It's awesome & I'm thankful that they wrote such thorough documentation for an open source project. Most companies would never do that.

  • 傅抱石《琵琶行诗意》1.035亿元成交 2019-04-17
  • 日照市妇幼保健院:免费健康体检送进福利院 2019-04-17
  • 其实逻辑跟简单:小萌们如果能把自己计划好又何至于悲催到要通过混淆所有制形式把别人的钱偷到自己口袋里? 2019-04-11
  • 全世界最美的办公室都在这里了 快来一饱眼福 ——凤凰网房产 2019-04-08
  • 习近平视察北部战区海军 上潜艇下舱室进战位 2019-04-08
  • 版权声明中国国家地理网 2019-04-02
  • 计划经济政府是不能管的,但习近平说,政府要管好经济工作,这是当和人民交付的使命,你认为怎么样? 2019-04-02
  • 用微信还款将收费 每月超5000元部分收费0.1% 2019-03-30
  • 世界社会主义运动的重要篇章 2019-03-27
  • 人民日报人民时评:让安全生产理念成为基本共识 2019-03-24
  • 【北京宝泽行车型报价】北京宝泽行4S店车型价格 2019-03-22
  • 推动形成全面开放新格局 开启新时代开放新征程 2019-03-22
  • 这个错误的观点在自以为懂得马克思主义的人群中很普遍,非常普遍! 2019-03-22
  • 山西省互联网违法和不良信息举报中心——黄河新闻网 2019-03-16
  • 美国又打出2000亿关税牌,中方这300字声明暗藏玄机! 2019-03-16
  • 181| 529| 782| 107| 119| 932| 871| 935| 269| 233| 177| 408| 506| 65| 669|