navJs/tester at master · hicTech/navJs

History

Name		Name	Last commit message	Last commit date
parent directory ..
css		css
demos		demos
js		js
node_modules		node_modules
.gitignore		.gitignore
Gruntfile.js		Gruntfile.js
LICENSE.md		LICENSE.md
README.md		README.md
contentsTable.txt		contentsTable.txt
index.html		index.html
npm-debug.log		npm-debug.log
package.json		package.json

README.md

Robust, fast and cross browser layout scaffolding based on Flexbox

Demo 1 Demo 2 Demo 3 Demo 4 Mobile demo

Css Plus want to provide a simple and fast way to realize flexible layout based on flexbox modeling. This awesome css feature lets you specify a flexible container within which direct children can be also flexible and float as columns or rows.

More informations

Usage

Add this css file:

<link rel="stylesheet" href="source/flex_layout-0.1.css">

Done!

Whit css+ you can create flexible layout like this:

<div class="EXTENDER" style="background-color: rgba(0,0,0,0.15)">
    <div class="ROWS">
        <div class="ROW COLS CENTER" style="height: 50px">
            <div class="CELL" style="width: 90px">
                <div class="EXTENDER">
                    <div class="PADDER-CENTER">
                        <small>button</small>
                    </div>
                </div>
            </div>
            <div class="CELL" style="width: 90px">
                <div class="EXTENDER">
                    <div class="PADDER-CENTER">
                        <small>button</small>
                    </div>
                </div>
            </div>
            <div class="CELL" style="width: 90px">
                <div class="EXTENDER">
                    <div class="PADDER-CENTER">
                        <small>button</small>
                    </div>
                </div>
            </div>
            <div class="CELL" style="width: 90px">
                <div class="EXTENDER">
                    <div class="PADDER-CENTER">
                        <small>button</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="ROW-FLEX COLS" style="background-color: rgba(0,0,0,0.05)">
            <div class="CELL" style="width: 150px; background-color: rgba(0,0,0,0.05); font-size: 16px; color: #ffffff">
                <div class="EXTENDER">
                    <div class="ROWS">
                        <div class="CELL-FLEX">
                            <div class="EXTENDER">
                                <div class="PADDER-CENTER"><span >Menu 1</span></div>
                            </div>
                        </div>
                        <div class="CELL-FLEX">
                            <div class="EXTENDER">
                                <div class="PADDER-CENTER"><span>Menu 2</span></div>
                            </div>
                        </div>
                        <div class="CELL-FLEX">
                            <div class="EXTENDER">
                                <div class="PADDER-CENTER"><span>Menu 3</span></div>
                            </div>
                        </div>
                        <div class="CELL-FLEX">
                            <div class="EXTENDER">
                                <div class="PADDER-CENTER"><span>Menu 4</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="CELL-FLEX">
                <div class="EXTENDER">
                    <div class="PADDER15">... your stunning content ...</div>
                </div>
            </div>
        </div>
        <div class="ROW COLS END" style="height: 25px; color: #ffffff">
            <div class="CELL"> options </div>
            <div class="CELL" style="width: 30px; text-align: center"> | </div>
            <div class="CELL"> options </div>
            <div class="CELL" style="width: 30px; text-align: center"> | </div>
            <div class="CELL"> options </div>
            <div class="CELL" style="width: 30px; text-align: center"></div>
        </div>
    </div>
</div>