adding body

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+build
+*.DS_Store
+Thumbs.db
+.idea
+*.log

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 Nirgendswo
+Copyright (c) 2017 Björn Hase
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "crispy-boilerplate",
+  "version": "0.1.0",
+  "description": "Flat Sass Framework, to give you a amount of Basic Settings, Mixins and Functions",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:nirgendswo/crispy-boilerplate.git"
+  },
+  "author": "Björn Hase",
+  "license": "MIT",
+  "dependencies": {
+    "normalize.css": "^7.0.0",
+  }
+}

scss/CrispyBoilerplate.scss

@@ -0,0 +1,15 @@
+@import
+    '../../node_modules/normalize.css/normalize.css'
+
+    'functions/units',
+    'functions/z-index',
+
+    'mixins/clearfix',
+    'mixins/fontSize',
+
+    'components/button',
+    'components/body',
+    'components/icon',
+    'components/heading',
+    'components/normalize',
+    'components/list';

scss/components/body.scss

@@ -0,0 +1,34 @@
+/**
+ *  body
+ *
+ *
+ *
+ *  @author Björn Hase
+ *
+ */
+
+$body__font-size: 12px !default;
+$body__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
+
+$body__line-height: 1.5 !default;
+$body__direction: ltr !default;
+
+$body__color: black !default;
+$body__backgroun-color: white !default;
+
+@mixin cripsy-boilerplate-body {
+    body {
+        font-family: $body__font-family;
+        font-weight: normal;
+        line-height: $body__line-height;
+
+        color: $body__color;
+        background-color: $body__background-color;
+
+        direction: $body__direction;
+
+        @include font-size($body__font-size);
+
+        @content;
+    }
+}

scss/components/button.scss

@@ -0,0 +1,33 @@
+/**
+ * Buttons
+ *
+ * mixin for basic styles of buttons
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin cripsy-boilerplate-button() {
+    .button {
+        position: relative;
+        display: inline-block;
+
+        vertical-align: middle;
+        appearance: none;
+
+        &--wide {
+            width: 100%;
+        }
+
+        &:hover {
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        &:focus {
+            outline: none;
+        }
+
+        @content;
+    }
+}

scss/components/heading.scss

@@ -0,0 +1,42 @@
+@import
+    '../mixins/units',
+    '../mixins/fontSize';
+
+/**
+ * heading
+ *
+ * basic styles for heading
+ *
+ * @author Björn Hase
+ *
+ */
+
+$heading__font-sizes: (
+    'h1': 36px,
+    'h2': 30px,
+    'h3': 24px,
+    'h4': 18px,
+    'h5': 14px,
+    'h6': 12px
+) !default;
+
+$heading__font-weight: bold !default;
+$heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
+
+$heading__line-height: 1.5 !default;
+$heading__margin: 0 0 pxToEm(20px) !default;
+
+@mixin cripsy-boilerplate-heading {
+    @each $h, $font-size in $heading__font-sizes {
+        #{$h}, .#{$h} {
+            font-family: $heading__font-family;
+			font-weight: $heading__font-weight;
+			line-height: $heading__line-height;
+            margin: $heading__margin;
+
+            @include font-size($font-size);
+            
+            @content;
+        }
+    }
+}

scss/components/icon.scss

@@ -0,0 +1,27 @@
+/**
+ * icon
+ *
+ * basic styles for icon
+ *
+ * <svg class="icon">
+ *     <use src="#"></use>
+ * </svg>
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$icon__vertical-align: middle !default;
+$icon__margin: 0 2px !default;
+
+@mixin cripsy-boilerplate-icon() {
+    .icon {
+        display: inline-block;
+        position: relative;
+        vertical-align: $icon__vertical-align;
+        margin: $icon__margin;
+
+        @content;
+    }
+}

scss/components/list.scss

@@ -0,0 +1,33 @@
+/**
+ * list
+ *
+ * styles and mixins for ul-element
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin cripsy-boilerplate-list {
+    .list {
+        list-style-position: outside;
+
+        &--horizontal {
+            .list__item {
+                float: left;
+            }
+        }
+    }
+
+    .d-list {
+        &--horizontal {
+            .d-list__title, .d-list__content {
+                float: left;
+            }
+
+            .d-list__content {
+                clear: left;
+            }
+        }
+    }
+}

scss/components/normalize.scss

@@ -0,0 +1,46 @@
+/**
+ * normalize
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$normalize__margin: 0 0 pxToEm(20px) !default;
+
+@mixin cripsy-boilerplate-normalize {
+    html {
+        font-size: 100%;
+    }
+
+    body,
+    html {
+        height: 100%;
+    }
+
+    html,
+    legend {
+        box-sizing: border-box;
+    }
+
+    *,
+    *::after,
+    *::before {
+        box-sizing: inherit;
+    }
+
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+
+    p {
+        margin: $normalize__margin;
+    }
+
+    ul, ol, dl {
+        margin: $normalize__margin;
+    }
+
+    @content;
+}

scss/example.scss

@@ -0,0 +1,8 @@
+@import
+    'CrispyBoilerplate';
+
+@include cripsy-boilerplate-normalize();
+@include cripsy-boilerplate-body();
+@include crispy-boilerplate-heading();
+@include cripsy-boilerplate-icon();
+@include cripsy-boilerplate-list();

scss/functions/units.scss

@@ -0,0 +1,45 @@
+$base__font-size: 16px !default;
+$base__line-height: 1.5 !default;
+
+/**
+ * calculate pixel value to em
+ *
+ * @param  {px} $font-size
+ * @return {em}
+ */
+@function pxToEm($font-size) {
+    @return ($font-size / $base__font-size) * 1em;
+}
+
+/**
+ * calculate px value to rem
+ *
+ * @param  {px} $px
+ * @param  {px} $font-size
+ * @return {em}
+ */
+@function pxToRem($font-size) {
+    @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);
+}

scss/functions/z-index.scss

@@ -0,0 +1,22 @@
+/**
+ *
+ *
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$z-indexes: (
+    'site-header': 100,
+    'modal': 1000
+) !default;
+
+@function z-index($name) {
+    @if index($z-indexes, $name) {
+        @return map($z-indexes, $name);
+    } @else {
+        @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
+        @return null;
+    }
+}

scss/mixins/clearfix.scss

@@ -0,0 +1,19 @@
+/**
+ * clearfix
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin clearfix() {
+    &::before,
+    &::after {
+        display: table;
+        content: ' ';
+    }
+
+    &::after {
+        clear: both;
+    }
+}

scss/mixins/fontSize.scss

@@ -0,0 +1,10 @@
+/**
+ * add font-size with fallback
+ *
+ * @param {px} $font-size
+ *
+ */
+@mixin fontSize($font-size) {
+    font-size: $font-size;
+    font-size: pxToRem($font-size);
+}