adding styles

README.md

@@ -1,9 +1,11 @@
 # cripsy-boilerplate
 
-A simple mini-framework for basic styling.
+A simple mini-framework for basic styling and few Functions to simplify handling with values.
 
 ## Components
 
+There a few Components that also provide a Closure to adding additional Styles.
+
 ### body
 
 Styles for Body, including Format for Fonts and Colors.
@@ -18,15 +20,15 @@ Basic Styles for SVG-Icons.
 
 ### list
 
-Basic Styles for
+Additional Styles for lists, also Modificators for horzizonal lists.
 
 ### heading
 
 Styling h1-h6 and create also CSS-Classes with same name.
 
-### Normalize
+### normalize
 
-Basic Normalizing for a few Elements.
+Basic Normalizing for a few Elements. Also adding to some elements a basic margin.
 
 ## Functions
 
@@ -38,7 +40,7 @@ Function to convert from px to em or rem.
 
 ### clearfix
 
-Adding Clearfix
+Styling for Clearfix with pseudo-classes.
 
 ### fontSite
 

scss/CrispyBoilerplate.scss

@@ -6,10 +6,13 @@
 
     'mixins/clearfix',
     'mixins/fontSize',
+    'mixins/list',
 
-    'components/button',
+    'components/align',
     'components/body',
-    'components/icon',
+    'components/button',
     'components/heading',
+    'components/icon',
+    'components/list',
     'components/normalize',
-    'components/list';
+    'components/textColors';

scss/components/_align.scss

@@ -0,0 +1,43 @@
+/**
+ * align
+ *
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin crispy-boilerplate-align() {
+    .--text-left {
+        text-align: left;
+    }
+
+    .--text-right {
+        text-align: right;
+    }
+
+    .--text-center {
+        text-align: center;
+    }
+
+    .--text-justify {
+        text-align: justify;
+    }
+
+    .--float-left {
+        float: left;
+    }
+
+    .--float-right {
+        float: right;
+    }
+
+    .--float-none {
+        float: none;
+    }
+
+    .--centered {
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

scss/components/_list.scss

@@ -17,6 +17,10 @@
                 float: left;
             }
         }
+
+        &--no-style {
+            list-style: none;
+        }
     }
 
     .d-list {

scss/components/_textColors.scss

@@ -0,0 +1,23 @@
+/**
+ * classes as modificators for text-color
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+$text-colors: (
+    'success': $base-color-success,
+    'warning': $base-color-warning,
+    'danger': $base-color-danger,
+    'white': white,
+    'black': black
+) !default;
+
+@mixin crispy-boilerplate-text-colors() {
+     @each $name, $color in $text-colors {
+        .--text-#{$name} {
+            color: $color;
+        }
+    }
+}

scss/mixins/_list.scss

@@ -0,0 +1,16 @@
+/**
+ *  list
+ *
+ *
+ * 
+ */
+@mixin cripsy-boilerplate-list-reset() {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+        margin: 0;
+        padding: 0;
+    }
+}