https://github.com/stubbornella/oocss
core/template
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="page"> <div class="head"> </div> <div class="body"> <div class="leftCol"></div> <div class="rightCol"></div> <div class="main"></div> </div> <div class="foot"> </div> </div> </body> </html>
core/grid
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="line"> <div class="unit size1of5"></div> <div class="unit size1of5"></div> <div class="unit size1of5"></div> <div class="unit size1of5"></div> <div class="unit size1of5 lastUnit"></div> </div> </body> </html>
core/module
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="mod"> <b class="top"> <b class="tl"></b> <b class="tr"></b> </b> <div class="inner"> <div class="hd"></div> <div class="bd"></div> </div> <b class="bottom"> <b class="bl"></b> <b class="br"></b> </b> </div> </body> </html>
plugins/tabs
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="mod tabs tabPosTop"> <b class="top"> <b class="tl"></b> <b class="tr"></b> </b> <div class="inner"> <div class="hd"> <ul class="tabControl"> <li class="current"><a href=""><span>Tab 1</span></a></li> <li><a href=""><span>Tab 2</span></a></li> <li><a href=""><span>Tab 3</span></a></li> <li><a href=""><span>Tab 4</span></a></li> </ul> <ul class="controls"> <li><a href=""><span>x</span></a></li> <li><a href=""><span>-</span></a></li> <li><a href=""><span>+</span></a></li> </ul> </div> <div class="bd"> <ul> <li class="current">Tab 1 Content</li> <li>Tab 2 Content</li> <li>Tab 3 Content</li> <li>Tab 4 Content</li> </ul> </div> </div> <b class="bottom"> <b class="bl"></b> <b class="br"></b> </b> </div> <div class="mod tabs tabPosBottom"> <b class="top"> <b class="tl"></b> <b class="tr"></b> </b> <div class="inner"> <div class="bd"> <ul> <li class="current">Tab 1 Content</li> <li>Tab 2 Content</li> <li>Tab 3 Content</li> <li>Tab 4 Content</li> </ul> </div> <div class="hd"> <ul class="tabControl"> <li class="current"><a href=""><span>Tab 1</span></a></li> <li><a href=""><span>Tab 2</span></a></li> <li><a href=""><span>Tab 3</span></a></li> <li><a href=""><span>Tab 4</span></a></li> </ul> <ul class="controls"> <li><a href=""><span>x</span></a></li> <li><a href=""><span>-</span></a></li> <li><a href=""><span>+</span></a></li> </ul> </div> </div> <b class="bottom"> <b class="bl"></b> <b class="br"></b> </b> </div> </body> </html>