Half-working

.gitignore

@@ -1 +1,2 @@
 node_modules/*
+styleguide/

package.json

@@ -20,5 +20,8 @@
   "homepage": "https://github.com/f-o-a-m/foam.css#readme",
   "dependencies": {
     "node-sass": "^4.6.0"
+  },
+  "devDependencies": {
+    "kss": "^3.0.0-beta.18"
   }
 }

styles/components/_bubbles.scss

@@ -1,3 +1,7 @@
+// Bubbles
+//
+// Style guide: foam.components.bubbles
+
 $bubbleWidth: 13rem; // since this only concerns the bubble this can be placed here
 
 .mapboxgl-marker {

styles/components/_card.scss

@@ -1,3 +1,18 @@
+// Cards
+//
+// Everything card related goes here
+//
+// Style guide: foam.components.cards
+
+
+
+// .cardContainer(@color)
+//
+// @color is the color of the card
+//
+// Markup: markup/_bubbles.hbs
+//
+// Style guide: foam.components.cardContainer
 .cardContainer{
   @include shadow-l
   @include radius-card;
@@ -32,6 +47,14 @@
   margin-top: $d-2;
 }
 
+// .button-card
+//
+// :hover     - Highlight the button when hovered.
+// :active    - "Press" the button down when clicked.
+//
+// Markup: markup/_card.hbs
+//
+// Style guide: foam.components.button-card
 .button-card{
   @include pill;
   @include shadow-l;
@@ -82,7 +105,9 @@
   margin: 1.2rem -1.2rem -1.2rem -1.2rem;
 }
 
-
+// .card-input
+//
+// Style guide: foam.card.card-input
 .card-input{
   @include pill;
   @include padding-interface;

styles/components/_topbar.scss

@@ -1,3 +1,9 @@
+// Topbar
+//
+// The stuff that goes into the topbar
+//
+// Style guide: foam.components.topbar
+
 #topBarContainer{
   display: block;
   padding: $d-1;
@@ -7,12 +13,26 @@
   right:0;
 }
 
+// .button-newCSC
+//
+// Creates button for new CSC
+//
+// Markup: markup/_button-newCSC.hbs
+//
+// Style guide: foam.components.button-newCSC
 .button-newCSC{
   @include padding-interface;
   @include pill-glass;
   @include hover-glass;
 }
 
+// .button-foam
+//
+// Creates button for showing FT balance
+//
+// Markup: markup/_button-foam.hbs
+//
+// Style guide: foam.components.button-foam
 .button-foam{
   @include padding-interface;
   @include pill-glass;

styles/components/markup/_bubbles.hbs

@@ -0,0 +1,13 @@
+{{!--
+<a href="#" class="button-card {{modifier_class}}">Link Button</a>
+--}}
+
+<div class="cardContainer">
+  <div class="card-lightWrap">
+    <p> testing </p>
+  </div>
+</div>
+
+{{!-- 
+<input type="button" class="button-card {{modifier_class}}" value="input[type='button']"/>
+--}}

styles/components/markup/_card.hbs

@@ -0,0 +1,9 @@
+{{!--
+<a href="#" class="button-card {{modifier_class}}">Link Button</a>
+--}}
+
+<button class="button-card {{modifier_class}}">Button Element</button>
+
+{{!-- 
+<input type="button" class="button-card {{modifier_class}}" value="input[type='button']"/>
+--}}