Metor UI CSS v 0.1.4

砖块风格

Windows 8 开始示例页面

示例

说明信息

砖块表示程序或者某个子模块。你可以砖块中显示内容，理想状态它应该是经常更换的，它可以为你的用户传达实时的信息。 砖块可以显示文字、图片、显示状态的徽章。砖块可以放置在斜体任何容器中。

默认砖块大小是 150x150 px。你可以增加新的class来调整它的尺寸: .double(-vertical), .triple(-vertical), .quadro(-vertical).

当砖块为 “选中” 状态时，你可以使用属性 .bg-color-* 来改变它的背景颜色

示例:

  1.     <div class="tile"></div>
  2.     <div class="tile double"></div>
  3.     <div class="tile selected"></div>
  4.     <div class="tile bg-color-orange"></div>

砖块内容

砖块内容使用子 class .tile-content，它拥有10px的上下内边距(padding)，15px的左右内边距(padding)

  1.     <div class="tile">
  2.         <div class="tile-content">
  3.             ...content here...
  4.         </div>
  5.     </div>

chamenhu@zhongnanhai.com.cn

回复: 关于十八大内参!

Congratulations! I'm really excited to celebrate with you all. Thanks for...

12
商店 6

作者：michael_angiulo

I just saw Thor last night. It was awesome! I think you'd love it.

RT @julie_green

Tweet@rama

砖块中使用子 class

砖块中可以使用的子 class 包括: .icon, .image, .image-set, .image-slider.

Subclass .icon
Subclass .image
Subclass .image-set
Subclass .image-slider
  1.     <div class="tile">
  2.         <div class="tile-content icon(image)">
  3.             <img />
  4.         </div>
  5.     </div>
  6.     ------------
  7.     <div class="tile">
  8.         <div class="tile-content image-set">
  9.             <img />
  10.             <img />
  11.           <img />
  12.           <img />
  13.           <img />
  14.         </div>
  15.     </div>
  16.     ------------
  17.     <div class="tile" data-role="image-slider">
  18.         <div class="tile-content image image-slider">
  19.             <img />
  20.             ...
  21.             <img />
  22.         </div>
  23.     </div>

图片跑马灯效果必须在页面顶部引用 tile-image-slider.js.

砖块状态

砖块状态可以使用子 class .brand 或者 .tile-status. 可以使用 classes .bg-color-* 来改变它的背景颜色

  1.     <div class="tile">
  2.         <div class="brand">
  3.             ...status content here...
  4.         </div>
  5.     </div>

砖块状态 > 徽章

你可以使用数字1-99，或者任何图标。它会显示在砖块的右小角。 Metro UI CSS 支持主要的 Windows 8 徽章，包括: activity, alert, available, away, busy, newMessage, paused, playing, unavailable, error and attention 。默认背景颜色为蓝色，你可以使用class .bg-color-* 来改变背景颜色。 

  1.     <div class="tile">
  2.         <div class="brand">
  3.             <div class="badge activity"></div>
  4.         </div>
  5.     </div>
99

砖块状态 > 品牌信息

品牌信息可以用来显示品牌名称或者图标，它会显示在砖块的左下角。 

  1.     <div class="tile">
  2.         <div class="brand">
  3.             <div class="name">Name</div>
  4.         </div>
  5.     </div>
  6.  
  7.     <div class="tile">
  8.         <div class="brand">
  9.             <div class="icon"> <img /> </div>
  10.         </div>
  11.     </div>
10
Mail
12
Photos

使用h Metro UI CSS 构建出的砖块示例

10
Mail
Video
Pictures
5
Calendar
Store 6
Music

michael_angiulo

I just saw Thor last night. It was awesome! I think you'd love it.

RT @julie_green

Tweet@rama
YouTube
Excel 2013

mattberg@live.com

Re: Wedding Annoucement!

Congratulations! I'm really excited to celebrate with you all. Thanks for...

12

This is a desert eagle. He is very hungry and angry bird.

10
Photos
Internet Explorer

菜单示例

九大长老

子菜单点击切换需要使用 dropdown javascript 插件.

导航条

沦陷区
  1.     <div class="navigation-bar">
  2.         <div class="navigation-bar-inner">
  3.             <div class="brand">
  4.                 <span class="name">Project Name</span>
  5.             </div>
  6.  
  7.             <ul class="place-right">
  8.                 <li data-role="dropdown" class="sub-menu">
  9.                     <a>Right Menu</a>
  10.                     <ul class="dropdown-menu place-right">
  11.                         <li><a href="#">SubItem</a></li>
  12.                         ...
  13.                         <li><a href="#">SubItem</a></li>
  14.                     </ul>
  15.                 </li>
  16.             </ul>
  17.  
  18.             <ul>
  19.                 <li data-role="dropdown" class="sub-menu">
  20.                     <a href="#">Item 1</a>
  21.                     <ul class="dropdown-menu">
  22.                         <li><a href="#">SubItem</a></li>
  23.                         ...
  24.                         <li><a href="#">SubItem</a></li>
  25.                     </ul>
  26.                 </li>
  27.                 <li><a /></li>
  28.                 <li class="divider"></li>
  29.                 <li><a /></li>
  30.             </ul>
  31.         </div>
  32.     </div>

水平菜单


  1.     <div class="horizontal-menu">
  2.         <ul>
  3.             <li><a href="#">ItemName</a></li>
  4.             ...
  5.             <li><a href="#">ItemName</a></li>
  6.         </ul>
  7.     </div>

水平菜单中使用子菜单


  1.     <div class="horizontal-menu">
  2.         <ul>
  3.             <li class="sub-menu"><a href="#">ItemName</a>
  4.                 <ul>
  5.                     <li><a href="#">ItemName</a></li>
  6.                     ...
  7.                     <li><a href="#">ItemName</a></li>
  8.                 </ul>
  9.             </li>
  10.             ...
  11.             <li><a href="#">ItemName</a></li>
  12.         </ul>
  13.     </div>

侧边栏示例

前提

首要必须创建一个拥有 sidebar 的布局 

  1.     <div class="page [secondary] with-sidebar">
  2.         <div class="page-header" />
  3.  
  4.         <div class="page-sidebar" />
  5.  
  6.         <div class="page-region" />
  7.     </div>

侧边栏

定义侧边栏使用 <ul /> 

  1.     <div class="page-sidebar">
  2.         <ul>
  3.             <li><a>Item</a></li>
  4.             ...
  5.             <li><a>Item</a></li>
  6.         </ul>
  7.     </div>

图标

可以为条目添加 class icon-* 来显示图标。 

  1.     <div class="page-sidebar">
  2.         <ul>
  3.             <li><a><i class="icon-cube"></i>Item</a></li>
  4.             ...
  5.         </ul>
  6.     </div>

彩色

使用 class sticker 为条目添加彩色标签. 

  1.     <div class="page-sidebar">
  2.         <ul>
  3.             <li class="sticker"><a>Item</a></li>
  4.             ...
  5.         </ul>
  6.     </div>

彩色标签使用前缀 sticker-. 例如: sticker-color-blue 

  1.     <div class="page-sidebar">
  2.         <ul>
  3.             <li class="sticker sticker-color-blue"><a>Item</a></li>
  4.             ...
  5.         </ul>
  6.     </div>

二级菜单

可以在侧边栏创建二级菜单. 

  1.     <div class="page-sidebar">
  2.         <ul>
  3.             <li>
  4.                 <a>Item</a>
  5.                 <ul class="sub-menu">
  6.                 ...
  7.                 </ul>
  8.             </li>
  9.             ...
  10.         </ul>
  11.     </div>

二级下拉菜单

你也可以为二级菜单创建 dropdown 按钮。 

  1.     <div class="page-sidebar">
  2.         <ul>
  3.             <li data-role="dropdown">
  4.                 <a>Item</a>
  5.                 <ul class="sub-menu sidebar-dropdown-menu">
  6.                 ...
  7.                 </ul>
  8.             </li>
  9.             ...
  10.         </ul>
  11.     </div>

使用下拉按钮必须在 head中引入 dropdown.js。

淡色二级菜单

你可以使用 class light 来创建淡色二级菜单。 

  1.     <div class="page-sidebar">
  2.         <ul>
  3.             <li>
  4.                 <a>Item</a>
  5.                 <ul class="sub-menu light">
  6.                 ...
  7.                 </ul>
  8.             </li>
  9.             ...
  10.         </ul>
  11.     </div>

标签页示例

新华日报语录1

由于各个国家的歷史發展、社会状况等具体条件的不同，他们各自所实行的民主政治，可能在形式和内容上，都存在着多少差异。但无论如何，它们之间有一个基本点是相同的，那就是政权为人民所握有，为人民所运用，而且为着人民的幸福和利益而服务。这样的政权必然尊重和保障人民的自.由权利；使失掉自由权利的人民重新获得自由权利；没有失掉自.由权利的充分享有自.由权利；特别是言论、出版、机会、结社，这些作为实行民主政治的基本条件的人民的最低限度的自由权利，是必须切实而充分地加以保障的。

组件示例

  1.     <div class="page-control" data-role="page-control">
  2.         === Tabs ===
  3.         <ul>
  4.             <li class="active"><a href="#frame1">Frame1</a></li>
  5.             ...
  6.             <li><a href="#frameN">FrameN</a></li>
  7.         </ul>
  8.         === Tabs content ===
  9.         <div class="frames">
  10.             <div class="frame active" id="frame1"> ...frame content... </div>
  11.             ...
  12.             <div class="frame" id="frameN"> ...frame content... </div>
  13.         </div>
  14.     </div>

Javascript

使用时必须在head中引用 pagecontrol.js

手风琴示例

手风琴

  • frame 1

    frame 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta condimentum sem sed commodo.
  • frame 2

    frame 2

    Curabitur porta condimentum sem sed commodo. Praesent vestibulum, libero eget lacinia pretium, metus augue dapibus odio, nec placerat mauris justo non ante.
  • frame 3

    frame 3

    Maecenas adipiscing nulla sed sem molestie quis pulvinar lectus convallis. Nam tortor arcu, gravida nec tristique sit amet, pretium sagittis eros. Curabitur at nisi ut ligula ornare euismod.
  • frame 4

    frame 4

    Ut vitae tortor eget elit dictum dictum. Ut porttitor, ante non blandit gravida, felis risus feugiat neque, eu tincidunt neque ante at urna. Maecenas nec felis nulla.

手风琴 灰色效果

  • frame 1

    frame 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta condimentum sem sed commodo.
  • frame 2

    frame 2

    Curabitur porta condimentum sem sed commodo. Praesent vestibulum, libero eget lacinia pretium, metus augue dapibus odio, nec placerat mauris justo non ante.
  • frame 3

    frame 3

    Maecenas adipiscing nulla sed sem molestie quis pulvinar lectus convallis. Nam tortor arcu, gravida nec tristique sit amet, pretium sagittis eros. Curabitur at nisi ut ligula ornare euismod.
  • frame 4

    frame 4

    Ut vitae tortor eget elit dictum dictum. Ut porttitor, ante non blandit gravida, felis risus feugiat neque, eu tincidunt neque ante at urna. Maecenas nec felis nulla.

组件使用示例

  1.     <ul class="accordion" data-role="accordion">
  2.         <li class="active">
  3.             <a href="#"> Caption </a>
  4.             <div> ...content... </div>
  5.         </li>
  6.         ...
  7.         <li>
  8.             <a href="#"> Caption </a>
  9.             <div> ...content... </div>
  10.         </li>
  11.     </ul>
  12.     ==== Dark ===
  13.     <ul class="accordion dark" data-role="accordion">
  14.         ...
  15.     </ul>

Javascript

在head中引用 accordion.js

按钮组示例

按钮组

组件使用示例

  1.     <div class="button-set" data-role="button-set">
  2.         <button class="active"> ... </button>
  3.         <button> ... </button>
  4.     </div>
  5.     ------------
  6.     <div class="button-set" data-role="button-set">
  7.         <button class="tool-button active"> ... </button>
  8.         <button class="tool-button"> ... </button>
  9.     </div>

Javascript

要使用按钮组须在head中引用 buttonset.js

评分示例

大星标

静态


  1.     <div class="static-rating">
  2.         <div class="rating-value" style="width: 70%"></div>
  3.     </div>

静态 小星标


  1.     <div class="static-rating">
  2.         <div class="rating-value" style="width: 70%"></div>
  3.     </div>

评分


  1.     <div class="rating" data-role="rating" data-rating="2">
  2.         <a href="#"></a>
  3.         <a href="#"></a>
  4.         <a href="#"></a>
  5.         <a href="#"></a>
  6.         <a href="#"></a>
  7.     </div>

评分 小星标


  1.     <div class="rating small" data-role="rating" data-rating="4">
  2.         <a href="#"></a>
  3.         <a href="#"></a>
  4.         <a href="#"></a>
  5.         <a href="#"></a>
  6.         <a href="#"></a>
  7.     </div>

使用评分组件必须在head中引入 rating.js。

进度条示例

进度条

  1.     <div class="progress-bar">
  2.         <div class="bar" style="width: 75%"></div>
  3.     </div>

彩色进度条



  1.     <div class="progress-bar">
  2.         <div class="bar bg-color-*" style="width: 75%"></div>
  3.     </div>

使用不同颜色来分段进度条

  1.     <div class="progress-bar">
  2.         <div class="bar bg-color-pink" style="width: 30%"></div>
  3.         <div class="bar bg-color-yellow" style="width: 30%"></div>
  4.         <div class="bar bg-color-green" style="width: 40%"></div>
  5.     </div>

提醒 示例

回复

  • 01.01.2012
    影帝
    做影帝真太妈累，还好马上就要结束了。马上就要登船了！
  • 01.01.2012
    奥巴马
    低价出售诺亚方舟船票，10亿美金起。详询美国白宫特勤部 （10001）- 911
  1.     <ul class="replies">
  2.         <li class="bg-color-*">
  3.             <div class="avatar"><img/></div>
  4.             <div class="reply">
  5.                 <div class="date">...</div>
  6.                 <div class="author">...</div>
  7.                 <div class="text">...</div>
  8.             </div>
  9.         </li>
  10.     </ul>
  11.     =========================================================
  12.     <div class="replies">
  13.         <div class="bg-color-*">
  14.             <div class="avatar"><img/></div>
  15.             <div class="reply">
  16.                 <div class="date">...</div>
  17.                 <div class="author">...</div>
  18.                 <div class="text">...</div>
  19.             </div>
  20.         </div>
  21.     </div>

带箭头的回复

  • 01.01.2012
    涛哥
    小马啊，搞完十八大就没我啥事了，我去台湾转转，你给安排一下？
  • 01.01.2012
    小马
    没问题。还有我最近刚申请了个QQ，号码是十一位的，你帮忙给我弄个短的，我和祖国人民聊聊天。
  1.     <ul class="replies">
  2.         <li class="bg-color-*">
  3.             <b class="sticker sticker-left(right) sticker-color-*"></b>
  4.             <div class="avatar"><img/></div>
  5.             <div class="reply">
  6.                 <div class="date">...</div>
  7.                 <div class="author">...</div>
  8.                 <div class="text">...</div>
  9.             </div>
  10.         </li>
  11.     </ul>

提醒

授权通过！
欢迎进入星际之门的世界！
保护伞中国分公司
给你的电脑360度防护!
  1.     <div class="notices">
  2.         <div class="bg-color-*">
  3.             <a href="#" class="close"></a>
  4.             <div class="notice-icon"> <img/> </div>
  5.             <div class="notice-image"> <img/> </div>
  6.             <div class="notice-header"> ... </div>
  7.             <div class="notice-text"> ... </div>
  8.         </div>
  9.     </div>

2012, Metro UI CSS © by Sergey Pimenov