hr

<h1 class="h1">H1 Heading</h1>
<h2 class="h2">H2 Heading</h2>
<h3 class="h3">H3 Heading</h3>
<h4 class="h4">H4 Heading</h4>
<h5 class="h5">H5 Heading</h5>
<h6 class="h6">H6 Heading</h6>
<p class="p"> 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
hr
- var types  = ['primary', 'secondary', 'texts', 'succes', 'error'];
- var levels = [0,1,2,3,4,5];
.palett
  each type in types
    .type-row    
      each level in levels
        div(class='palett-cell color-' + type + '-'+level)
        
hr

table.ui-table
  tr
    td
      button.btn="Button"
    td
      button.btn.--hover="Button"
    td
      button.btn.--active="Button"
    td
      button.btn.--disabled="Button"
  tr
    td
      button.btn.btn--secondary="Button"
    td
      button.btn.btn--secondary.--hover="Button"
    td
      button.btn.btn--secondary.--active="Button"
    td
      button.btn.btn--secondary.--disabled="Button"
View Compiled
$step = 4px;
step($i){
  round($i) * $step
}

$baseFontSize = 5;
$baseLineHeight = 7;

$headerFontSize = ();
$headerLineHeigh = ();
for $i in (1..6)
   $_size = (7 - $i)
   $headerLineHeigh[$i] =  $baseLineHeight * ($_size*.5 +1)
   $headerFontSize[$i] =  $baseFontSize * ($_size*.5 + 1)
   //$headerFontSize[$i] =  $baseFontSize * 2.5 - $i + 1
   //$headerLineHeigh[$i] =  $headerFontSize[$i] + 2 
  
//==================================================================================
//==================================================================================
//==================================================================================
 
$basePrimary= #00ff00
$baseSecondary= #FF8900
$baseTexts= #222
$baseSucces= #89FF00
$baseError= #FF2C00
$baseBg= #FFFFFF
$levels = 0..5

getPrimary($color, $level){
  lighten($color, $level*10%)
}
getSecondary($color, $level){
  desaturate(lighten($color, $level*5%), $level*10);
}
getTexts($color, $level){
  lighten($color, $level*5);
}
getSucces($color, $level){
  darken($color, $level*10%);
}
getError($color, $level){
  desaturate($color, $level*20);
}


//================================================================================

$primary = {};
$secondary = {};
$texts = {};
$succes = {};
$error = {};

for $level in $levels{
  $primary[$level] =  getPrimary($basePrimary, $level);
  $secondary[$level] = getSecondary($baseSecondary, $level);
  $texts[$level] =  getTexts($baseTexts, $level);
  $succes[$level] =  getSucces($baseSucces, $level);
  $error[$level] =  getError($baseError, $level);
}

$colors = {
  'primary' : $primary
  'secondary' : $secondary
  'texts' : $texts
  'succes' : $succes
  'error': $error
}

//================================================================================  

$ui_fontColor = $colors['texts'][2]
$ui_fontSize = $baseFontSize
$ui_padding_v = 5 
$ui_padding_h = 7

$ui_color_base = $colors.primary[2]
$ui_color_hover = $colors.primary[1]
$ui_color_active = $colors.primary[2]
$ui_color_inactive = $colors.primary[5]

$ui_secondary_color_base = $colors.secondary[2]
$ui_secondary_color_hover = $colors.secondary[1]
$ui_secondary_color_active = $colors.secondary[2]
$ui_secondary_color_inactive = $colors.secondary[5]



//================================================================================  
//==================================================================================
//==================================================================================
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");

body
  font-family: "Open Sans"
  font-size: step($baseFontSize);

for $i in (1..6)
  .h{$i}
    line-height: step($headerLineHeigh[$i]);
    font-size  : step($headerFontSize[$i]);

.p
   line-height: step($baseLineHeight);
   font-size  : step($baseFontSize);


for $name in $colors {  
  for $level in $levels {
    .color-{$name}-{$level} {
      background-color: $colors[$name][$level]
    }
  }
}

.palett
  display flex
  flex-direction column 
  
.type-row 
  display flex
  flex-direction row 
  
.palett-cell
  width: 100px
  height: 50px
  border: 1px solid black
  margin: 5px
  
.ui-table 
  width: 80%
  margin: 50px 10%
  
  td
    border 1px solid #777
    vertical-align: center
    text-align: center
    padding: 30px 
  
.btn {
  height: step($ui_fontSize + 2 * $ui_padding_v)
  padding: step($ui_padding_v) step($ui_padding_h)
  font-size: step($ui_fontSize)
  line-height: step($ui_fontSize)
  background-color: $ui_color_base
  color: $baseBg
  border: none
  
  &.--hover {
    background-color: $ui_color_hover
  }
  &.--active {
    background-color: $ui_color_active
  }
  &.--disabled {
    background-color: $ui_color_inactive
  }
}

.btn--secondary {
  background-color: $ui_secondary_color_base
  &.--hover {
    background-color: $ui_secondary_color_hover
  }
  &.--active {
    background-color: $ui_secondary_color_active
  }
  &.--disabled {
    background-color: $ui_secondary_color_inactive
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.