Metor UI CSS v 0.1.4

全局样式

需要 HTML5 doctype

在开始使用之前请确保 HTML 使用了 HTML5 doctype。

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.       ...
  4.     </html>

重置样式

在 Metro UI CSS 中使用了 Nicolas Gallaher 创建的 normalize.css

颜色

  • *-color-green
  • *-color-greenDark
  • *-color-greenLight
  • *-color-pink
  • *-color-pinkDark

 

  • *-color-yellow
  • *-color-darken
  • *-color-purple
  • *-color-blue
  • *-color-blueDark

 

  • *-color-blueLight
  • *-color-orange
  • *-color-orangeDark
  • *-color-red
  • *-color-white

设置背景颜色请使用前缀 bg, 设置字体颜色使用前缀 fg

  1.     <div class="bg-color-red">...</div>
  2.     <span class="fg-color-blue">...</span>

设置边框（border） 颜色使用前缀 border

 
 
 
 
  
  1.     <div class="border-color-red">...</div>

字体

在 Metro UI CSS 使用了 Segoe UI, Open Sans 字体 (根据自己情况自由调整).

布局模版

默认页面布局

Header

Content 
  1.     <div class="page">
  2.         <div class="page-header">
  3.             <div class="page-header-content">
  4.             ...
  5.             </div>
  6.         </div>
  7.  
  8.         <div class="page-region">
  9.             <div class="page-region-content">
  10.                 ...
  11.             </div>
  12.         </div>
  13.     </div>

两栏布局

Header

Content 
  1.     <div class="page secondary">
  2.         <div class="page-header">
  3.             <div class="page-header-content">
  4.             ...
  5.             </div>
  6.         </div>
  7.  
  8.         <div class="page-region">
  9.             <div class="page-region-content">
  10.                 ...
  11.             </div>
  12.         </div>
  13.     </div>

Fill View

Page Content

  1.     <div class="page fill">
  2.         ...
  3.     </div>

Snapped View

Page Content

  1.     <div class="page snapped">
  2.         ...
  3.     </div>

Fill & Snapped View

Page Content for snapped view page

Page Content for fill view page

  1.     <div class="page snapped">
  2.         ...
  3.     </div>
  4.     <div class="page fill">
  5.         ...
  6.     </div>

应用程序栏

Content for app bar

  1.     <div class="app-bar">
  2.         ...
  3.     </div>

Sharms

Content for charms

  1.     <div class="charms">
  2.         ...
  3.     </div>

弹出

提醒对话框

对话框的内容

  1.     <div class="message-dialog">
  2.         ...
  3.     </div>

通知对话框

对话框的内容

  1.     <div class="error(info, warning)-bar">
  2.         ...
  3.     </div>

格栅 系统

默认格栅系统

  1.     <div class="grid">
  2.         <div class="row">
  3.             <div class="spanN">...</div>
  4.             ...
  5.             <div class="spanN">...</div>
  6.         </div>
  7.     </div>

格栅系统没有最大宽度值，100%自适应父容器。每个格栅 spanN 可以设置class 从 span1 到 span12。默认maring-left: 20px 并且margin-bootom: 5px;

格栅尺寸

N Cell class Cell width
1span160px
2span2140px
3span3220px
4span4300px
5span5380px
6span6460px
7span7540px
8span8620px
9span9700px
10span10780px
11span11860px
12span12940px

Class spanN 可以用在任何标签上用来设置宽度.

例如

span1
1
1
1
1
1
1
1
1
1
span2
1
1
1
1
1
1
1
1
span3
1
1
1
1
1
1
1
span4
1
1
1
1
1
1
span5
1
1
1
1
1
span6
1
1
1
1
span7
1
1
1
span8
1
1
span9
1
span10

嵌套

格栅可以嵌套使用

  1.     <div class="grid">
  2.         <div class="row">
  3.             <div class="spanN">
  4.                 <div class="row">
  5.                     <div class="spanN">
  6.                         ...
  7.                     </div>
  8.                 </div>
  9.             </div>
  10.         </div>
  11.     </div>

例如

Main grid
Sub
grid
1
Sub grid
2
Main grid

列的偏移

1
1
1
1
1
1
1
1
1
1
offset1
offset2
offset3
offset4
offset5
offset6
offset7
offset8
offs9

偏移尺寸

N Cell class Cell width
1offset180px
2offset2160px
3offset3240px
4offset4320px
5offset5400px
6offset6480px
7offset7560px
8offset8640px
9offset9720px
10offset10800px
11offset11880px
12offset12960px

Class offsetN 可以用在任何标签上用来设置margin-left。

响应式设计

启用响应式功能

在项目中启用响就式 CSS 需要在场<head> 中添加额外样式. 

  1.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2.     <link href="modern-responsive.css" rel="stylesheet">

* 对于 hdpi 设备可以在 viewport 中增加参数 target-densitydpi=device-dpi

Metro UI CSS 中的响就式设计

Medias Query允许浏览器基于不同的条件而使用不同的CSS：比如宽高比，宽度，显示类型等等，但通常还是围绕着min-width and max-width。

  • 在栅格中修改列的宽度
  • 叠加元素而不是浮动
  • 标题和文本大小根据设备来调整

支持的设备

Metro UI CSS 提供了一组 media queries 在CSS文件中，来确保你的项目在不同的设备上都有良好体验。包括：

Layout width Column width Gutter width
大显示器 1200 px and up in progress... in progress...
默认 980px and up 60px 20px
平板电脑 768px and above 42px 20px
手机到平板电脑 767px and below Fluid columns, no fixed width
智能手机 480px and below Fluid columns, no fixed width 
  1.         /* Large desktop */
  2.         @media (min-width: 1200px) { ... }
  3.  
  4.         /* Portrait tablet to landscape and desktop */
  5.         @media (min-width: 768px) and (max-width: 979px) { ... }
  6.  
  7.         /* Landscape phone to portrait tablet */
  8.         @media (max-width: 767px) { ... }
  9.  
  10.         /* Landscape phones and down */
  11.         @media (max-width: 480px) { ... }

2012, Metro UI CSS © by Sergey Pimenov