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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bower.json
View file

@ -1,6 +1,6 @@
{
"name": "KNACSS",
"version": "3.0.7",
"version": "3.0.8",
"homepage": "http://www.knacss.com/",
"authors": [
"Raphaël GOETTER, Alsacreations"

4
css/knacss.css
View file

File diff suppressed because one or more lines are too long

18
less/_00-config.less
View file

@ -29,15 +29,15 @@
@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 @@
@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

33
less/_01-base.less
View file

@ -1,5 +1,5 @@
/*!
* www.KNACSS.com V3.0.7 (2014-08-21) @author: Raphael Goetter, Alsacreations
* www.KNACSS.com V3.0.8 (2014-08-22) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/
*/
@ -297,6 +297,7 @@ table {
content: "";
display: table;
clear: both;
border-collapse: collapse;
}
}
@ -506,32 +507,26 @@ img.end {
}
.mas {
margin: @small-value * @base-font-size * 1px; // fallback ie678
margin: @small-value;
}
.mam {
margin: @medium-value * @base-font-size * 1px; // fallback ie678
margin: @medium-value;
}
.mal {
margin: @large-value * @base-font-size * 1px; // fallback ie678
margin: @large-value;
}
.pas {
padding: @small-value * @base-font-size * 1px; // fallback ie678
padding: @small-value;
}
.pam {
padding: @medium-value * @base-font-size * 1px; // fallback ie678
padding: @medium-value;
}
.pal {
padding: @large-value * @base-font-size * 1px; // fallback ie678
padding: @large-value;
}
@ -540,17 +535,14 @@ img.end {
}
.mts {
margin-top: @small-value * @base-font-size * 1px; // fallback ie678
margin-top: @small-value;
}
.mtm {
margin-top: @medium-value * @base-font-size * 1px; // fallback ie678
margin-top: @medium-value;
}
.mtl {
margin-top: @large-value * @base-font-size * 1px; // fallback ie678
margin-top: @large-value;
}
@ -559,17 +551,14 @@ img.end {
}
.mrs {
margin-right: @small-value * @base-font-size * 1px; // fallback ie678
margin-right: @small-value;
}
.mrm {
margin-right: @medium-value * @base-font-size * 1px; // fallback ie678
margin-right: @medium-value;
}
.mrl {
margin-right: @large-value * @base-font-size * 1px; // fallback ie678
margin-right: @large-value;
}
@ -578,17 +567,14 @@ img.end {
}
.mbs {
margin-bottom: @small-value * @base-font-size * 1px; // fallback ie678
margin-bottom: @small-value;
}
.mbm {
margin-bottom: @medium-value * @base-font-size * 1px; // fallback ie678
margin-bottom: @medium-value;
}
.mbl {
margin-bottom: @large-value * @base-font-size * 1px; // fallback ie678
margin-bottom: @large-value;
}
@ -597,17 +583,14 @@ img.end {
}
.mls {
margin-left: @small-value * @base-font-size * 1px; // fallback ie678
margin-left: @small-value;
}
.mlm {
margin-left: @medium-value * @base-font-size * 1px; // fallback ie678
margin-left: @medium-value;
}
.mll {
margin-left: @large-value * @base-font-size * 1px; // fallback ie678
margin-left: @large-value;
}
@ -616,17 +599,14 @@ img.end {
}
.pts {
padding-top: @small-value * @base-font-size * 1px; // fallback ie678
padding-top: @small-value;
}
.ptm {
padding-top: @medium-value * @base-font-size * 1px; // fallback ie678
padding-top: @medium-value;
}
.ptl {
padding-top: @large-value * @base-font-size * 1px; // fallback ie678
padding-top: @large-value;
}
@ -635,17 +615,14 @@ img.end {
}
.prs {
padding-right: @small-value * @base-font-size * 1px; // fallback ie678
padding-right: @small-value;
}
.prm {
padding-right: @medium-value * @base-font-size * 1px; // fallback ie678
padding-right: @medium-value;
}
.prl {
padding-right: @large-value * @base-font-size * 1px; // fallback ie678
padding-right: @large-value;
}
@ -654,17 +631,14 @@ img.end {
}
.pbs {
padding-bottom: @small-value * @base-font-size * 1px; // fallback ie678
padding-bottom: @small-value;
}
.pbm {
padding-bottom: @medium-value * @base-font-size * 1px; // fallback ie678
padding-bottom: @medium-value;
}
.pbl {
padding-bottom: @large-value * @base-font-size * 1px; // fallback ie678
padding-bottom: @large-value;
}
@ -673,17 +647,14 @@ img.end {
}
.pls {
padding-left: @small-value * @base-font-size * 1px; // fallback ie678
padding-left: @small-value;
}
.plm {
padding-left: @medium-value * @base-font-size * 1px; // fallback ie678
padding-left: @medium-value;
}
.pll {
padding-left: @large-value * @base-font-size * 1px; // fallback ie678
padding-left: @large-value;
}

88
less/_06-rwd.less
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,

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,