【OOCSS(stubbornella)】

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>

 

 

你可能感兴趣的:(stub)