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

variables naming convention

Browse source
This commit is contained in:
raphaelgoettter 2014-07-02 16:12:58 +02:00
parent 64f55038cc
commit 5f6250ae52
4 changed files with 29 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
less/_00-config.less
View file

@ -17,13 +17,17 @@
@font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack @font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
// font colors // font colors
@primary-color : #000; // text color on body and content @base-color : #000; // text color on body and content
@primary-color : #000; // text color on primary elements
@secondary-color : #000; // text color on secondary elements
@headings-color : #000; // text color on headings @headings-color : #000; // text color on headings
@primary-color-link : #333; // primary links color @base-color-link : #333; // base links color
@primary-color-link-hover : #000; // primary hovered/focused links color @base-color-link-hover : #000; // base hovered/focused links color
// backgrounds // backgrounds
@primary-background : #fff; // body background color @base-background : #fff; // body background color
@primary-background : #fff; // primary elements background color
@secondary-background : #fff; // secondary elements background color
// spacings // spacings
@tiny-value : 0.5em; // tiny value for margins / paddings @tiny-value : 0.5em; // tiny value for margins / paddings

10
less/_01-base.less
View file

@ -68,16 +68,16 @@ body {
/* set body font-size in em (1.4em equiv "14px") */ /* set body font-size in em (1.4em equiv "14px") */
font-size: unit((@base-font-size / 10), em); font-size: unit((@base-font-size / 10), em);
background-color: @primary-background; background-color: @base-background;
color: @primary-color; color: @base-color;
font-family: @font-stack-common; font-family: @font-stack-common;
line-height: @line-height; line-height: @line-height;
} }
a { a {
color: @primary-color-link; color: @base-color-link;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
color: @primary-color-link-hover; color: @base-color-link-hover;
} }
} }
@ -104,11 +104,13 @@ figure {
h1, h1,
.h1-like { .h1-like {
font-size: @h1-size; font-size: @h1-size;
font-family: @font-stack-headings;
} }
h2, h2,
.h2-like { .h2-like {
font-size: @h2-size; font-size: @h2-size;
font-family: @font-stack-headings;
} }
h3, h3,

13
sass/_00-config.scss
View file

@ -17,12 +17,17 @@ $font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; // mon
$font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack $font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
// font colors // font colors
$primary-color : #000; // text color on body $base-color : #000; // text color on body and content
$primary-color-link : #333; // primary links color; $primary-color : #000; // text color on primary elements
$primary-color-link-hover : #000; // primary hovered/focused links color; $secondary-color : #000; // text color on secondary elements
$headings-color : #000; // text color on headings
$base-color-link : #333; // base links color
$base-color-link-hover : #000; // base hovered/focused links color
// backgrounds // backgrounds
$primary-background : #fff; // body background color $base-background : #fff; // body background color
$primary-background : #fff; // primary elements background color
$secondary-background : #fff; // secondary elements background color
// spacings // spacings
$tiny-value : 0.5em; // tiny value for margins / paddings $tiny-value : 0.5em; // tiny value for margins / paddings

10
sass/_01-base.scss
View file

@ -67,16 +67,16 @@ body {
/* set body font-size in em (1.4em equiv "14px") */ /* set body font-size in em (1.4em equiv "14px") */
font-size: ($base-font-size / 10px) + em; font-size: ($base-font-size / 10px) + em;
background-color: $primary-background; background-color: $base-background;
color: $primary-color; color: $base-color;
font-family: $font-stack-common; font-family: $font-stack-common;
line-height: $line-height; line-height: $line-height;
} }
a { a {
color: $primary-color-link; color: $base-color-link;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
color: $primary-color-link-hover; color: $base-color-link-hover;
} }
} }
@ -102,10 +102,12 @@ figure {
h1, .h1-like { h1, .h1-like {
font-size: $h1-size; font-size: $h1-size;
font-family: $font-stack-headings;
} }
h2, .h2-like { h2, .h2-like {
font-size: $h2-size; font-size: $h2-size;
font-family: $font-stack-headings;
} }
h3, .h3-like { h3, .h3-like {