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

Ajout de classes helpers 

// spacings (choose unit you prefer)
@tiny-value             : .5rem; // tiny value for margins / paddings
@tiny-plus-value        : .7rem; // tiny+ value for margins / paddings
@small-value            : 1rem; // small value for margins / paddings
@small-plus-value       : 1.5rem; // small+ value for margins / paddings
@medium-value           : 2rem; // medium value for margins / paddings
@medium-plus-value      : 3rem; // medium+ value for margins / paddings
@large-value            : 4rem; // large value for margins / paddings
@large-plus-value       : 6rem; // large value for margins / paddings
@extra-large-value      : 8rem; // extra large value for margins /
paddings
@extra-large-plus-value : 12rem; // extra large value for margins /
paddings
@ultra-large-value      : 16rem; // ultra large value for margins /
paddings
@ultra-large-plus-value : 20rem; // ultra large value for margins /
paddings

// breakpoints (choose unit you prefer)
@tiny-screen            : 320px; // tiny screens media query (less-equal
than 320px)
@tiny-plus-screen       : 480px; // screens between 321px and 480px
@small-screen           : 640px; // screens between 481px and 640px
@small-plus-screen      : 768px; // screens between 641px and 768px
@medium-screen          : 960px; // screens between 769px and 960px
@medium-plus-screen     : 1024px; // screens between 961px and 1024px
@large-screen           : 1280px; // screens between 1025px and 1280px
@large-plus-screen      : 1440px; // screens between 1281px and 1440px
@extra-large-screen     : 1600px; // screens between 1441px and 1600px
@ultra-large-screen     : 1920px; // ultra large screens
This commit is contained in:
raphaelgoettter 2015-07-08 15:19:43 +02:00
parent 9e40fd8749
commit 4b0153af47
5 changed files with 108 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
css/knacss-unminified.css
View File

@ -507,7 +507,7 @@ var {
overflow: hidden !important; overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important; clip: rect(1px, 1px, 1px, 1px) !important;
} }
@media (max-width: 768px) { @media (max-width: 640px) {
.no-small-screen { .no-small-screen {
display: none; display: none;
} }
@ -565,7 +565,7 @@ svg {
} }
/* margin-bottom on tables */ /* margin-bottom on tables */
table { table {
margin-bottom: 20px; margin-bottom: 2rem;
} }
/* ----------------------------- */ /* ----------------------------- */
/* ==layout and modules */ /* ==layout and modules */
@ -615,17 +615,17 @@ table {
float: left; float: left;
} }
img.fl { img.fl {
margin-right: 10px; margin-right: 1rem;
} }
.fr { .fr {
float: right; float: right;
} }
img.fr { img.fr {
margin-left: 10px; margin-left: 1rem;
} }
img.fl, img.fl,
img.fr { img.fr {
margin-bottom: 5px; margin-bottom: 0.5rem;
} }
/* table layout */ /* table layout */
.row { .row {
@ -792,7 +792,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: calc(100% * 2 / 12 - 1em - .01px); width: calc(100% * 2 / 12 - 1em - .01px);
} }
/* Responsive grid */ /* Responsive grid */
@media (max-width: 768px) { @media (max-width: 640px) {
[class*="-small-4"] > * { [class*="-small-4"] > * {
width: calc(100% * 1 / 4 - 1em - .01px); width: calc(100% * 1 / 4 - 1em - .01px);
} }
@ -818,7 +818,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: calc(100% - 1em - .01px); width: calc(100% - 1em - .01px);
} }
} }
@media (max-width: 480px) { @media (max-width: 320px) {
[class*="-tiny-2"] > * { [class*="-tiny-2"] > * {
width: calc(100% * 1 / 2 - 1em - .01px); width: calc(100% * 1 / 2 - 1em - .01px);
} }
@ -838,7 +838,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.grid-2-1 > *:nth-child(even) { .grid-2-1 > *:nth-child(even) {
width: calc(33.33333333333333% - 1em - .01px); width: calc(33.33333333333333% - 1em - .01px);
} }
@media (max-width: 480px) { @media (max-width: 320px) {
.grid-2-1 > *:nth-child(n) { .grid-2-1 > *:nth-child(n) {
width: calc(100% - 1em - .01px); width: calc(100% - 1em - .01px);
} }
@ -849,7 +849,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.grid-1-2 > *:nth-child(even) { .grid-1-2 > *:nth-child(even) {
width: calc(66.66666666666666% - 1em - .01px); width: calc(66.66666666666666% - 1em - .01px);
} }
@media (max-width: 480px) { @media (max-width: 320px) {
.grid-1-2 > *:nth-child(n) { .grid-1-2 > *:nth-child(n) {
width: calc(100% - 1em - .01px); width: calc(100% - 1em - .01px);
} }
@ -860,7 +860,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.grid-3-1 > *:nth-child(even) { .grid-3-1 > *:nth-child(even) {
width: calc(25% - 1em - .01px); width: calc(25% - 1em - .01px);
} }
@media (max-width: 480px) { @media (max-width: 320px) {
.grid-3-1 > *:nth-child(n) { .grid-3-1 > *:nth-child(n) {
width: calc(100% - 1em - .01px); width: calc(100% - 1em - .01px);
} }
@ -871,7 +871,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.grid-1-3 > *:nth-child(even) { .grid-1-3 > *:nth-child(even) {
width: calc(75% - 1em - .01px); width: calc(75% - 1em - .01px);
} }
@media (max-width: 480px) { @media (max-width: 320px) {
.grid-1-3 > *:nth-child(n) { .grid-1-3 > *:nth-child(n) {
width: calc(100% - 1em - .01px); width: calc(100% - 1em - .01px);
} }
@ -882,7 +882,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.grid-3-2 > *:nth-child(even) { .grid-3-2 > *:nth-child(even) {
width: calc(40% - 1em - .01px); width: calc(40% - 1em - .01px);
} }
@media (max-width: 480px) { @media (max-width: 320px) {
.grid-3-2 > *:nth-child(n) { .grid-3-2 > *:nth-child(n) {
width: calc(100% - 1em - .01px); width: calc(100% - 1em - .01px);
} }
@ -893,7 +893,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.grid-2-3 > *:nth-child(even) { .grid-2-3 > *:nth-child(even) {
width: calc(60% - 1em - .01px); width: calc(60% - 1em - .01px);
} }
@media (max-width: 480px) { @media (max-width: 320px) {
.grid-2-3 > *:nth-child(n) { .grid-2-3 > *:nth-child(n) {
width: calc(100% - 1em - .01px); width: calc(100% - 1em - .01px);
} }
@ -904,7 +904,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.grid-4-1 > *:nth-child(even) { .grid-4-1 > *:nth-child(even) {
width: calc(20% - 1em - .01px); width: calc(20% - 1em - .01px);
} }
@media (max-width: 480px) { @media (max-width: 320px) {
.grid-4-1 > *:nth-child(n) { .grid-4-1 > *:nth-child(n) {
width: calc(100% - 1em - .01px); width: calc(100% - 1em - .01px);
} }
@ -915,7 +915,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
.grid-1-4 > *:nth-child(even) { .grid-1-4 > *:nth-child(even) {
width: calc(80% - 1em - .01px); width: calc(80% - 1em - .01px);
} }
@media (max-width: 480px) { @media (max-width: 320px) {
.grid-1-4 > *:nth-child(n) { .grid-1-4 > *:nth-child(n) {
width: calc(100% - 1em - .01px); width: calc(100% - 1em - .01px);
} }
@ -941,7 +941,7 @@ table.table-auto {
td, td,
th { th {
vertical-align: top; vertical-align: top;
min-width: 20px; min-width: 2rem;
cursor: default; cursor: default;
} }
/* ----------------------------- */ /* ----------------------------- */
@ -1149,131 +1149,131 @@ s,m,l,n = small, medium, large, none
padding: 0; padding: 0;
} }
.mas { .mas {
margin: 10px; margin: 1rem;
} }
.mam { .mam {
margin: 20px; margin: 2rem;
} }
.mal { .mal {
margin: 40px; margin: 4rem;
} }
.pas { .pas {
padding: 10px; padding: 1rem;
} }
.pam { .pam {
padding: 20px; padding: 2rem;
} }
.pal { .pal {
padding: 40px; padding: 4rem;
} }
.mtn, .mtn,
.mt0 { .mt0 {
margin-top: 0; margin-top: 0;
} }
.mts { .mts {
margin-top: 10px; margin-top: 1rem;
} }
.mtm { .mtm {
margin-top: 20px; margin-top: 2rem;
} }
.mtl { .mtl {
margin-top: 40px; margin-top: 4rem;
} }
.mrn, .mrn,
.mr0 { .mr0 {
margin-right: 0; margin-right: 0;
} }
.mrs { .mrs {
margin-right: 10px; margin-right: 1rem;
} }
.mrm { .mrm {
margin-right: 20px; margin-right: 2rem;
} }
.mrl { .mrl {
margin-right: 40px; margin-right: 4rem;
} }
.mbn, .mbn,
.mb0 { .mb0 {
margin-bottom: 0; margin-bottom: 0;
} }
.mbs { .mbs {
margin-bottom: 10px; margin-bottom: 1rem;
} }
.mbm { .mbm {
margin-bottom: 20px; margin-bottom: 2rem;
} }
.mbl { .mbl {
margin-bottom: 40px; margin-bottom: 4rem;
} }
.mln, .mln,
.ml0 { .ml0 {
margin-left: 0; margin-left: 0;
} }
.mls { .mls {
margin-left: 10px; margin-left: 1rem;
} }
.mlm { .mlm {
margin-left: 20px; margin-left: 2rem;
} }
.mll { .mll {
margin-left: 40px; margin-left: 4rem;
} }
.ptn, .ptn,
.pt0 { .pt0 {
padding-top: 0; padding-top: 0;
} }
.pts { .pts {
padding-top: 10px; padding-top: 1rem;
} }
.ptm { .ptm {
padding-top: 20px; padding-top: 2rem;
} }
.ptl { .ptl {
padding-top: 40px; padding-top: 4rem;
} }
.prn, .prn,
.pr0 { .pr0 {
padding-right: 0; padding-right: 0;
} }
.prs { .prs {
padding-right: 10px; padding-right: 1rem;
} }
.prm { .prm {
padding-right: 20px; padding-right: 2rem;
} }
.prl { .prl {
padding-right: 40px; padding-right: 4rem;
} }
.pbn, .pbn,
.pb0 { .pb0 {
padding-bottom: 0; padding-bottom: 0;
} }
.pbs { .pbs {
padding-bottom: 10px; padding-bottom: 1rem;
} }
.pbm { .pbm {
padding-bottom: 20px; padding-bottom: 2rem;
} }
.pbl { .pbl {
padding-bottom: 40px; padding-bottom: 4rem;
} }
.pln, .pln,
.pl0 { .pl0 {
padding-left: 0; padding-left: 0;
} }
.pls { .pls {
padding-left: 10px; padding-left: 1rem;
} }
.plm { .plm {
padding-left: 20px; padding-left: 2rem;
} }
.pll { .pll {
padding-left: 40px; padding-left: 4rem;
} }
/* ----------------------------- */ /* ----------------------------- */
/* ==desktop and HD devices */ /* ==desktop and HD devices */
/* ----------------------------- */ /* ----------------------------- */
@media (min-width: 1025px) { @media (min-width: 961px) {
/* rules for big resources and big screens like: background-images, font-faces, etc. */ /* 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) {
@ -1282,7 +1282,7 @@ s,m,l,n = small, medium, large, none
/* ---------------------------------- */ /* ---------------------------------- */
/* ==Responsive large */ /* ==Responsive large */
/* ---------------------------------- */ /* ---------------------------------- */
@media (min-width: 1025px) { @media (min-width: 961px) {
/* layouts for large screens */ /* layouts for large screens */
.large-hidden { .large-hidden {
display: none !important; display: none !important;
@ -1341,7 +1341,7 @@ s,m,l,n = small, medium, large, none
/* ---------------------------------- */ /* ---------------------------------- */
/* ==Responsive medium */ /* ==Responsive medium */
/* ---------------------------------- */ /* ---------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) { @media (min-width: 641px) and (max-width: 960px) {
/* layouts for medium screens */ /* layouts for medium screens */
.medium-hidden { .medium-hidden {
display: none !important; display: none !important;
@ -1401,7 +1401,7 @@ s,m,l,n = small, medium, large, none
/* ---------------------------------- */ /* ---------------------------------- */
/* ==Responsive small */ /* ==Responsive small */
/* ---------------------------------- */ /* ---------------------------------- */
@media (min-width: 481px) and (max-width: 768px) { @media (min-width: 321px) and (max-width: 640px) {
/* quick reset in small resolution and less */ /* quick reset in small resolution and less */
.w600p, .w600p,
.w700p, .w700p,
@ -1474,7 +1474,7 @@ s,m,l,n = small, medium, large, none
/* ---------------------------------- */ /* ---------------------------------- */
/* ==Responsive tiny */ /* ==Responsive tiny */
/* ---------------------------------- */ /* ---------------------------------- */
@media (max-width: 480px) { @media (max-width: 320px) {
/* quick tiny resolution reset */ /* quick tiny resolution reset */
.mod, .mod,
.col, .col,
@ -1677,7 +1677,7 @@ s,m,l,n = small, medium, large, none
overflow: visible; overflow: visible;
clip: auto; clip: auto;
} }
@media (max-width: 768px) { @media (max-width: 640px) {
/* you shall not pass */ /* you shall not pass */
div, div,
textarea, textarea,
@ -1792,7 +1792,7 @@ table,
border: 1px solid #ccc; border: 1px solid #ccc;
} }
caption { caption {
padding: 10px; padding: 1rem;
color: #555; color: #555;
font-style: italic; font-style: italic;
} }

2
css/knacss.css
View File

File diff suppressed because one or more lines are too long

20
doc/07-responsive.md
View File

@ -4,12 +4,20 @@
Par défaut, KNACSS tient compte des valeurs de points de rupture suivants : Par défaut, KNACSS tient compte des valeurs de points de rupture suivants :
- "tiny" : correspond à une fenêtre de 480px ou moins ```
- "small" : correspond à une fenêtre entre 481px et 768px inclus // breakpoints (choose unit you prefer)
- "medium"correspond à une fenêtre entre 769px et 1024px inclus @tiny-screen : 320px; // tiny screens media query (less-equal than 320px)
- "large"correspond à une fenêtre entre 1025px et 1280px inclus @tiny-plus-screen : 480px; // screens between 321px and 480px
- "extra-large"correspond à une fenêtre entre 1281px et 1600px inclus @small-screen : 640px; // screens between 481px and 640px
- "ultra-large"correspond à une fenêtre à partir de 1601px @small-plus-screen : 768px; // screens between 641px and 768px
@medium-screen : 960px; // screens between 769px and 960px
@medium-plus-screen : 1024px; // screens between 961px and 1024px
@large-screen : 1280px; // screens between 1025px and 1280px
@large-plus-screen : 1440px; // screens between 1281px and 1440px
@extra-large-screen : 1600px; // screens between 1441px and 1600px
@ultra-large-screen : 1920px; // ultra large screens
```
_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._ _Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._

30
less/_00-config.less
View File

@ -35,19 +35,29 @@
@secondary-background : #fff; // secondary elements background color @secondary-background : #fff; // secondary elements background color
// spacings (choose unit you prefer) // spacings (choose unit you prefer)
@tiny-value : 5px; // tiny value for margins / paddings @tiny-value : .5rem; // tiny value for margins / paddings
@small-value : 10px; // small value for margins / paddings @tiny-plus-value : .7rem; // tiny+ value for margins / paddings
@medium-value : 20px; // medium value for margins / paddings @small-value : 1rem; // small value for margins / paddings
@large-value : 40px; // large value for margins / paddings @small-plus-value : 1.5rem; // small+ value for margins / paddings
@extra-large-value : 80px; // extra large value for margins / paddings @medium-value : 2rem; // medium value for margins / paddings
@ultra-large-value : 160px; // ultra large value for margins / paddings @medium-plus-value : 3rem; // medium+ value for margins / paddings
@large-value : 4rem; // large value for margins / paddings
@large-plus-value : 6rem; // large value for margins / paddings
@extra-large-value : 8rem; // extra large value for margins / paddings
@extra-large-plus-value : 12rem; // extra large value for margins / paddings
@ultra-large-value : 16rem; // ultra large value for margins / paddings
@ultra-large-plus-value : 20rem; // ultra large value for margins / paddings
// breakpoints (choose unit you prefer) // breakpoints (choose unit you prefer)
@tiny-screen : 480px; // tiny screens media query (less than 480px) @tiny-screen : 320px; // tiny screens media query (less-equal than 320px)
@small-screen : 768px; // screens between 481px and 768px @tiny-plus-screen : 480px; // screens between 321px and 480px
@medium-screen : 1024px; // screens between 769px and 1024px @small-screen : 640px; // screens between 481px and 640px
@small-plus-screen : 768px; // screens between 641px and 768px
@medium-screen : 960px; // screens between 769px and 960px
@medium-plus-screen : 1024px; // screens between 961px and 1024px
@large-screen : 1280px; // screens between 1025px and 1280px @large-screen : 1280px; // screens between 1025px and 1280px
@extra-large-screen : 1600px; // screens between 1281px and 1600px @large-plus-screen : 1440px; // screens between 1281px and 1440px
@extra-large-screen : 1600px; // screens between 1441px and 1600px
@ultra-large-screen : 1920px; // ultra large screens @ultra-large-screen : 1920px; // ultra large screens
// grids variables (choose unit you prefer) // grids variables (choose unit you prefer)

30
sass/_00-config.scss
View File

@ -35,19 +35,29 @@ $primary-background : #fff !default; // primary elements background color
$secondary-background : #fff !default; // secondary elements background color $secondary-background : #fff !default; // secondary elements background color
// spacings (choose unit you prefer) // spacings (choose unit you prefer)
$tiny-value : 5px !default; // tiny value for margins / paddings $tiny-value : .5rem !default; // tiny value for margins / paddings
$small-value : 10px !default; // small value for margins / paddings $tiny-plus-value : .7rem !default; // tiny+ value for margins / paddings
$medium-value : 20px !default; // medium value for margins / paddings $small-value : 1rem !default; // small value for margins / paddings
$large-value : 40px !default; // large value for margins / paddings $small-plus-value : 1.5rem !default; // small+ value for margins / paddings
$extra-large-value : 80px !default; // extra large value for margins / paddings $medium-value : 2rem !default; // medium value for margins / paddings
$ultra-large-value : 160px !default; // ultra large value for margins / paddings $medium-plus-value : 3rem !default; // medium+ value for margins / paddings
$large-value : 4rem !default; // large value for margins / paddings
$large-plus-value : 6rem !default; // large value for margins / paddings
$extra-large-value : 8rem !default; // extra large value for margins / paddings
$extra-large-plus-value : 12rem !default; // extra large value for margins / paddings
$ultra-large-value : 16rem !default; // ultra large value for margins / paddings
$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings
// breakpoints (choose unit you prefer) // breakpoints (choose unit you prefer)
$tiny-screen : 480px !default; // tiny screens media query (less than 480px) $tiny-screen : 320px !default; // tiny screens media query (less-equal than 320px)
$small-screen : 768px !default; // screens between 481px and 768px $tiny-plus-screen : 480px !default; // screens between 321px and 480px
$medium-screen : 1024px !default; // screens between 769px and 1024px $small-screen : 640px !default; // screens between 481px and 640px
$small-plus-screen : 768px !default; // screens between 641px and 768px
$medium-screen : 960px !default; // screens between 769px and 960px
$medium-plus-screen : 1024px !default; // screens between 961px and 1024px
$large-screen : 1280px !default; // screens between 1025px and 1280px $large-screen : 1280px !default; // screens between 1025px and 1280px
$extra-large-screen : 1600px !default; // screens between 1281px and 1600px $large-plus-screen : 1440px !default; // screens between 1281px and 1440px
$extra-large-screen : 1600px !default; // screens between 1441px and 1600px
$ultra-large-screen : 1920px !default; // ultra large screens $ultra-large-screen : 1920px !default; // ultra large screens
// grids variables (choose unit you prefer) // grids variables (choose unit you prefer)