Merge pull request #5 from MathisBurger/dev

merge to v1.0.1

Author: MathisBurger

.gitignore

@@ -3,3 +3,4 @@ main.css
 chocolate.min.css
 chocolate.css
 index.html
+scripts.zip

README.md

@@ -70,4 +70,5 @@ Check out the easy to use documentation and play arround with it.
 - <a href="documentation/flex.md">Flex</a>
 - <a href="documentation/navbar.md">Navbar</a>
 - <a href="documentation/sidebar.md">Sidebar</a>
+- <a href="documentation/cards.md">Cards</a>
 - <a href="documentation/scripts.md">Scripts</a>

cards/card.scss

@@ -0,0 +1,9 @@
+.card {
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.card-body {
+  margin-top: 3%;
+  width: 100%;
+}

cards/responsive.scss

@@ -0,0 +1,26 @@
+@import "sizes.scss";
+@import "../screen-sizes.scss";
+
+@media only screen and (max-width: $sm) {
+    .card-sm {
+        transform: scale(0.75);
+    }
+    .card-md {
+        transform: scale(0.75);
+    }
+    .card-lg {
+        transform: scale(0.73);
+    }
+}
+
+@media only screen and (max-width: $md) {
+    .card-sm {
+        transform: scale(0.90);
+    }
+    .card-md {
+        transform: scale(0.90);
+    }
+    .card-lg {
+        transform: scale(0.90);
+    }
+}

cards/sizes.scss

@@ -0,0 +1,43 @@
+@import "card.scss";
+
+.card-sm {
+  @extend .card;
+  width: 400px;
+  height: 200px;
+}
+
+.card-sm .card-heading {
+  font-size: 1.3em;
+}
+
+.card-sm .card-body {
+  font-size: 0.8em;
+}
+
+.card-md {
+  @extend .card;
+  width: 450px;
+  height: 550px;
+}
+
+.card-md .card-heading {
+  font-size: 2em;
+}
+
+.card-md .card-body {
+  font-size: 1em;
+}
+
+.card-lg {
+  @extend .card;
+  width: 600px;
+  height: 750px;
+}
+
+.card-lg .card-heading {
+  font-size: 3.5em;
+}
+
+.card-lg .card-body {
+  font-size: 1.2em;
+}

cards/theme.scss

@@ -0,0 +1,29 @@
+@import "card.scss";
+
+@mixin cardTheme($class-name, $bg-color, $shadow-color, $text-color) {
+
+  .card.#{$class-name} {
+    background: $bg-color;
+    box-shadow: 1px 1px 1px $shadow-color;
+    transition: .3s;
+  }
+
+  .card.#{$class-name}:hover {
+    filter: brightness(1.1);
+    box-shadow: 3px 3px 3px $shadow-color;
+  }
+
+  .card.#{$class-name} .card-heading {
+    font-family: "Roboto", sans-serif;
+    color: $text-color;
+    text-align: center;
+    word-wrap: normal;
+  }
+
+  .card.#{$class-name} .card-body {
+    color: $text-color;
+    text-align: center;
+    font-family: "Roboto", sans-serif;
+    word-wrap: normal;
+  }
+}

documentation/cards.md

@@ -0,0 +1,56 @@
+# Card documentation
+
+This part of the documentation will show you how to use the cards<br>
+of ChocolateCSS.
+
+# Basic usage
+
+Using the cards of ChocolateCSS is as easy as using the other components. 
+
+```html
+<div class="card-md card-dark">
+    <div class="card-heading">Heading</div>
+    <div class="card-body">
+        Some example text.
+    </div>
+</div>
+```
+
+The other `div` tag defines the card. The main class `div-md`
+defines the size of the card.
+
+There are three different card-sizes.
+
+- `card-sm`
+- `card-md`
+- `card-lg`
+
+<strong>NOTE:</strong> The size of the card changes, if you are resizing the window or using another device.
+
+The `card-dark` defines the theme of the card. There are three different themes.
+
+- `card-light`
+- `card-grey`
+- `card-dark`
+
+
+# Heading
+
+Every card has its own heading. You can use it by putting following line of code into your main `card` div.
+
+```html
+<div class="card-heading">Heading</div>
+```
+
+The size of the heading depends on the size of the card.
+
+
+# Card body
+
+The card body contains the main content of the card.
+
+```html
+<div class="card-body">
+    Card content
+</div>
+```

main.scss

@@ -21,6 +21,11 @@
 @import "./flex/row.scss";
 @import "./flex/constants.scss";
 
+// Card
+@import "./cards/sizes.scss";
+@import "./cards/theme.scss";
+@import "./cards/responsive.scss";
+
 
 
 // Buttons
@@ -51,4 +56,9 @@
 // Flex row
 @include rowShape(row-sm, $sm);
 @include rowShape(row-md, $md);
-@include rowShape(row-lg, $lg);
+@include rowShape(row-lg, $lg);
+
+// Card
+@include cardTheme(card-light, #fff, rgba(0,0,0,0.4), #000);
+@include cardTheme(card-grey, #303030, rgba(0,0,0,0.6), #fff);
+@include cardTheme(card-dark, #161616, rgba(0,0,0,0.6), #fff);

screen-sizes.scss

@@ -0,0 +1,2 @@
+$sm: 680px;
+$md: 1100px;