Browse Source

adding

master
nirgendswo 7 years ago
parent
commit
8d988de390
13 changed files with 70 additions and 44 deletions
  1. +3
    -3
      scss/CrispyBoilerplate.scss
  2. +5
    -3
      scss/components/_align.scss
  3. +3
    -0
      scss/components/_body.scss
  4. +2
    -2
      scss/components/_button.scss
  5. +6
    -4
      scss/components/_heading.scss
  6. +1
    -1
      scss/components/_icon.scss
  7. +3
    -0
      scss/components/_normalize.scss
  8. +3
    -1
      scss/components/_text-colors.scss
  9. +10
    -25
      scss/functions/_units.scss
  10. +11
    -2
      scss/functions/_zIndex.scss
  11. +1
    -1
      scss/mixins/_clearfix.scss
  12. +13
    -1
      scss/mixins/_font-size.scss
  13. +9
    -1
      scss/mixins/_list.scss

+ 3
- 3
scss/CrispyBoilerplate.scss View File

@ -2,10 +2,10 @@
'../../node_modules/normalize.css/normalize.css' '../../node_modules/normalize.css/normalize.css'
'functions/units', 'functions/units',
'functions/zIndex',
'functions/z-index',
'mixins/clearfix', 'mixins/clearfix',
'mixins/fontSize',
'mixins/font-size',
'mixins/list', 'mixins/list',
'components/align', 'components/align',
@ -15,4 +15,4 @@
'components/icon', 'components/icon',
'components/list', 'components/list',
'components/normalize', 'components/normalize',
'components/textColors';
'components/text-colors';

+ 5
- 3
scss/components/_align.scss View File

@ -1,9 +1,11 @@
/** /**
* align
* align
* *
* - text
* - floating for elements
* - centering with margin
* *
*
* @author Björn Hase
* @author Björn Hase
* *
*/ */


+ 3
- 0
scss/components/_body.scss View File

@ -1,3 +1,6 @@
@import
'../mixins/font-size';
/** /**
* body * body
* *


+ 2
- 2
scss/components/_button.scss View File

@ -1,7 +1,7 @@
/** /**
* Buttons
* button
*
* *
* mixin for basic styles of buttons
* *
* @author Björn Hase * @author Björn Hase
* *


+ 6
- 4
scss/components/_heading.scss View File

@ -1,11 +1,13 @@
@import @import
'../mixins/units',
'../mixins/fontSize';
'../functions/units',
'../mixins/font-size';
/** /**
* heading * heading
* *
* basic styles for heading
* loop to create for all heading styles
* creating css-classes with same naming
*
* *
* @author Björn Hase * @author Björn Hase
* *
@ -35,7 +37,7 @@ $heading__margin: 0 0 pxToEm(20px) !default;
margin: $heading__margin; margin: $heading__margin;
@include font-size($font-size); @include font-size($font-size);
@content; @content;
} }
} }


+ 1
- 1
scss/components/_icon.scss View File

@ -1,7 +1,7 @@
/** /**
* icon * icon
* *
* basic styles for icon
* use svg as icon
* *
* <svg class="icon"> * <svg class="icon">
* <use src="#"></use> * <use src="#"></use>


+ 3
- 0
scss/components/_normalize.scss View File

@ -1,3 +1,6 @@
@import
'../functions/units';
/** /**
* normalize * normalize
* *


scss/components/_textColors.scss → scss/components/_text-colors.scss View File

@ -1,5 +1,7 @@
/** /**
* classes as modificators for text-color
* text-colors
*
* modificators for text-color
* *
* *
* @author Björn Hase * @author Björn Hase

+ 10
- 25
scss/functions/_units.scss View File

@ -1,10 +1,17 @@
/**
* functions to convert px to em and rem
*
*
* @author Björn Hase
*
*/
$base__font-size: 16px !default; $base__font-size: 16px !default;
$base__line-height: 1.5 !default;
/** /**
* calculate pixel value to em * calculate pixel value to em
* *
* @param {px} $font-size
* @param {px} $fontSize
* @return {em} * @return {em}
*/ */
@function pxToEm($font-size) { @function pxToEm($font-size) {
@ -14,32 +21,10 @@ $base__line-height: 1.5 !default;
/** /**
* calculate px value to rem * calculate px value to rem
* *
* @param {px} $px
* @param {px} $fonz-size
* @param {px} $font-size * @param {px} $font-size
* @return {em} * @return {em}
*/ */
@function pxToRem($font-size) { @function pxToRem($font-size) {
@return ($font-size / $base__font-size) * 1rem; @return ($font-size / $base__font-size) * 1rem;
} }
/**
* calculate em value to rem
*
* @param {em} $value
* @param {px} $font-size
* @return {px}
*/
@function emToPx($value, $font-size: $base__font-size) {
@return ($value * $font-size) * 1px;
}
/**
* calculate line-height with font-size
*
* @param {px} $font-size
* @param {unitless} $base-line-height
* @return {unitless}
*/
@function lineHeight($font-size, $line-height: $base-line-height) {
@return unitless(emToPx($line-height * 1em) / $font-size);
}

+ 11
- 2
scss/functions/_zIndex.scss View File

@ -1,6 +1,7 @@
/** /**
* z-index
* *
*
* handle z-index
* *
* *
* @author Björn Hase * @author Björn Hase
@ -12,7 +13,15 @@ $z-indexes: (
'modal': 1000 'modal': 1000
) !default; ) !default;
@function z-index($name) {
/**
* z-index
*
*
*
* @return
*
*/
@function zIndex($name) {
@if index($z-indexes, $name) { @if index($z-indexes, $name) {
@return map($z-indexes, $name); @return map($z-indexes, $name);
} @else { } @else {


+ 1
- 1
scss/mixins/_clearfix.scss View File

@ -6,7 +6,7 @@
* *
*/ */
@mixin crispy-boilerplate-clearfix() {
@mixin clearfix() {
&::before, &::before,
&::after { &::after {
display: table; display: table;


scss/mixins/_fontSize.scss → scss/mixins/_font-size.scss View File

@ -1,10 +1,22 @@
@import
'../functions/units';
/**
* font-size
*
*
* @author Björn Hase
*
*/
/** /**
* add font-size with fallback * add font-size with fallback
* *
* @param {px} $font-size * @param {px} $font-size
* *
*/ */
@mixin fontSize($font-size) {
@mixin font-size($font-size) {
font-size: $font-size; font-size: $font-size;
font-size: pxToRem($font-size); font-size: pxToRem($font-size);
} }

+ 9
- 1
scss/mixins/_list.scss View File

@ -1,7 +1,15 @@
/** /**
* list
* list
* *
* *
* @author Björn Hase
*
*/
/**
* clear default styles from list
*
* *
*/ */
@mixin crispy-boilerplate-list-clear() { @mixin crispy-boilerplate-list-clear() {


Loading…
Cancel
Save