utility-first css

More basscss compliant

_includes/nutritional-information.html

@@ -4,7 +4,7 @@
 {% if page.nutrition['servingSize'] != nil %}
 ({{ page.nutrition['servingSize'] }})
 {% endif %}</h4>
-<div itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
+<div class="flex flex-wrap" itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
 {% assign nutrients = page.nutrition %}
 {% for nutrient in nutrients  %}
   {% if nutrient.first == 'servingSize' %}{% continue %}{% endif %}
@@ -12,8 +12,8 @@
   {% assign name = site.data.nutrients[itemprop].name %}
   {% assign value = nutrient.last %}
   {% assign unit = site.data.nutrients[itemprop].unit %}
-  <div  class="rounded center border border-gray col-2 nutrient ">
-    <h5 class="bg-gray white">{{ name  }}</h5>
+  <div  class="rounded center border border-1 border-gray sm-col sm-col-2 lg-col-1 mr1 mb1">
+    <h5 class="bg-gray white m0 p1 capitalize">{{ name  }}</h5>
     <p itemprop="{{ itemprop }}">{{ value }}{{ unit }}</p>
   </div>
   {% endfor %}

css/main.scss

@@ -48,20 +48,6 @@ a:hover .image{opacity:0.2;}
 .recipes .sm-col{border-bottom:3px solid white}
 }
 
-div[itemprop="nutrition"] {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: start;
-  align-items: stretch;
-  .nutrient {
-    margin: 0 .2rem .2rem 0;
-    border-width: 1px;
-    h5 {
-      text-transform: capitalize;
-      margin: 0;
-      padding: 0.4rem;
-    }
-  }
-
-}
+.border-1 { border-width: 1px; }
+.border-1:active { border-width: 1px; }
+.capitalize { text-transform: capitalize; }