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

helpers classes now on a separate file

Browse source
This commit is contained in:
raphaelgoettter 2014-10-20 17:59:59 +02:00
parent 43a2ddd2e3
commit 1b9e0bf9f5
28 changed files with 662 additions and 662 deletions
Download patch file Download diff file Expand all files Collapse all files

290
sass/_01-base.scss
View file

@ -363,293 +363,3 @@ img.end {
.txtcenter {
text-align: center;
}
// width helpers boolean
@if $enable-helpers-width == true {
/* blocks widths (percentage and pixels) */
.w10 {
width: 10%;
}
.w20 {
width: 20%;
}
.w25 {
width: 25%;
}
.w30 {
width: 30%;
}
.w33 {
width: 33.3333%;
}
.w40 {
width: 40%;
}
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w66 {
width: 66.6666%;
}
.w70 {
width: 70%;
}
.w75 {
width: 75%;
}
.w80 {
width: 80%;
}
.w90 {
width: 90%;
}
.w100 {
width: 100%;
}
.w50p {
width: 50px;
}
.w100p {
width: 100px;
}
.w150p {
width: 150px;
}
.w200p {
width: 200px;
}
.w300p {
width: 300px;
}
.w400p {
width: 400px;
}
.w500p {
width: 500px;
}
.w600p {
width: 600px;
}
.w700p {
width: 700px;
}
.w800p {
width: 800px;
}
.w960p {
width: 960px;
}
.mw960p {
max-width: 960px;
}
.w1140p {
width: 1140px;
}
.mw1140p {
max-width: 1140px;
}
.wauto {
width: auto;
}
}
// spacing helpers boolean
@if $enable-helpers-spacing == true {
/* spacing helpers
p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left
s,m,l,n = small, medium, large, none
*/
.man {
margin: 0;
}
.pan {
padding: 0;
}
.mas {
margin: $small-value;
}
.mam {
margin: $medium-value;
}
.mal {
margin: $large-value;
}
.pas {
padding: $small-value;
}
.pam {
padding: $medium-value;
}
.pal {
padding: $large-value;
}
.mtn {
margin-top: 0;
}
.mts {
margin-top: $small-value;
}
.mtm {
margin-top: $medium-value;
}
.mtl {
margin-top: $large-value;
}
.mrn {
margin-right: 0;
}
.mrs {
margin-right: $small-value;
}
.mrm {
margin-right: $medium-value;
}
.mrl {
margin-right: $large-value;
}
.mbn {
margin-bottom: 0;
}
.mbs {
margin-bottom: $small-value;
}
.mbm {
margin-bottom: $medium-value;
}
.mbl {
margin-bottom: $large-value;
}
.mln {
margin-left: 0;
}
.mls {
margin-left: $small-value;
}
.mlm {
margin-left: $medium-value;
}
.mll {
margin-left: $large-value;
}
.ptn {
padding-top: 0;
}
.pts {
padding-top: $small-value;
}
.ptm {
padding-top: $medium-value;
}
.ptl {
padding-top: $large-value;
}
.prn {
padding-right: 0;
}
.prs {
padding-right: $small-value;
}
.prm {
padding-right: $medium-value;
}
.prl {
padding-right: $large-value;
}
.pbn {
padding-bottom: 0;
}
.pbs {
padding-bottom: $small-value;
}
.pbm {
padding-bottom: $medium-value;
}
.pbl {
padding-bottom: $large-value;
}
.pln {
padding-left: 0;
}
.pls {
padding-left: $small-value;
}
.plm {
padding-left: $medium-value;
}
.pll {
padding-left: $large-value;
}
}

286
sass/_02-helpers.scss Normal file
View file

@ -0,0 +1,286 @@
/* ---------------------------------- */
/* ==visual helpers */
/* .. use them with parcimony ! */
/* ---------------------------------- */
/* blocks widths (percentage and pixels) */
.w10 {
width: 10%;
}
.w20 {
width: 20%;
}
.w25 {
width: 25%;
}
.w30 {
width: 30%;
}
.w33 {
width: 33.3333%;
}
.w40 {
width: 40%;
}
.w50 {
width: 50%;
}
.w60 {
width: 60%;
}
.w66 {
width: 66.6666%;
}
.w70 {
width: 70%;
}
.w75 {
width: 75%;
}
.w80 {
width: 80%;
}
.w90 {
width: 90%;
}
.w100 {
width: 100%;
}
.w50p {
width: 50px;
}
.w100p {
width: 100px;
}
.w150p {
width: 150px;
}
.w200p {
width: 200px;
}
.w300p {
width: 300px;
}
.w400p {
width: 400px;
}
.w500p {
width: 500px;
}
.w600p {
width: 600px;
}
.w700p {
width: 700px;
}
.w800p {
width: 800px;
}
.w960p {
width: 960px;
}
.mw960p {
max-width: 960px;
}
.w1140p {
width: 1140px;
}
.mw1140p {
max-width: 1140px;
}
.wauto {
width: auto;
}
/* spacing helpers
p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left
s,m,l,n = small, medium, large, none
*/
.man {
margin: 0;
}
.pan {
padding: 0;
}
.mas {
margin: $small-value;
}
.mam {
margin: $medium-value;
}
.mal {
margin: $large-value;
}
.pas {
padding: $small-value;
}
.pam {
padding: $medium-value;
}
.pal {
padding: $large-value;
}
.mtn {
margin-top: 0;
}
.mts {
margin-top: $small-value;
}
.mtm {
margin-top: $medium-value;
}
.mtl {
margin-top: $large-value;
}
.mrn {
margin-right: 0;
}
.mrs {
margin-right: $small-value;
}
.mrm {
margin-right: $medium-value;
}
.mrl {
margin-right: $large-value;
}
.mbn {
margin-bottom: 0;
}
.mbs {
margin-bottom: $small-value;
}
.mbm {
margin-bottom: $medium-value;
}
.mbl {
margin-bottom: $large-value;
}
.mln {
margin-left: 0;
}
.mls {
margin-left: $small-value;
}
.mlm {
margin-left: $medium-value;
}
.mll {
margin-left: $large-value;
}
.ptn {
padding-top: 0;
}
.pts {
padding-top: $small-value;
}
.ptm {
padding-top: $medium-value;
}
.ptl {
padding-top: $large-value;
}
.prn {
padding-right: 0;
}
.prs {
padding-right: $small-value;
}
.prm {
padding-right: $medium-value;
}
.prl {
padding-right: $large-value;
}
.pbn {
padding-bottom: 0;
}
.pbs {
padding-bottom: $small-value;
}
.pbm {
padding-bottom: $medium-value;
}
.pbl {
padding-bottom: $large-value;
}
.pln {
padding-left: 0;
}
.pls {
padding-left: $small-value;
}
.plm {
padding-left: $medium-value;
}
.pll {
padding-left: $large-value;
}

0
sass/_02-grids.scss → sass/_03-grids.scss
View file

0
sass/_03-tables.scss → sass/_04-tables.scss
View file

0
sass/_04-forms.scss → sass/_05-forms.scss
View file

0
sass/_05-icons.scss → sass/_06-icons.scss
View file

0
sass/_06-rwd.scss → sass/_08-rwd.scss
View file

0
sass/_08-print.scss → sass/_09-print.scss
View file

4
sass/_09-booleans.scss → sass/_10-booleans.scss
View file

@ -4,8 +4,8 @@
/* styling skip links */
.skip-links {
position: absolute;
a {
& a {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);

0
sass/_10-gmaps.scss → sass/_11-gmaps.scss
View file

0
sass/_11-ie.scss → sass/_12-ie.scss
View file

0
sass/_12-styling.scss → sass/_13-styling.scss
View file

23
sass/knacss.scss
View file

@ -6,17 +6,18 @@
@import "_01-base";
// Sass files : chose the ones you need
@import "_02-grids";
@import "_03-tables";
@import "_04-forms";
@import "_05-icons";
@import "_06-rwd";
@import "_07-flexbox";
@import "_08-print";
@import "_09-booleans";
@import "_10-gmaps";
@import "_11-ie";
@import "_12-styling";
@import "_02-helpers"; // width and spacers visually classes
@import "_03-grids"; // grids and autogrids
@import "_04-tables";
@import "_05-forms";
@import "_06-icons"; // UTF-8 icons
@import "_07-flexbox";
@import "_08-rwd"; // Responsive Web Design helpers
@import "_09-print";
@import "_10-booleans"; // skip links and hyphens
@import "_11-gmaps"; // Google maps bugs fix
@import "_12-ie"; // IE6, IE7, IE8 support
@import "_13-styling"; // minor stylings
/* ----------------------------- */
/* ==own stylesheet */