Merge pull request #1 from PhilippeVay/master
Test (from github.com graphical interface)
This commit is contained in:
commit
6d96aa5c2c
2 changed files with 39 additions and 39 deletions
|
@ -4,7 +4,7 @@ http://www.knacss.com
|
||||||
|
|
||||||
KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects.
|
KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects.
|
||||||
|
|
||||||
Designed by Alsacreations agency and used on a daily basis in production, KNACSS is not only a lightweight documented framework but also a CSS reset, adapted to every project no matter its size.
|
Designed by [Alsacreations agency](http://alsacreations.fr) and used on a daily basis in production, KNACSS is not only a lightweight documented framework but also a CSS reset, adapted to every project no matter its size.
|
||||||
|
|
||||||
It handles basic elements, box sizing, margins, floats, simple and complex aligns, positioning, layout grids, gutters, old IE fallbacks and last but not least responsiveness, everything automagically !
|
It handles basic elements, box sizing, margins, floats, simple and complex aligns, positioning, layout grids, gutters, old IE fallbacks and last but not least responsiveness, everything automagically !
|
||||||
|
|
||||||
|
@ -17,7 +17,7 @@ There is nothing to install. It is only a CSS file you can call as usual in the
|
||||||
Usage
|
Usage
|
||||||
-----
|
-----
|
||||||
KNACSS is a collection of ready to use styles and snippets to kick start your project. Feel free to use it as a “reset”, then make it grow to suit your needs.
|
KNACSS is a collection of ready to use styles and snippets to kick start your project. Feel free to use it as a “reset”, then make it grow to suit your needs.
|
||||||
Take the time to read the documentation before jumping in. Indeed, KNACSS doesn’t always suit beginners’ needs since a little things can have big consequences.
|
Take the time to read the documentation before jumping in. Indeed, KNACSS doesn’t always suit beginners’ needs since a little thing can have big consequences.
|
||||||
|
|
||||||
Useful links
|
Useful links
|
||||||
------------
|
------------
|
||||||
|
|
74
knacss.css
74
knacss.css
|
@ -20,7 +20,7 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* font-sizing for content */
|
/* font-sizing for content */
|
||||||
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
|
/* preserves vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
|
||||||
p,
|
p,
|
||||||
ul,
|
ul,
|
||||||
ol,
|
ol,
|
||||||
|
@ -172,10 +172,10 @@ img, table, td, blockquote, code, pre, textarea, input, video {
|
||||||
div, textarea, table, td, th, code, pre, samp {
|
div, textarea, table, td, th, code, pre, samp {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
-webkit-hyphens: auto;
|
-webkit-hyphens: auto;
|
||||||
-moz-hyphens: auto;
|
-moz-hyphens: auto;
|
||||||
-ms-hyphens: auto;
|
-ms-hyphens: auto;
|
||||||
-o-hyphens: auto;
|
-o-hyphens: auto;
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* pictures */
|
/* pictures */
|
||||||
|
@ -215,8 +215,8 @@ body > script {display: none !important;}
|
||||||
/* switching box model for all elements */
|
/* switching box model for all elements */
|
||||||
* {
|
* {
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* float layout */
|
/* float layout */
|
||||||
|
@ -262,56 +262,56 @@ body > script {display: none !important;}
|
||||||
|
|
||||||
/* flexbox layout */
|
/* flexbox layout */
|
||||||
.flex {
|
.flex {
|
||||||
display : -webkit-box;
|
display: -webkit-box;
|
||||||
display : -moz-box;
|
display: -moz-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display : -webkit-flex;
|
display: -webkit-flex;
|
||||||
display : flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.flex-h {
|
.flex-h {
|
||||||
-webkit-box-orient: horizontal;
|
-webkit-box-orient: horizontal;
|
||||||
-moz-box-orient: horizontal;
|
-moz-box-orient: horizontal;
|
||||||
-webkit-flex-direction: row;
|
-webkit-flex-direction: row;
|
||||||
-ms-flex-direction: row;
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
.flex-v {
|
.flex-v {
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
-moz-box-orient: vertical;
|
-moz-box-orient: vertical;
|
||||||
-webkit-flex-direction: column;
|
-webkit-flex-direction: column;
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.flex-fluid {
|
.flex-fluid {
|
||||||
-moz-box-flex: 1;
|
-moz-box-flex: 1;
|
||||||
-webkit-flex: 1;
|
-webkit-flex: 1;
|
||||||
-moz-flex: 1;
|
-moz-flex: 1;
|
||||||
-ms-flex: 1;
|
-ms-flex: 1;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.flex-start {
|
.flex-start {
|
||||||
-webkit-box-ordinal-group: -1;
|
-webkit-box-ordinal-group: -1;
|
||||||
-moz-box-ordinal-group: 0;
|
-moz-box-ordinal-group: 0;
|
||||||
-ms-flex-order : -1;
|
-ms-flex-order: -1;
|
||||||
-webkit-order : -1;
|
-webkit-order: -1;
|
||||||
-moz-order : -1;
|
-moz-order: -1;
|
||||||
order : -1;
|
order: -1;
|
||||||
}
|
}
|
||||||
.flex-mid {
|
.flex-mid {
|
||||||
-webkit-box-ordinal-group: 1;
|
-webkit-box-ordinal-group: 1;
|
||||||
-moz-box-ordinal-group: 1;
|
-moz-box-ordinal-group: 1;
|
||||||
-ms-flex-order : 1;
|
-ms-flex-order: 1;
|
||||||
-webkit-order : 1;
|
-webkit-order: 1;
|
||||||
-moz-order : 1;
|
-moz-order: 1;
|
||||||
order : 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
.flex-end {
|
.flex-end {
|
||||||
-webkit-box-ordinal-group: 42;
|
-webkit-box-ordinal-group: 42;
|
||||||
-moz-box-ordinal-group: 42;
|
-moz-box-ordinal-group: 42;
|
||||||
-ms-flex-order : 42;
|
-ms-flex-order: 42;
|
||||||
-webkit-order : 42;
|
-webkit-order: 42;
|
||||||
-moz-order : 42;
|
-moz-order: 42;
|
||||||
order : 42;
|
order: 42;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* alignments (blocks and inline) */
|
/* alignments (blocks and inline) */
|
||||||
|
@ -342,7 +342,7 @@ img.left, img.right {
|
||||||
.txtright { text-align: right; }
|
.txtright { text-align: right; }
|
||||||
.txtcenter { text-align: center; }
|
.txtcenter { text-align: center; }
|
||||||
|
|
||||||
/* blocks widths (percentage and pixels) */
|
/* blocks widths (percentages and pixels) */
|
||||||
.w10 { width: 10%; }
|
.w10 { width: 10%; }
|
||||||
.w20 { width: 20%; }
|
.w20 { width: 20%; }
|
||||||
.w25 { width: 25%; }
|
.w25 { width: 25%; }
|
||||||
|
@ -374,7 +374,7 @@ img.left, img.right {
|
||||||
/* spacing helpers
|
/* spacing helpers
|
||||||
p,m = padding,margin
|
p,m = padding,margin
|
||||||
a,t,r,b,l = all,top,right,bottom,left
|
a,t,r,b,l = all,top,right,bottom,left
|
||||||
s,m,l,n = small(10px),medium(20px),large(30px),none(0)
|
s,m,l,n,0 = small(10px),medium(20px),large(30px), zero or none(0)
|
||||||
source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
||||||
*/
|
*/
|
||||||
.m-reset, .ma0 { margin: 0 !important; }
|
.m-reset, .ma0 { margin: 0 !important; }
|
||||||
|
@ -473,7 +473,7 @@ textarea {
|
||||||
/* ==iefix */
|
/* ==iefix */
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
||||||
/* haslayout for IE6/IE7 */
|
/* hasLayout for IE6/IE7 */
|
||||||
.ie67 .clearfix,
|
.ie67 .clearfix,
|
||||||
.ie67 .line,
|
.ie67 .line,
|
||||||
.ie67 .mod,
|
.ie67 .mod,
|
||||||
|
@ -483,7 +483,7 @@ textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* inline-block and table-cell for IE6/IE7 */
|
/* inline-block and table-cell for IE6/IE7 */
|
||||||
/* warning: .col needs width on IE6/IE7 */
|
/* warning: .col needs a width on IE6/IE7 */
|
||||||
.ie67 .btn,
|
.ie67 .btn,
|
||||||
.ie67 .col,
|
.ie67 .col,
|
||||||
.ie67 .inbl {
|
.ie67 .inbl {
|
||||||
|
@ -532,4 +532,4 @@ textarea {
|
||||||
body {
|
body {
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue