dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean code

Browse source
This commit is contained in:
Simon Constans 2013-08-20 01:34:28 +02:00
parent 447c3910eb
commit f3b67e8a25
10 changed files with 1076 additions and 1050 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
css/flexbox.css
View file

@ -1,8 +1,6 @@
/* -----------------------------
flexbox classes
/* ----------------------------- */ ----------------------------- */
/* ==flexbox classes */
/* ----------------------------- */
/* flexbox layout context on container */ /* flexbox layout context on container */
.flex { .flex {
@ -12,6 +10,7 @@
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
} }
/* horizontal alignment */ /* horizontal alignment */
.flex-h { .flex-h {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
@ -20,6 +19,7 @@
-ms-flex-direction: row; -ms-flex-direction: row;
flex-direction: row; flex-direction: row;
} }
/* vertical alignment */ /* vertical alignment */
.flex-v { .flex-v {
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -28,6 +28,7 @@
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; flex-direction: column;
} }
/* for fluid items */ /* for fluid items */
.flex-fluid { .flex-fluid {
-moz-box-flex: 1; -moz-box-flex: 1;
@ -36,6 +37,7 @@
-ms-flex: 1; -ms-flex: 1;
flex: 1; flex: 1;
} }
/* for items that must appear first */ /* for items that must appear first */
.flex-start { .flex-start {
-webkit-box-ordinal-group: -1; -webkit-box-ordinal-group: -1;
@ -45,6 +47,7 @@
-moz-order: -1; -moz-order: -1;
order: -1; order: -1;
} }
/* for items that must appear middle */ /* for items that must appear middle */
.flex-mid { .flex-mid {
-webkit-box-ordinal-group: 1; -webkit-box-ordinal-group: 1;

14
css/forms.css
View file

@ -1,10 +1,12 @@
/* -----------------------------
Forms
-----------------------------
/* ----------------------------- */ thanks to :
/* ==forms */ * HTML5boilerplate
/* ----------------------------- */ * github.com/nathansmith/formalize
* www.sitepen.com
/* thanks to HTML5boilerplate, github.com/nathansmith/formalize and www.sitepen.com */ */
/* buttons */ /* buttons */
.btn { display: inline-block; } .btn { display: inline-block; }

18
css/grids.css
View file

@ -1,7 +1,6 @@
/* -----------------------------
/* ----------------------------- */ grids
/* ==grids */ ----------------------------- */
/* ----------------------------- */
/* equal grids with 2% gutter */ /* equal grids with 2% gutter */
[class^=grid]:after { [class^=grid]:after {
@ -27,15 +26,15 @@
.grid3-1 > *:first-child, .grid3-1 > *:first-child,
.grid1-3 > * + * { width: 74.5%; } .grid1-3 > * + * { width: 74.5%; }
/* ----------------------------- */
/* ==autogrids */ /* -----------------------------
/* ----------------------------- */ autogrids
----------------------------- */
/* auto-justified equal grids */ /* auto-justified equal grids */
[class*="autogrid"] { [class*="autogrid"] {
text-align: justify; text-align: justify;
font-size: 1px; letter-spacing: -1px; /* whitespace fi xpart 1 */ font-size: 1px; letter-spacing: -1px; /* whitespace fix part 1 */
} }
[class*="autogrid"]:after { [class*="autogrid"]:after {
content: ""; content: "";
@ -59,7 +58,6 @@
.autogrid12 > * {width: 6.4%} .autogrid12 > * {width: 6.4%}
/* Responsiv-o-matic */ /* Responsiv-o-matic */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.autogrid5 > *, .autogrid5 > *,
.autogrid6 > *, .autogrid6 > *,

7
css/icons.css
View file

@ -1,7 +1,6 @@
/* -----------------------------
/* ----------------------------- */ icons and bullets
/* ==icons and bullets */ ----------------------------- */
/* ----------------------------- */
.icon {display: inline-block;} .icon {display: inline-block;}

58
css/knacss.css
View file

@ -1,11 +1,11 @@
/* /**
* www.KNACSS.com V2.6n (2013-07) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V2.6n (2013-07) @author: Raphael Goetter, Alsacreations
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
*/ */
/* ----------------------------- */ /* -----------------------------
/* ==reset */ reset
/* ----------------------------- */ ----------------------------- */
/* base font-size corresponds to 10px and is adapted to rem unit */ /* base font-size corresponds to 10px and is adapted to rem unit */
html { html {
@ -209,9 +209,10 @@ body > script {display: none !important;}
position: static; position: static;
} }
/* ----------------------------- */
/* ==layout and modules */ /* -----------------------------
/* ----------------------------- */ layout and modules
----------------------------- */
/* switching box model for all elements */ /* switching box model for all elements */
* { * {
@ -260,8 +261,10 @@ body > script {display: none !important;}
vertical-align: top; vertical-align: top;
} }
/* alignments (blocks and inline) */
/* ------------------------------ */ /* ------------------------------
alignments
------------------------------ */
/* left elements */ /* left elements */
.left { .left {
@ -381,9 +384,11 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
.desktop-hidden { display: none; } /* hidden on desktop */ .desktop-hidden { display: none; } /* hidden on desktop */
/* ----------------------------- */
/* ==forms */ /* -----------------------------
/* ----------------------------- */ forms
----------------------------- */
form, form,
fieldset { fieldset {
border: none; border: none;
@ -403,9 +408,10 @@ textarea {
font-size: inherit; font-size: inherit;
} }
/* ----------------------------- */
/* ==iefix */ /* -----------------------------
/* ----------------------------- */ iefix
----------------------------- */
/* hasLayout for IE6/IE7 */ /* hasLayout for IE6/IE7 */
.ie67 .clearfix, .ie67 .clearfix,
@ -436,9 +442,10 @@ textarea {
} }
*/ */
/* ----------------------------- */
/* ==print */ /* -----------------------------
/* ----------------------------- */ print
----------------------------- */
/* quick print reset */ /* quick print reset */
@media print { @media print {
@ -468,13 +475,12 @@ textarea {
} }
} }
/* ----------------------------- */
/* ==own stylesheet */ /* -----------------------------
/* ----------------------------- */ own stylesheet
----------------------------- */
/* Here should go your own CSS styles */ /* Here should go your own CSS styles */
/* You can link them with an @import or, better for webperf, just paste them here */ /* You can link them with an @import or, better for webperf, just paste them here */
/* @import url(my-styles.css); */ /* @import url(my-styles.css); */

5
css/print.css
View file

@ -1,4 +1,7 @@
/* quick print reset */ /* -----------------------------
quick print reset
----------------------------- */
@media print { @media print {
* { * {
background: transparent !important; background: transparent !important;

24
css/rwd.css
View file

@ -1,7 +1,7 @@
/* -----------------------------
viewport fixing for RWD
----------------------------- */
/* ----------------------------- */
/* ==viewport fixing for RWD */
/* ----------------------------- */
@-webkit-viewport { @-webkit-viewport {
width: device-width; width: device-width;
zoom: 1.0; zoom: 1.0;
@ -23,20 +23,22 @@
zoom: 1.0; zoom: 1.0;
} }
/* ----------------------------- */
/* ==desktop and retina medias */ /* -----------------------------
/* ----------------------------- */ desktop and retina medias
----------------------------- */
@media (min-width: 641px) { @media (min-width: 641px) {
/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
} }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
/* Style adjustments for retina devices */ /* Style adjustments for retina devices */
} }
/* ---------------------------------- */
/* ==Responsive large / small / tiny */ /* ----------------------------------
/* ---------------------------------- */ Responsive large / small / tiny
---------------------------------- */
@media (min-width: 1280px) { @media (min-width: 1280px) {

7
css/tables.css
View file

@ -1,7 +1,6 @@
/* -----------------------------
/* ----------------------------- */ tables
/* ==tables */ ----------------------------- */
/* ----------------------------- */
table, table,
.table { .table {

88
less/knacss.less
View file

@ -1,7 +1,7 @@
/* /**
* www.KNACSS.com V2.6n (2013-07) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V2.6n (2013-07) @author: Raphael Goetter, Alsacreations
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/ * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
*/ */
// LESS values : adapt them to your design // LESS values : adapt them to your design
@basefont : 14; // if "14" then 1em = 14px @basefont : 14; // if "14" then 1em = 14px
@ -30,9 +30,10 @@
margin-bottom: 0; margin-bottom: 0;
} }
/* ----------------------------- */
/* ==reset */ /* -----------------------------
/* ----------------------------- */ reset
----------------------------- */
/* base font-size corresponds to 10px and is adapted to rem unit */ /* base font-size corresponds to 10px and is adapted to rem unit */
html { html {
@ -207,9 +208,10 @@ body > script {display: none !important;}
} }
} }
/* ----------------------------- */
/* ==layout and modules */ /* -----------------------------
/* ----------------------------- */ layout and modules
----------------------------- */
/* switching box model for all elements */ /* switching box model for all elements */
* { * {
@ -312,8 +314,10 @@ body > script {display: none !important;}
order : 42; order : 42;
} }
/* alignments (blocks and inline) */
/* ------------------------------ */ /* ------------------------------
alignments
------------------------------ */
/* left elements */ /* left elements */
.left { .left {
@ -340,8 +344,11 @@ img.left, img.right {
.txtright { text-align: right; } .txtright { text-align: right; }
.txtcenter { text-align: center; } .txtcenter { text-align: center; }
/* grids */
/* ------------------------------ */ /* ------------------------------
grids
------------------------------ */
[class^=grid]:after { [class^=grid]:after {
content: ""; content: "";
display: table; display: table;
@ -383,9 +390,10 @@ img.left, img.right {
width: (100%-@gutter) * 3 / 4; width: (100%-@gutter) * 3 / 4;
} }
/* ----------------------------- */
/* ==autogrids */ /* -----------------------------
/* ----------------------------- */ autogrids
----------------------------- */
/* auto-justified equal grids */ /* auto-justified equal grids */
@ -532,9 +540,11 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
/* hidden on mobile */ /* hidden on mobile */
.mobile-hidden { display: block; } .mobile-hidden { display: block; }
/* ----------------------------- */
/* ==forms */ /* -----------------------------
/* ----------------------------- */ forms
----------------------------- */
form, form,
fieldset { fieldset {
border: none; border: none;
@ -554,9 +564,10 @@ textarea {
font-size: inherit; font-size: inherit;
} }
/* ----------------------------- */
/* ==iefix */ /* -----------------------------
/* ----------------------------- */ iefix
----------------------------- */
/* haslayout for IE6/IE7 */ /* haslayout for IE6/IE7 */
.ie67 .clearfix, .ie67 .clearfix,
@ -587,9 +598,10 @@ textarea {
} }
*/ */
/* ----------------------------- */
/* ==print */ /* -----------------------------
/* ----------------------------- */ print
----------------------------- */
/* quick print reset */ /* quick print reset */
@media print { @media print {
@ -611,9 +623,10 @@ textarea {
} }
} }
/* ----------------------------- */
/* ==own stylesheet */ /* -----------------------------
/* ----------------------------- */ own stylesheet
----------------------------- */
/* Here should go your own CSS styles */ /* Here should go your own CSS styles */
/* You can link them with an @import or, better for webperf, just paste them here */ /* You can link them with an @import or, better for webperf, just paste them here */
@ -621,20 +634,21 @@ textarea {
/* @import url(my-styles.css); */ /* @import url(my-styles.css); */
/* ----------------------------- */ /* -----------------------------
/* ==desktop and retina medias */ desktop and retina medias
/* ----------------------------- */ ----------------------------- */
@media (min-width: @smallscreen) { @media (min-width: @smallscreen) {
/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
} }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
/* Style adjustments for retina devices */ /* Style adjustments for retina devices */
} }
/* ---------------------------------- */
/* ==Responsive large / medium / tiny */ /* ----------------------------------
/* ---------------------------------- */ Responsive large / medium / tiny
---------------------------------- */
@media (min-width: @largescreen) { @media (min-width: @largescreen) {