More changes to class avaibility

Author: Dave Redfern

inc/lib/helper.php

@@ -8,7 +8,7 @@ function parseCss($pattern) {
  $previous_group = 'x';
 
  $matches = array();
- $regex = '/' . $pattern . '([^\s,{"]+)?/';
+ $regex = '/' . $pattern . '([^\s,{\]"]+)?/';
 
  preg_match_all($regex, $css_contents, $matches);
  //sort($matches[0]);

pattern/utility/separator/base.php

@@ -1,21 +1,26 @@
 <div class="grid g-gutter">
+ <div>
+ <div class="u-block u-separator u-fill-neutral-lightest">
+ Top
+ </div>
+ </div>
  <div class="g-col-xs-6 g-col-md-3">
- <div class="u-block u-separator-top">
+ <div class="u-block u-separator-top u-fill-neutral-lightest">
  Top
  </div>
  </div>
  <div class="g-col-xs-6 g-col-md-3">
- <div class="u-block u-separator-bottom">
+ <div class="u-block u-separator-bottom u-fill-neutral-lightest">
  Bottom
  </div>
  </div>
  <div class="g-col-xs-6 g-col-md-3">
- <div class="u-block u-separator-left">
+ <div class="u-block u-separator-left u-fill-neutral-lightest">
  Left
  </div>
  </div>
  <div class="g-col-xs-6 g-col-md-3">
- <div class="u-block u-separator-right">
+ <div class="u-block u-separator-right u-fill-neutral-lightest">
  Right
  </div>
  </div>

pattern/utility/separator/readme.php

@@ -0,0 +1,11 @@
+<p>Separators add a border around a div or to one specific side.</p>
+<h4>Available classes:</h4>
+
+<?php $classes = parseCss('u-separator'); ?>
+<div class="cc-classes">
+ <ul>
+ <?php foreach($classes as $class) : ?>
+ <li><code>.<?php echo $class; ?></code></li>
+ <?php endforeach; ?>
+ </ul>
+</div>

pattern/utility/space/base.php

@@ -1,3 +1,5 @@
-<div class="u-space u-fill-grey-lighter">
- <p>Text inside block</p>
+<div class="u-clearfix u-fill-neutral-lightest">
+ <div class="u-space u-fill-neutral-lighter">
+ <p>Text inside block</p>
+ </div>
 </div>

pattern/utility/space/readme.php

@@ -1 +1,13 @@
 <p>Adds small margins to elements. Can pass through a size and position. Position accepts top or bottom. Size accepts values inside the spacing variables array. Position is optional. Will apply to both top and bottom without it.</p>
+
+<h4>Available classes:</h4>
+
+<?php $classes = parseCss('u-space'); ?>
+<div class="cc-classes">
+ <ul>
+ <?php foreach($classes as $class) : ?>
+ <li><code>.<?php echo $class; ?></code></li>
+ <?php endforeach; ?>
+ </ul>
+</div>
+

pattern/utility/visible/hidden-media.php

@@ -0,0 +1,34 @@
+<p>Visibibility classes show and hide content at different breakpoints.</p>
+
+<h4>Visible Classes</h4>
+
+<?php $classes = parseCss('u-visible'); ?>
+<div class="cc-classes">
+ <ul>
+ <?php foreach($classes as $class) : ?>
+ <li><code>.<?php echo $class; ?></code></li>
+ <?php endforeach; ?>
+ </ul>
+</div>
+
+<h4>Hidden Classes</h4>
+
+<?php $classes = parseCss('u-hidden'); ?>
+<div class="cc-classes">
+ <ul>
+ <?php foreach($classes as $class) : ?>
+ <li><code>.<?php echo $class; ?></code></li>
+ <?php endforeach; ?>
+ </ul>
+</div>
+
+<h4>Visually Hidden Classes</h4>
+
+<?php $classes = parseCss('u-visually'); ?>
+<div class="cc-classes">
+ <ul>
+ <?php foreach($classes as $class) : ?>
+ <li><code>.<?php echo $class; ?></code></li>
+ <?php endforeach; ?>
+ </ul>
+</div>