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

spacers units fixed, RWD .medium added, .clearfix border-collapse

Browse source
This commit is contained in:
raphaelgoettter 2014-08-22 09:34:59 +02:00
parent 0688709cea
commit 7235eaa54a
8 changed files with 193 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

18
sass/_00-config.scss
View file

@ -29,15 +29,15 @@ $base-background : #fff; // body background color
$primary-background : #fff; // primary elements background color
$secondary-background : #fff; // secondary elements background color
// spacings
$tiny-value : 0.5rem; // tiny value for margins / paddings
$small-value : 1rem; // small value for margins / paddings
$medium-value : 2rem; // medium value for margins / paddings
$large-value : 4rem; // large value for margins / paddings
$extra-large-value : 6rem; // extra large value for margins / paddings
$ultra-large-value : 10rem; // ultra large value for margins / paddings
// spacings (choose unit you prefer)
$tiny-value : 5px; // tiny value for margins / paddings
$small-value : 10px; // small value for margins / paddings
$medium-value : 20px; // medium value for margins / paddings
$large-value : 40px; // large value for margins / paddings
$extra-large-value : 80px; // extra large value for margins / paddings
$ultra-large-value : 160px; // ultra large value for margins / paddings
// breakpoints
// breakpoints (choose unit you prefer)
$tiny-screen : 320px; // tiny screens media query
$small-screen : 480px; // small screens media query
$medium-screen : 768px; // medium screens media query
@ -45,7 +45,7 @@ $large-screen : 1024px; // large screens media query
$extra-large-screen : 1280px; // extra large screens media query
$ultra-large-screen : 1600px; // ultra large screens media query
// misc
// misc (choose unit you prefer)
$gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
// booleans

3
sass/_01-base.scss
View file

@ -1,5 +1,5 @@
/*!
* www.KNACSS.com V3.0.7 (2014-08-21) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
* www.KNACSS.com V3.0.8 (2014-08-22) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
* Licence WTFPL http://www.wtfpl.net/
*/
@ -291,6 +291,7 @@ table {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
}

88
sass/_06-rwd.scss
View file

@ -2,7 +2,7 @@
/* ==desktop and HD devices */
/* ----------------------------- */
@media (min-width: $small-screen) {
@media (min-width: $medium-screen) {
/* rules for big resources and big screens like: background-images, font-faces, etc. */
}
@ -11,7 +11,7 @@
}
/* ---------------------------------- */
/* ==Responsive large / small / tiny */
/* ==Responsive large */
/* ---------------------------------- */
@media (min-width: $large-screen) {
@ -100,7 +100,83 @@
}
}
@media (max-width: $small-screen) {
/* ---------------------------------- */
/* ==Responsive medium */
/* ---------------------------------- */
@media (min-width: $medium-screen) and (max-width: ($large-screen - 1)) {
/* layouts for medium screens */
.medium-hidden {
display: none !important;
}
.medium-visible {
display: block !important;
}
.medium-no-float {
float: none;
}
.medium-inbl {
display: inline-block;
float: none;
vertical-align: top;
}
.medium-row {
display: table;
table-layout: fixed;
width: 100% !important;
}
.medium-col {
display: table-cell;
vertical-align: top;
}
/* widths for medium screens */
.medium-w25 {
width: 25% !important;
}
.medium-w33 {
width: 33.3333% !important;
}
.medium-w50 {
width: 50% !important;
}
.medium-w66 {
width: 66.6666% !important;
}
.medium-w75 {
width: 75% !important;
}
.medium-w100,
.medium-wauto {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
/* margins for medium screens */
.medium-man {
margin: 0 !important;
}
}
/* ---------------------------------- */
/* ==Responsive small */
/* ---------------------------------- */
@media (max-width: $small-screen) and (max-width: ($medium-screen - 1)) {
/* quick small resolution reset */
.mod,
@ -215,7 +291,11 @@
}
}
@media (max-width: $tiny-screen) {
/* ---------------------------------- */
/* ==Responsive tiny */
/* ---------------------------------- */
@media (max-width: $tiny-screen) and (max-width: ($small-screen - 1)) {
.w300p,
.w400p,