jekyll_patternbot 1.0.3 → 1.1.0

data/_patterns/modules/utility-classes.yml

@@ -0,0 +1,196 @@
+# Direct copy from: https://learn-the-web.algonquindesign.ca/topics/modulifier-cheat-sheet/
+
+images:
+  - class: '.img-flex'
+    description: 'Make images 100% the width of their container.'
+  - class: '.image-replacement'
+    description: 'A class (and a shorter version `.ir`) that will hide all the text inside an element and allow only the background-image to show.'
+  - class: '.embed'
+    description: 'The wrapper class for making responsive embedded resources like images and videos.'
+  - class: '.embed-item'
+    description: 'The class to be added directly to the embedded image or video.'
+
+embed_sizes:
+  - class: '.embed-1by1'
+    description: 'Square.'
+  - class: '.embed-4by3'
+    description: 'Traditional TV/computer screens.'
+  - class: '.embed-iso216'
+    description: 'A-standard paper sizes.'
+  - class: '.embed-3by2'
+    description: 'Classic 35 mm film & most digital photos, landscape.'
+  - class: '.embed-2by3'
+    description: 'Classic 35 mm film & most digital photos, portrait.'
+  - class: '.embed-golden'
+    description: 'The Golden Ratio.'
+  - class: '.embed-16by9'
+    description: 'HDTV.'
+  - class: '.embed-185by100'
+    description: 'Common widescreen cinema.'
+  - class: '.embed-24by10'
+    description: 'Widescreen cinema: 2.4:1.'
+  - class: '.embed-3by1'
+    description: 'Panorama photos.'
+  - class: '.embed-4by1'
+    description: 'Polyvision.'
+  - class: '.embed-5by1'
+    description: 'Really, really wide…'
+
+lists:
+  - class: '.list-group'
+    description: |
+      The `.list-group` class that will remove bullets and padding from lists, so semantically they can be lists but no visually.
+
+      When added to a `<dl>` tag, there is a little responsiveness to how the `<dt>` and `<dd>` tags flow.
+  - class: '.list-group-inline'
+    description: |
+      The `.list-group-inline` class that will force the `<li>` tags onto the same line.
+
+      When added to the `<dl>` tag, the `<dt>` and `<dd>` tags will sit on the same line if there is enough space.
+
+media_objects:
+  - class: '.media'
+    description: 'A wrapper class to surround image & text groups, especially if the images is to be beside the text.'
+  - class: '.media-img'
+    description: 'A class for adding to the image, or surrounding `<div>`, within the media object.'
+  - class: '.media-body'
+    description: 'A class to add to the text, or surrounding `<div>`, within the media object.'
+  - class: '.media-img-reversed'
+    description: 'Instead of floating the image left it will float: right'
+  - class: '.media-img-stacked'
+    description: 'Will disable floating and have the image above the text instead.'
+
+skip_links:
+  - class: '.skip-links'
+    description: 'Adds all the CSS necessary for creating basic skip links.'
+
+hidden:
+  - class: '.hidden'
+    description: 'Makes sure the hidden attribute works in all browsers and provides a .hidden class.'
+  - class: '.visually-hidden'
+    description: 'A class that will hide something from the visual screen but still allow it to be accessible via tools.'
+  - class: '.focusable'
+    description: 'To be added to the .visually-hidden class to allow the keyboard to access the element.'
+  - class: '.invisible'
+    description: 'A class that will hide an element on the screen, but its space will still be there.'
+  - class: '.crop'
+    description: 'These classes that will chop/crop overflowing elements off—essentially just overflow: hidden'
+  - class: '.truncate'
+    description: 'A class that will chop single lines of text off and add an ellipsis at the end.'
+  - class: '.scrollable'
+    description: 'A class that make an element horizontally scrollable, good for simple responsive tables.'
+
+positioning:
+  - class: '.clearfix'
+    description: 'A class that can be used on floating wrappers to trigger a clear fix.'
+  - classes:
+      - '.left'
+      - '.right'
+    description: 'Will float the element to the left or the right.'
+  - classes:
+      - '.inline'
+      - '.inline-block'
+      - '.ib'
+      - '.block'
+    description: 'Classes to control the display property between inline, inline-block, and block.'
+  - classes:
+      - '.valign-top'
+      - '.valign-middle'
+      - '.valign-bottom'
+    description: 'These classes allow you to control the vertical-align property on inline and inline-block elements or within tables.'
+  - classes:
+      - '.fixed'
+      - '.relative'
+      - '.absolute'
+      - '.static'
+    description: 'Classes to control the position property of an element.'
+  - classes:
+      - '.zindex-1'
+      - '.zindex-2'
+      - '.zindex-3'
+      - '.zindex-1000'
+    description: 'Classes to control three basic z-index states on an element.'
+  - classes:
+      - '.pin-left-top'
+      - '.pin-right-top'
+      - '.pin-left-bottom'
+      - '.pin-right-bottom'
+      - '.pin-center-top'
+      - '.pin-center-bottom'
+      - '.pin-left-center'
+      - '.pin-right-center'
+      - '.pin-center'
+    description: |
+      A series of classes for moving a position: absolute element to different common locations.
+
+      The `.pin-*` classes will automatically add position: absolute so adding the class .absolute also isn’t necessary.
+
+      Simplified versions are available: `.pin-lt`, `.pin-rt`, `pin-lb`, `.pin-rb`, `.pin-ct`, `.pin-cb`, `.pin-lc`, `.pin-rc`, `.pin-c`
+  - classes:
+      - '.width-quarter'
+      - '.width-half'
+      - '.width-full'
+    description: |
+      A series of classes for setting common widths.
+
+      Simplified versions are available: `.w-1-4`, `.w-1-2`, `.w-1`
+  - classes:
+      - '.height-quarter'
+      - '.height-half'
+      - '.height-full'
+    description: |
+      A series of classes for setting common heights—usually only useful the context of `position: absolute`.
+
+      Simplified versions are available: `.h-1-4`, `.h-1-2`, `.h-1`
+  - classes:
+      - '.height-win-quarter'
+      - '.height-win-half'
+      - '.height-win-full'
+    description: |
+      A series of classes for setting elements to have a minimum height compared to the window size.
+
+      Simplified versions are available: `.h-w-1-4`, `.h-w-1-2`, `.h-w-1`
+  - class: '.center-flow'
+    description: 'Centres inline, inline-block & text elements—essentially just adds text-align: center'
+  - class: '.center-block'
+    description: 'Centres block-level elements, but they need widths—essentially adds: margin-left: auto; margin-right: auto'
+  - classes:
+      - '.center-content'
+      - '.center-content-vertical'
+    description: 'Centres all the contents of a box within, both vertically & horizontally centered.'
+  - class: '.center-content-horizontal'
+    description: 'Centres all the contents of a box within, both vertically & horizontally centered.'
+
+buttons:
+  - class: '.btn'
+    description: 'A very basic button style for prototyping websites.'
+  - class: '.btn-light'
+    description: 'An alternative button style for prototyping websites.'
+  - class: '.btn-ghost'
+    description: 'A third button style for prototyping websites.'
+  - class: '.link-box'
+    description: 'For adding to `<a>` tags to remove their underlines and make them block.'
+
+forms:
+  - class: '.label-block'
+    description: 'A class to force a `<label>` onto its own line.'
+  - class: '.label-inline'
+    description: 'A class to force a `<label>` onto the same line as other inputs.'
+  - class: '.hide-custom-input'
+    description: 'This class can be added to a checkbox or radio button `<input>` or `<label>` to hide the custom control.'
+
+print:
+  - class: '.no-print'
+    description: 'Will hide the element when a user prints out the website.'
+  - class: '.no-print-href'
+    description: 'Will stop the href printing out beside a link when printed.'
+  - class: '.print-only'
+    description: 'Will hide an element by default but then display it when the website is printed.'
+  - class: '.force-print'
+    description: 'Will attempt to force something to be printed even if there’s JavaScript or some other CSS that tries to hide it.'
+  - class: '.page-break-before'
+    description: 'Will force a page-break before this content when printed.'
+  - class: '.page-break-after'
+    description: 'Will force a page-break after this content when printed.'
+  - class: '.no-page-break-inside'
+    description: 'Will attempt to prevent the content from being broken over multiple pages when printed.'

data/_patterns/typography/config.yml

@@ -2,10 +2,11 @@ _layout: "patternbot_pattern_internal"
 _user_typografier: true
 _extra_css:
   - 'typography/typography.min.css'
+  - 'utilities/utilities.min.css'
 
 title: "Typography"
 description: |
-  The modular typography uses a system generated by [Typografier](++typografier-settings-url++). There are multiple sizes and spacing classes available—all based on the font-size and line-height to create a harmonious vertical rhythm. [See the documentation for all available classes.](https://learn-the-web.algonquindesign.ca/topics/typografier-cheat-sheet/)
+  The modular typography uses a system generated by [Typografier](++typografier-settings-url++). There are multiple sizes and spacing classes available—all based on the font-size and line-height to create a harmonious vertical rhythm.
 
 patterns:
   size-adjustments:
@@ -53,3 +54,7 @@ patterns:
   typesetting:
     title: "Typesetting"
     _code: false
+  utility-classes:
+    _popout_button: false
+    _resizable: false
+    _code: false

data/_patterns/typography/utility-classes.html

@@ -0,0 +1 @@
+{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.typografier.utility_classes %}

data/_patterns/typography/utility-classes.yml

@@ -0,0 +1,36 @@
+# Direct copy from: https://learn-the-web.algonquindesign.ca/topics/typografier-cheat-sheet/
+
+- classes:
+    - '.island-2'
+    - '.island'
+    - '.island-1-2'
+    - '.island-1-4'
+    - '.island-1-8'
+  description: 'Add padding around all four sides of the box using divisions of the line-height for measurement.'
+- classes:
+    - '.text-left'
+    - '.text-right'
+    - '.text-center'
+  description: 'Text alignment classes.'
+- classes:
+    - '.bold'
+    - '.not-bold'
+  description: 'Font weight classes. There’s also `.normal` as a variation to `.not-bold`'
+- classes:
+    - '.italic'
+    - '.not-italic'
+  description: 'Font style classes.'
+- classes:
+    - '.text-upper'
+    - '.text-lower'
+  description: 'Font capitalization classes: all uppercase & all lowercase.'
+- class: '.hang-punc'
+  description: 'Add to an element at the beginning of a line to make the character hang in the margin.'
+- class: '.wrapper'
+  description: 'Sets the max-width of an element to 52em—which is a fairly good line-length for a website body.'
+- class: '.wrapper-no-center'
+  description: 'Same as wrapper but doesn’t auto center.'
+- class: '.max-length'
+  description: 'Sets the max-width of an element to 36em—which is a fairly good line-length for text content.'
+- class: '.max-length-no-center'
+  description: 'Same as max-length but doesn’t auto center.'

data/_patterns/typography/vertical-spacing.html

@@ -21,35 +21,35 @@
     <h2 class="push-0">2</h2>
     <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0 patternbot-vertical-spacing-classes">
       <li><code>.push-2</code></li>
-      <li><code>.pad-2</code></li>
+      <li><code>.pad-t-2</code></li>
     </ul>
   </div>
   <div class="unit [ xs-1-5 ]">
     <h2 class="push-0">1</h2>
     <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0 patternbot-vertical-spacing-classes">
       <li><code>.push</code></li>
-      <li><code>.pad</code></li>
+      <li><code>.pad-b</code></li>
     </ul>
   </div>
   <div class="unit [ xs-1-5 ]">
     <h2 class="push-0">½</h2>
     <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0 patternbot-vertical-spacing-classes">
       <li><code>.push-1-2</code></li>
-      <li><code>.pad-1-2</code></li>
+      <li><code>.pad-t-1-2</code></li>
     </ul>
   </div>
   <div class="unit [ xs-1-5 ]">
     <h2 class="push-0">¼</h2>
     <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0 patternbot-vertical-spacing-classes">
       <li><code>.push-1-4</code></li>
-      <li><code>.pad-1-4</code></li>
+      <li><code>.pad-b-1-4</code></li>
     </ul>
   </div>
   <div class="unit [ xs-1-5 ]">
     <h2 class="push-0">⅛</h2>
     <ul class="patternbot-code-details patternbot-code-details-under patternbot-code-details-center list-group-inline micro push-0 patternbot-vertical-spacing-classes">
       <li><code>.push-1-8</code></li>
-      <li><code>.pad-1-8</code></li>
+      <li><code>.pad-t-1-8</code></li>
     </ul>
   </div>
 </div>

data/_patterns/utilities/classes.html

@@ -1,20 +1 @@
-<div class="patternbot-font-primary text-left milli">
-  <div class="pattern-utilities-scrollable scrollable">
-    <table class="patternbot-utilities-table">
-      <thead>
-        <tr>
-          <th scope="col" colspan="6">Class</th>
-          <th scope="col" colspan="18">Description</th>
-        </tr>
-      </thead>
-      <tbody>
-        {% for util in page._PatternbotData.css.theme.utilities %}
-          <tr>
-            <th class="valign-middle" scope="row" colspan="6"><code class="ib valign-middle">{{util.class | escape}}</code></th>
-            <td class="valign-middle" scope="col" colspan="18"><span class="ib valign-middle">{{util.description | escape}}</span></td>
-          </tr>
-        {% endfor %}
-      </tbody>
-    </table>
-  </div>
-</div>
+{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.theme.utilities %}

data/_plugins/jekyll_patternbot.rb

@@ -40,6 +40,7 @@ module JekyllPatternbot
 
   require 'jekyll_patternbot/processors/brand'
   require 'jekyll_patternbot/processors/modules'
+  require 'jekyll_patternbot/processors/icons'
   require 'jekyll_patternbot/processors/utilities'
 
   require 'jekyll_patternbot/hooks/pattern_lib'

data/_plugins/jekyll_patternbot/config.rb

@@ -6,6 +6,14 @@ module JekyllPatternbot
   class << self; attr_accessor :PatternbotData; end
 
   Jekyll::Hooks.register :site, :after_init do |site|
+    unless site.config.key? 'theme' and site.config['theme'] == 'jekyll_patternbot'
+      raise 'Specify “theme: jekyll_patternbot” inside your Jekyll `_config.yml` file.'
+    end
+
+    unless site.config.key? 'patternbot' and site.config['patternbot'].is_a?(Hash)
+      site.config['patternbot'] = {}
+    end
+
     Config.deep_merge! site.config
     Config['patternbot'][:version] = JekyllPatternbot::VERSION
 

data/_plugins/jekyll_patternbot/hooks/pattern_lib.rb

@@ -5,7 +5,10 @@ module JekyllPatternbot
     :css => {},
     :js => {},
     :logos => {},
-    :icons => [],
+    :icons => {
+      :spritesheets => [],
+      :classes => [],
+    },
     :layouts => [],
     :patterns => {},
     :pages => [],
@@ -34,9 +37,11 @@ module JekyllPatternbot
     icon_files = IconsFinder.new(Config['patternbot']['icons'])
     if icon_files.exists?
       icons = IconsParser.new(Config['patternbot']['icons'], icon_files.info)
-      PatternbotData[:icons] = icons.info
+      PatternbotData[:icons][:spritesheets] = icons.info
+      PatternbotData[:icons][:classes] = icons.classes
     else
-      PatternbotData[:icons] = []
+      PatternbotData[:icons][:spritesheets] = []
+      PatternbotData[:icons][:classes] = []
     end
 
     if File.exists? File.expand_path(Config['patternbot']['css']['main'], Config['patternbot']['css']['source'])
@@ -65,6 +70,7 @@ module JekyllPatternbot
 
     brand_processor = BrandProcessor.new.process
     modules_processor = ModulesProcessor.new.process
+    icons_processor = IconsProcessor.new.process
     utilities_processor = UtilitiesProcessor.new.process
 
     # File.open('/Users/thomasjbradley/Desktop/patternbot.json', 'w') do |f|

data/_plugins/jekyll_patternbot/parsers/css_font.rb

@@ -63,13 +63,14 @@ module JekyllPatternbot
       weights['normal'][:css_name] = font[:css_name]
       weights['normal'][:has_normal] = true
       weights['normal'][:has_italic] = true
+      weights['bold'][:weight] = 'bold'
       weights['bold'][:css_name] = font[:css_name]
       weights['bold'][:has_normal] = true
       weights
     end
 
     def self.parse_font_file(font_url)
-      if font_url
+      if font_url and not font_url.strip.empty?
         parser = CssParser::Parser.new
         parser.load_uri!(font_url)
         font_face_rulesets = parser.find_by_selector('@font-face').map { |rules| CssParser::RuleSet.new(nil, rules) }
@@ -110,9 +111,7 @@ module JekyllPatternbot
     end
 
     def self.parse(font_url, data)
-      unless font_url
-        return self.parse_fonts data
-      else
+      if font_url and not font_url.strip.empty?
         unless PatternbotCache.key?(font_url)
           PatternbotCache[font_url] = self.parse_font_file(font_url)
           PatternbotLogger.warn("Patternbot downloaded CSS for fonts from the remote URL: #{font_url}")
@@ -120,6 +119,8 @@ module JekyllPatternbot
           PatternbotLogger.info("Patternbot used a cached version of the font CSS originally located at: #{font_url}")
         end
         return self.parse_fonts data, PatternbotCache[font_url]
+      else
+        return self.parse_fonts data
       end
     end
 

data/_plugins/jekyll_patternbot/parsers/gridifier.rb

@@ -18,5 +18,9 @@ module JekyllPatternbot
       grid_settings
     end
 
+    def utility_classes
+      WebDevToolParser.utility_classes_for_tool('grid')
+    end
+
   end
 end

data/_plugins/jekyll_patternbot/parsers/icons.rb

@@ -15,6 +15,13 @@ module JekyllPatternbot
       matches.flatten
     end
 
+    def classes
+      internal_source = File.expand_path "../../../_patterns/icons/icon-classes.yml", __dir__
+      return [] unless File.file? internal_source
+      icon_classes = YAML.load_file internal_source
+      icon_classes
+    end
+
     def info
       for file in @icon_files
         data = File.read filepath file[:filename]

data/_plugins/jekyll_patternbot/parsers/modulifier.rb

@@ -6,5 +6,9 @@ module JekyllPatternbot
       url_info.split(/\;/) if url_info
     end
 
+    def utility_classes
+      WebDevToolParser.utility_classes_for_tool('modules')
+    end
+
   end
 end