CKCSS

CKCSS is an Object-Oriented CSS Framework, created by CheckZhang.

Support browser: IE8+ Chrome Firfox Safari and Opara,CSS:3.0+, Current version: 1.0.0.0 download css from here

It is just style framework,no any javascript.

It's file size just 6kb.

Download All From GitHub:https://github.com/CheckZhang/ckcss

How to name a CSS Class in Object-Oriented CKCSS?

In CKCSS, we use below way for Naming:
parentClass.pc_childClass
pc-childDom
ID Element
<style> .parentClass{ background: #ff0000; height:160px; padding: 20px;; } .parentClass.pc_childClass{ background: #b9ff5c; } .parentClass>.pc-childDom{ background: #67b1d3; height: 60px; color:white; } #DomId{ background: #ffde2d; } </style> <div class="parentClass pc_childClass"> parentClass.pc_childClass <div class="pc-childDom"> pc-childDom </div> <div id="DomId"> ID Element </div> </div>

How to get Object-Oriented CSS in CKCSS?

normal button submit button cancle button
CSS file: /** base class **/ .button{ background:#f6f6f6 ; ... } /** Child class inherited from base class **/ .button.bt_submit{ background:#00a200; ... } /** another Child class inherited from base class **/ .button.bt_cancle{ background:#2694be ; ... } HTML file: <div> <span class="button">normal button</span> <span class="button bt_submit">submit button</span> <span class="button bt_cancle">cancle button</span> </div> overwrite all button in a special area:
normal button submit button cancle button
CSS file: /** overwrite base class **/ .someArea .button{ font-size:14px; } HTML file: <div class="someArea"> <span class="button">normal button</span> <span class="button bt_submit">submit button</span> <span class="button bt_cancle">cancle button</span> </div> There is another ways to get Class Inheriting ,but it is not recommend by CKCSS:click to see
The code below not recommend in CKCSS:
css file:
CSS file: /** Tip: below is not recommend in CKCSS **/ /** base class **/ .button,.button_submit,.button_cancel{ background:#f6f6f6 ; ... } /** Child class inherited from base class **/ .button_submit{ background:#00a200; ... } /** another Child class inherited from base class **/ .button_cancle{ background:#2694be ; ... } /** overwrite base class in some area ,you need to change whole Inherited Class Tree but not by Base Class directly, it's difficute and not intuitionistic, especialy do width big tree, for example icon tree; **/ .someArea .button, .someArea .button_submit, .someArea .button_cancel{ font-size:14px; } HTML file:<br/> <span class="button">normal button</span> <span class="button_submit">submit button</span><br/> <span class="button_cancle">cancle button</span>

CKCSS Alignment

1) Horizontal Alignment

Horizontal align in a Fixed Area:
left:
span
div
center:
span
div
right:
span
div
<div class="example fixedAreas blueBgs middles mls"> <div class="lefts"> left:<br/> <span class="yellowBg">span</span> <div class="yellowBg">div</div> </div><div class="centers"> center:<br/> <span class="greenBg">span</span> <div class="greenBg">div</div> </div><div class="rights"> right:<br/> <span class="redBg">span</span> <div class="redBg">div</div> </div> </div>
Horizontal align in Stretching Area:
left
span1span2span3...
div1
div2
div3
...
center
span1span2span3span4and more...
div
right
span1span2span3...
div
<div class="example blueBgs inlineMiddles mls"> <div class="lefts v100"> left<br/> <span class="yellowBg">span1</span><span class="greenBg">span2</span><span class="blueBg">span3</span><span class="grayBg">...</span> <div class="yellowBg">div1</div> <div class="blueBg">div2</div> <div class="greenBg">div3</div> <div class="grayBgBg">...</div> </div><div class="centers v100"> center<br/> <span class="yellowBg">span1</span><span class="greenBg">span2</span><span class="blueBg">span3</span><span class="grayBg">span4</span><span class="greenBg">and more...</span> <div class="greenBg">div</div> </div><div class="rights v100"> right<br/> <span class="yellowBg">span1</span><span class="greenBg">span2</span><span class="blueBg">span3</span><span class="grayBg">...</span> <div class="redBg">div</div> </div> </div>

Horizontal align in Justify Layout:

left span
div1
div2
...
center span
div
right span
div
<div class="example"> <div class="justifies mls middles"> <div class="h33 lefts"> <div class="jf-bg greenBg"></div> <span>left</span> <span class="yellowBg">span</span> <div class="yellowBg">div1</div> <div class="blueBg">div2</div> <div class="greenBg">...</div> </div> <div class="h34 centers"> <div class="jf-bg blueBg"></div> <span>center</span> <span class="greenBg">span</span> <div class="greenBg">div</div> </div> <div class="h33 rights"> <div class="jf-bg grayBg"></div> <span>right</span> <span class="yellowBg">span</span> <div class="redBg">div</div> </div> </div> </div>

Align all children of Justifies,eg:centers

center span
div1
div2
...
center span
div
center span
div
<div class="example"> <div class="justifies mls middles centers"> <div class="h33"> <div class="jf-bg greenBg"></div> <span>center</span> <span class="yellowBg">span</span> <div class="yellowBg">div1</div> <div class="blueBg">div2</div> <div class="greenBg">...</div> </div> <div class="h34"> <div class="jf-bg blueBg"></div> <span>center</span> <span class="greenBg">span</span> <div class="greenBg">div</div> </div> <div class="h33"> <div class="jf-bg grayBg"></div> <span>center</span> <span class="yellowBg">span</span> <div class="redBg">div</div> </div> </div> </div>

2) Vertical Alignment

Vertical align in Fixed Area:

top span
div
middle span
div
bottom span
div
<div class="example inlineMiddles mls"> <div class="fixedArea centers inlineTops blueBg"> <div class="h100"> <span>top</span> <span class="greenBg">span</span> <div class="redBg">div</div> </div><div> </div> </div><div class="fixedArea centers inlineMiddles yellowBg"> <div class="h100"> <span>middle</span> <span class="greenBg">span</span> <div class="redBg">div</div> </div> </div><div class="fixedArea centers inlineBottoms grayBg"> <div class="h100"> <span>bottom</span> <span class="blueBg">span</span> <div class="redBg">div</div> </div> </div> </div>

Vertical align in Stretching Area:

middlespan1span2...
div
div
div
div
...
middlespan...
div
...
middlespan...
div
...
<div class="example inlineMiddles mls"> <div class="fixedArea centers inlineTops blueBg"> <div class="h100"> <span>top</span> <span class="greenBg">span</span> <div class="redBg">div</div> </div> </div><div class="fixedArea centers inlineMiddles yellowBg"> <div class="h100"> <span>middle</span> <span class="greenBg">span</span> <div class="redBg">div</div> </div> </div><div class="fixedArea centers inlineBottoms grayBg"> <div class="h100"> <span>bottom</span> <span class="blueBg">span</span> <div class="redBg">div</div> </div> </div> </div>

Vertical align in Justify Layout with Fixed Height:

top span
div
middle span
div
bottom span
div
<div class="example fixedAreaV justifies centers mls"> <div class="h33 top"> <div class="jf-bg blueBg"></div> <span>top</span> <span class="greenBg">span</span> <div class="redBg">div</div> </div><div class="h34 middle"> <div class="jf-bg yellowBg"></div> <span>middle</span> <span class="greenBg">span</span> <div class="redBg">div</div> </div><div class="h33 bottom"> <div class="jf-bg grayBg"></div> <span>bottom</span> <span class="blueBg">span</span> <div class="redBg">div</div> </div> </div>

Vertical align in Justify Layout with Stretching Height:

The heightest column span
div1
div2
div3
...
top span
div
middle span
div
bottom span
div
<div class="example justifies centers mls"> <div class="h25 top"> <div class="jf-bg grayBg"></div> <span>The heightest column</span> <span class="greenBg">span</span> <div class="redBg">div1</div> <div class="blueBg">div2</div> <div class="redBg">div3</div> <div class="yellowBg">...</div> </div> <div class="h25 top"> <div class="jf-bg blueBg"></div> <span>top</span> <span class="greenBg">span</span> <div class="redBg">div</div> </div> <div class="h25 middle"> <div class="jf-bg yellowBg"></div> <span>middle</span> <span class="greenBg">span</span> <div class="redBg">div</div> </div><div class="h25 bottom"> <div class="jf-bg grayBg"></div> <span>bottom</span> <span class="blueBg">span</span> <div class="redBg">div</div> </div> </div>

Align all children of Justifies,eg:middle

middles span
div
middles span
div
middles span
div
<div class="example fixedAreaV justifies centers middles mls"> <div class="h33 v100"> <div class="jf-bg blueBg"></div> <span>middles</span> <span class="greenBg">span</span> <div class="redBg">div</div> </div><div class="h34 v100"> <div class="jf-bg yellowBg"></div> <span>middles</span> <span class="greenBg">span</span> <div class="redBg">div</div> </div><div class="h33 v100"> <div class="jf-bg grayBg"></div> <span>middles</span> <span class="blueBg">span</span> <div class="redBg">div</div> </div> </div>

CKCSS Layout

1) Justifying Layout:

CKCSS Justifying Layout, allow to set any percent value from 1 to 100, it is easy and flexible;
2Column(h50) span
div
2Column(h50)
3Column(h33)
3Column(h34)
3Column(h33)
4Column(h25)
4Column(h25)
4Column(h25)
4Column(h25)
5Column(h20)
5Column(h20)
5Column(h20)
5Column(h20)
5Column(h20)
This is 37%
This is 63%
This is 100% relative to parent
This is 38% relative to parent again
This is 62% relative to parent again
This is 50%
<div class="example mts"> <div class="justifies centers middles" > <div class="h50 redBg"> 2Column(h50) <span class="greenBg">span</span> <div class="greenBg">div</div> </div> <div class="h50 blueBg">2Column(h50)</div> </div> <div class="justifies centers" > <div class="h33 yellowBg">3Column(h33)</div> <div class="h34 greenBg">3Column(h34)</div> <div class="h33 yellowBg">3Column(h33)</div> </div> <div class="justifies centers" > <div class="h25 redBg">4Column(h25)</div> <div class="h25 blueBg">4Column(h25)</div> <div class="h25 redBg">4Column(h25)</div> <div class="h25 blueBg">4Column(h25)</div> </div> <div class="justifies centers" > <div class="h20 yellowBg">5Column(h20)</div> <div class="h20 greenBg">5Column(h20)</div> <div class="h20 yellowBg">5Column(h20)</div> <div class="h20 greenBg">5Column(h20)</div> <div class="h20 yellowBg">5Column(h20)</div> </div> <div class="justifies centers" > <div class="h37 redBg">This is 37%</div> <div class="h63 blueBg">This is 63%</div> </div> <div class="justifies centers middles" > <div class="h50 blueBg"> <div class="h100 grayBg">This is 100% relative to parent</div> <div class="h100 justifies middles"> <div class="h38 greenBg">This is 38% relative to parent again</div> <div class="h62 redBg">This is 62% relative to parent again</div> </div> </div> <div class="h50 greenBg">This is 50% </div> </div> </div>

2) Justify Layout with space:

2Column(h50)span
div
2Column(h50)
3Column(h33)
3Column(h34)
3Column(h33)
4Column(h25)
4Column(h25)
4Column(h25)
4Column(h25)
5Column(h20)
5Column(h20)
5Column(h20)
5Column(h20)
5Column(h20)
This is 37%
This is 63%
This is 100% relative to parent
This is 38% relative to parent again
This is 62% relative to parent again
This is 50%
<div class="example mts"> <div class="justifies centers mls middles" > <div class="h50"><div class="jf-bg redBg"></div> <div> 2Column(h50)<span class="greenBg">span</span> <div class="greenBg">div</div> </div> </div> <div class="h50"><div class="jf-bg blueBg"></div><div>2Column(h50)</div></div> </div> <div class="justifies centers mls"> <div class="h33"> <div class="jf-bg yellowBg"></div> <div>3Column(h33)</div> </div> <div class="h34"> <div class="jf-bg greenBg"></div> <div>3Column(h34)</div> </div> <div class="h33"> <div class="jf-bg yellowBg"></div> <div>3Column(h33)</div> </div> </div> <div class="justifies centers mls"> <div class="h25"> <div class="jf-bg redBg"></div> <div>4Column(h25)</div> </div> <div class="h25"> <div class="jf-bg blueBg"></div> <div>4Column(h25)</div> </div> <div class="h25"> <div class="jf-bg redBg"></div> <div>4Column(h25)</div> </div> <div class="h25"> <div class="jf-bg blueBg"></div> <div>4Column(h25)</div> </div> </div> <div class="justifies centers mls"> <div class="h20"> <div class="jf-bg yellowBg"></div> <div>5Column(h20)</div> </div> <div class="h20"> <div class="jf-bg greenBg"></div> <div>5Column(h20)</div> </div> <div class="h20"> <div class="jf-bg yellowBg"></div> <div>5Column(h20)</div> </div> <div class="h20"> <div class="jf-bg greenBg"></div> <div>5Column(h20)</div> </div> <div class="h20"> <div class="jf-bg yellowBg"></div> <div>5Column(h20)</div> </div> </div> <div class="justifies centers mls"> <div class="h37"> <div class="jf-bg redBg"></div> <div>This is 37%</div> </div> <div class="h63"> <div class="jf-bg blueBg"></div> <div>This is 63%</div> </div> </div> <div class="justifies centers middles mls"> <div class="h50"> <div class="h100"> <div class="jf-bg grayBg"></div> <div>This is 100% relative to parent</div> </div> <div class="h100 justifies middles mls"> <div class="h38"> <div class="jf-bg greenBg"></div> <div>This is 38% relative to parent again</div> </div> <div class="h62"> <div class="jf-bg redBg"></div> <div>This is 62% relative to parent again</div> </div> </div> </div> <div class="h50"> <div class="jf-bg greenBg"></div> <div>This is 50%</div> </div> </div> </div>

3) Justifying Layout With Fixed Slide:

To use justifying layout with fixed slide;

Left Column Fixed:

150px(jf-fixed)
Justified content
<div class="justifies fixedAreaV middles centers"> <div class="jf-fixed redBg"> 150px(jf-fixed) </div> <div class="blueBg"> Justified content </div> </div>

Right Column Fixed:

Justified content
150px(jf-fixed)
<div class="justifies fixedAreaV middles centers"> <div class="blueBg">Justified content</div> <div class="jf-fixed redBg">150px(jf-fixed)</div> </div>

Center Column Fixed:

Justified content
150px(jf-fixed)
Justified content
<div class="justifies fixedAreaV middles centers"> <div class="blueBg">Justified content</div> <div class="jf-fixed redBg">150px(jf-fixed)</div> </div>

Left and Right Column Fixed:

150px(jf-fixed)
Justified content
150px(jf-fixed)
<div class="justifies fixedAreaV middles centers"> <div class="jf-fixed redBg">150px(jf-fixed)</div> <div class="blueBg">Justified content</div> <div class="jf-fixed redBg">150px(jf-fixed)</div> </div>

You can put any number Fixed Column and at any Comlumn:

150px(jf-fixed)
150px(jf-fixed)
Justified content
150px(jf-fixed)
...
<div class="justifies fixedAreaV middles centers"> <div class="jf-fixed redBg">150px(jf-fixed)</div> <div class="jf-fixed yellowBg">150px(jf-fixed)</div> <div class="blueBg">Justified content</div> <div class="jf-fixed redBg">150px(jf-fixed)</div> <div class="blueBg">...</div> </div>

Fixed Column with space:

150px(jf-fixed)
150px(jf-fixed)
Justified content
150px(jf-fixed)
...
<div class="justifies fixedAreaV middles centers"> <div class="jf-fixed redBg">150px(jf-fixed)</div> <div class="jf-fixed yellowBg">150px(jf-fixed)</div> <div class="blueBg">Justified content</div> <div class="jf-fixed redBg">150px(jf-fixed)</div> <div class="blueBg">...</div> </div>

Mostly, you need to overwrite the width value of slide in your page:

200px(jf-fixed)
Justified content
240px(jf-fixed)
CSS: .somePage.justifies>.jf-left{ width:200px; } .somePage.justifies>.jf-right{ width:240px; } HTML: <div class="example fixedAreaV justifies middles centers somePage"> <div class="jf-left redBg">200px(jf-fixed)</div> <div class="blueBg">Justified content</div> <div class="jf-right redBg">240px(jf-fixed)</div> </div>

4) Form Layout

Form Layout is one of Justify Layout:

Label:
Label:
<div class="justifies"> <div class="h50 justifies middles"> <div class="jf-fixed right"> Label: </div><div class="h100"> <input type="text" class="textInput" value="Value"/> </div> </div> <div class="h50 justifies middles"> <div class="jf-fixed right"> Label: </div><div class="h100"> <input type="text" class="textInput" value="Value"/> </div> </div> </div>

You can also use below CSS for Form Layout:

Label:
Label:
<div class="form"> <div class="fm-group h50"> <div class="fm-label">Label:</div> <div class="fm-value"> <input type="text" class="textInput" value="Value"/> </div> </div> <div class="fm-group h50"> <div class="fm-label">Label:</div> <div class="fm-value"> <input type="text" class="textInput" value="Value"/> </div> </div> </div>

CKCSS Popup Window

popup window
<div class="popupWin inlineMiddles"> <div class="pw-win"> <div class="pw-close">X</div> <div class="pw-title pdSm">title</div> <div class="pw-content pd"> content </div> </div> </div>
X
title
content