6 #Variables Variables
src: variables/__styleguide_section.scss
6.1 #Variables - Breakpoints Breakpoints.
src: variables/_breakpoints.scss
Here you can loarn abeout breakpoint: http://breakpoint-sass.com/
6.1.1 #Variables - Breakpoints - Font size breakpoints Global Font-Size breakpoints
These are vice versa in order to stick about with broswer default font Size. Refer Font-Sizes and Vertical Rhythm below.
$font-size-global--mobile-media: max-width: 400px
$font-size-global--tab-media: max-width: 900px
6.1.2 #Variables - Breakpoints - Global Breakpoints Global Breakpoints
$tab: 25.0625em (401px)
$pad: 30.0625em (481px)
$tab: 401px
$breakpoint-primary-menu: 38.75em (620px)
E.g:
breakpoint($tab) { ... }
Will compile in css to:
@media (max-width: 400px) { ... }
6.1.3 #Variables - Breakpoints - Global margins Global paddings and Margins
$global-page-pad: 4%
$global-max-width: 80embr /> This is the Maximum Content Width. Set as max-widht.
6.2 #Variables - Color pallete Color palette
src: variables/_colors.scss
<div class="kss-colorblock [modifier class]">[modifier class]</div>6.2.2 #Variables - Color pallete - Colors Color palette
.kss-colorblock is just a Helper to show Color-Variables
<div class="kss-colorblock" style="background-color: [modifier class]">[modifier class]</div>6.3 #Variables - Fonts Fonts
src: variables/fonts.scss
$base-font: Verdana, 'Lucida Sans Unicode', sans-serif;
$base-font-monospace: Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace;
$base-font: Verdana, 'Lucida Sans Unicode', sans-serif;
Autem paulatim qui veniam vicis. Eligo elit esca letalis obruo pala plaga utrum. Aliquam brevitas gemino haero importunus mos utrum vulpes zelus. Ibidem minim sed. Ad bene hos odio oppeto. Blandit gilvus incassum nobis premo vindico. Duis letalis lobortis macto praesent. Adipiscing caecus esse praemitto.
$base-font-monospace: Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace;
Autem paulatim qui veniam vicis. Eligo elit esca letalis obruo pala plaga utrum. Aliquam brevitas gemino haero importunus mos utrum vulpes zelus. Ibidem minim sed. Ad bene hos odio oppeto. Blandit gilvus incassum nobis premo vindico. Duis letalis lobortis macto praesent. Adipiscing caecus esse praemitto.
<p><strong>$base-font: Verdana, 'Lucida Sans Unicode', sans-serif;</strong></p>
<p class="base-font">Autem paulatim qui veniam vicis. Eligo elit esca letalis obruo pala plaga utrum. Aliquam brevitas gemino haero importunus mos utrum vulpes zelus. Ibidem minim sed. Ad bene hos odio oppeto. Blandit gilvus incassum nobis premo vindico. Duis letalis lobortis macto praesent. Adipiscing caecus esse praemitto.</p>
<p><strong>$base-font-monospace: Menlo, 'Ubuntu Mono', 'Lucida Console', 'Courier New', Courier, monospace;</strong></p>
<p class="base-font-monospace">Autem paulatim qui veniam vicis. Eligo elit esca letalis obruo pala plaga utrum. Aliquam brevitas gemino haero importunus mos utrum vulpes zelus. Ibidem minim sed. Ad bene hos odio oppeto. Blandit gilvus incassum nobis premo vindico. Duis letalis lobortis macto praesent. Adipiscing caecus esse praemitto.</p>6.3.1 #Variables - Fonts - Vertical Rythm Font-Sizes and Vertical Rhythm.
We will try to make vertical rythms based on the font-size settings used by the bwowser. This will enable most browsers tos scale our design propperly on font-Size changes (Strg + "+").
Base Font size is set 100%, which will be in most browsers 16px.
The default vertical margins gonna be the same as the base-lineheight.
This is an informal and Variable Section. Styles will be applyed in base/_typography.scss.
Global base font Sizes
Are fixed Pixel values applied to the html tag. They scale responsively according to the following:
$font-size-global--default: 17px
Should be close to browser font size of 16px and is the default for larger screens.
$font-size-global--tab: 15px</p
A little smaller fonts on screens up to $font-size-global--tab-media: (max-width: 900px)
$font-size-global--mobile: 13px
A little smaller fonts on screens up to $font-size-global--mobile-media (max-width: 400px)
This size is changed by the Browser when you (Strg+"+" or Strg+"-") and will be respected with any media query.
Use "em" in modules, that should be able to scale.
In SCSS components use relative font-sizes defined in em
The Variable $base-font-size is defined in em everything will scale with the base font sizes from above. Including the Vertical spacing Units
$vertical-space-tiny
and
$vertical-space
which might scale too.
Change font-size in a local context
Redefine Component context by using rem.
If you want to have a block with a different font-size, set the size in rem to your block. Everything should scale, because REM relates to the size set for the html element. The base font sizes from above.
This is based on the Article Font Size Idea: px at the Root, rem for Components, em for Text Elements at css-tricks.com
A block using default font-size
Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
A block using a font-base-site of 1.3 rem.
Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Now font-size context is 2rem.
Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.