sul_styles 0.2.0 → 0.3.0

data/app/assets/stylesheets/_sul-icons.scss

@@ -0,0 +1,187 @@
+//
+// Icon Font: sul-icons
+//
+
+@font-face {
+  font-family: "sul-icons";
+  src: url("sul-icons.eot");
+  src: url("sul-icons.eot?#iefix") format("embedded-opentype"),
+       url("sul-icons.woff") format("woff"),
+       url("sul-icons.ttf") format("truetype"),
+       url("sul-icons.svg#sul-icons") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "sul-icons";
+    src: url("sul-icons.svg#sul-icons") format("svg");
+  }
+}
+
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+.sul-i-arrow-left-3:before,
+.sul-i-arrow-left-8:before,
+.sul-i-arrow-right-3:before,
+.sul-i-arrow-right-8:before,
+.sul-i-book-open-4:before,
+.sul-i-bookmark-all-1:before,
+.sul-i-books-library:before,
+.sul-i-box-1:before,
+.sul-i-bubble-chat-2:before,
+.sul-i-camera-film-1:before,
+.sul-i-check-box-1:before,
+.sul-i-cube:before,
+.sul-i-download-3:before,
+.sul-i-email:before,
+.sul-i-expand-1:before,
+.sul-i-file-music-1:before,
+.sul-i-graph-bar-2:before,
+.sul-i-infomation-circle:before,
+.sul-i-key-2:before,
+.sul-i-layout-4:before,
+.sul-i-layout-none:before,
+.sul-i-link-3:before,
+.sul-i-list-bullets-1:before,
+.sul-i-map-pin-1:before,
+.sul-i-microphone-3:before,
+.sul-i-mobile-phone-2:before,
+.sul-i-mouse:before,
+.sul-i-navigation-drawer-1:before,
+.sul-i-navigation-drawer-2:before,
+.sul-i-navigation-left-2:before,
+.sul-i-network-web:before,
+.sul-i-news-article:before,
+.sul-i-newspaper:before,
+.sul-i-notebook:before,
+.sul-i-person-1:before,
+.sul-i-person-information-1:before,
+.sul-i-picture-2:before,
+.sul-i-plug-1:before,
+.sul-i-print-text:before,
+.sul-i-quote-1:before,
+.sul-i-search:before,
+.sul-i-share:before,
+.sul-i-transfer-3:before,
+.sul-i-turntable:before,
+.sul-i-view-headline:before,
+.sul-i-view-list:before,
+.sul-i-view-module-1:before,
+.sul-i-window-search:before,
+.sul-i-zoom-in:before {
+  display: inline-block;
+  font-family: "sul-icons";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-decoration: inherit;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+.sul-i-arrow-left-3:before { content: "\f108"; }
+.sul-i-arrow-left-8:before { content: "\f109"; }
+.sul-i-arrow-right-3:before { content: "\f10a"; }
+.sul-i-arrow-right-8:before { content: "\f10b"; }
+.sul-i-book-open-4:before { content: "\f10c"; }
+.sul-i-bookmark-all-1:before { content: "\f10d"; }
+.sul-i-books-library:before { content: "\f10e"; }
+.sul-i-box-1:before { content: "\f10f"; }
+.sul-i-bubble-chat-2:before { content: "\f110"; }
+.sul-i-camera-film-1:before { content: "\f111"; }
+.sul-i-check-box-1:before { content: "\f112"; }
+.sul-i-cube:before { content: "\f113"; }
+.sul-i-download-3:before { content: "\f106"; }
+.sul-i-email:before { content: "\f114"; }
+.sul-i-expand-1:before { content: "\f115"; }
+.sul-i-file-music-1:before { content: "\f116"; }
+.sul-i-graph-bar-2:before { content: "\f117"; }
+.sul-i-infomation-circle:before { content: "\f104"; }
+.sul-i-key-2:before { content: "\f118"; }
+.sul-i-layout-4:before { content: "\f119"; }
+.sul-i-layout-none:before { content: "\f11a"; }
+.sul-i-link-3:before { content: "\f107"; }
+.sul-i-list-bullets-1:before { content: "\f11b"; }
+.sul-i-map-pin-1:before { content: "\f11c"; }
+.sul-i-microphone-3:before { content: "\f11d"; }
+.sul-i-mobile-phone-2:before { content: "\f11e"; }
+.sul-i-mouse:before { content: "\f11f"; }
+.sul-i-navigation-drawer-1:before { content: "\f120"; }
+.sul-i-navigation-drawer-2:before { content: "\f121"; }
+.sul-i-navigation-left-2:before { content: "\f122"; }
+.sul-i-network-web:before { content: "\f123"; }
+.sul-i-news-article:before { content: "\f124"; }
+.sul-i-newspaper:before { content: "\f125"; }
+.sul-i-notebook:before { content: "\f126"; }
+.sul-i-person-1:before { content: "\f127"; }
+.sul-i-person-information-1:before { content: "\f128"; }
+.sul-i-picture-2:before { content: "\f129"; }
+.sul-i-plug-1:before { content: "\f12a"; }
+.sul-i-print-text:before { content: "\f12b"; }
+.sul-i-quote-1:before { content: "\f12c"; }
+.sul-i-search:before { content: "\f12d"; }
+.sul-i-share:before { content: "\f105"; }
+.sul-i-transfer-3:before { content: "\f12e"; }
+.sul-i-turntable:before { content: "\f12f"; }
+.sul-i-view-headline:before { content: "\f130"; }
+.sul-i-view-list:before { content: "\f131"; }
+.sul-i-view-module-1:before { content: "\f102"; }
+.sul-i-window-search:before { content: "\f132"; }
+.sul-i-zoom-in:before { content: "\f133"; }
+
+$font-sul-icons-arrow-left-3: "\f108";
+$font-sul-icons-arrow-left-8: "\f109";
+$font-sul-icons-arrow-right-3: "\f10a";
+$font-sul-icons-arrow-right-8: "\f10b";
+$font-sul-icons-book-open-4: "\f10c";
+$font-sul-icons-bookmark-all-1: "\f10d";
+$font-sul-icons-books-library: "\f10e";
+$font-sul-icons-box-1: "\f10f";
+$font-sul-icons-bubble-chat-2: "\f110";
+$font-sul-icons-camera-film-1: "\f111";
+$font-sul-icons-check-box-1: "\f112";
+$font-sul-icons-cube: "\f113";
+$font-sul-icons-download-3: "\f106";
+$font-sul-icons-email: "\f114";
+$font-sul-icons-expand-1: "\f115";
+$font-sul-icons-file-music-1: "\f116";
+$font-sul-icons-graph-bar-2: "\f117";
+$font-sul-icons-infomation-circle: "\f104";
+$font-sul-icons-key-2: "\f118";
+$font-sul-icons-layout-4: "\f119";
+$font-sul-icons-layout-none: "\f11a";
+$font-sul-icons-link-3: "\f107";
+$font-sul-icons-list-bullets-1: "\f11b";
+$font-sul-icons-map-pin-1: "\f11c";
+$font-sul-icons-microphone-3: "\f11d";
+$font-sul-icons-mobile-phone-2: "\f11e";
+$font-sul-icons-mouse: "\f11f";
+$font-sul-icons-navigation-drawer-1: "\f120";
+$font-sul-icons-navigation-drawer-2: "\f121";
+$font-sul-icons-navigation-left-2: "\f122";
+$font-sul-icons-network-web: "\f123";
+$font-sul-icons-news-article: "\f124";
+$font-sul-icons-newspaper: "\f125";
+$font-sul-icons-notebook: "\f126";
+$font-sul-icons-person-1: "\f127";
+$font-sul-icons-person-information-1: "\f128";
+$font-sul-icons-picture-2: "\f129";
+$font-sul-icons-plug-1: "\f12a";
+$font-sul-icons-print-text: "\f12b";
+$font-sul-icons-quote-1: "\f12c";
+$font-sul-icons-search: "\f12d";
+$font-sul-icons-share: "\f105";
+$font-sul-icons-transfer-3: "\f12e";
+$font-sul-icons-turntable: "\f12f";
+$font-sul-icons-view-headline: "\f130";
+$font-sul-icons-view-list: "\f131";
+$font-sul-icons-view-module-1: "\f102";
+$font-sul-icons-window-search: "\f132";
+$font-sul-icons-zoom-in: "\f133";

data/app/assets/stylesheets/styleguide/styleguide.scss

@@ -0,0 +1,52 @@
+/*
+  Styles for SulStyles Styleguide
+*/
+@import '../sul-styles';
+
+@mixin flexcontainer {
+  display: flex;
+  flex-flow: row wrap;  
+}
+
+@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
+
+body {
+  font-family: 'Source Sans Pro', sans-serif;
+  padding: 20px;
+}
+
+.color-sample-container {
+  @include flexcontainer;
+  padding: 12px;
+}
+
+.color-sample {
+  flex: 0 1 auto;
+  margin: 10px;
+  text-align: center;
+  width: 180px;
+}
+
+.color-swatch {
+  height: 80px;
+  margin-left: 50px;
+  margin-right: 50px;
+  width: 80px;
+}
+
+.icon-container {
+  @include flexcontainer;
+  padding: 12px;
+}
+
+.icon-example-container {
+  flex: 0 1 auto;
+  padding: 12px;
+  text-align: center;
+  width: 180px;
+}
+
+.icon-example {
+  color: $color-black-80;
+  font-size: 40px;
+}

data/app/assets/stylesheets/styleguide.scss

@@ -0,0 +1 @@
+@import 'styleguide/styleguide';

data/{assets → app/assets}/stylesheets/sul-styles/su_primary_colors.scss

@@ -1,4 +1,7 @@
-// Stanford Primary Colors from https://identity.stanford.edu/overview/color.html
+/*
+  Stanford Primary Colors
+  from https://identity.stanford.edu/overview/color.html
+*/
 
 // Primary Palette
 $color-cardinal-red: #8c1515;

data/{assets → app/assets}/stylesheets/sul-styles/su_web_colors.scss

@@ -1,4 +1,7 @@
-// Stanford Web Colors from https://identity.stanford.edu/web-toolkit/color.html
+/*
+  Stanford Web Colors
+  from https://identity.stanford.edu/web-toolkit/color.html
+*/
 
 // Red
 $color-cardinal-red: #8c1515;

data/{assets → app/assets}/stylesheets/sul-styles.scss

@@ -2,4 +2,4 @@
 @import 'sul-styles/su_web_colors';
 @import 'sul-styles/su_primary_colors';
 @import 'sul-icons-rails';
-@import 'sul-icons-aliases';
+@import 'sul-icons-aliases';

data/app/controllers/sul_styles/style_guide_controller.rb

@@ -0,0 +1,47 @@
+module SulStyles
+  class StyleGuideController < ActionController::Base
+
+    layout 'styleguide'
+
+    def index
+    end
+
+    def icons
+      @icons = []
+      @icons << parse_icons("#{SulStyles::Engine.root}/app/assets/stylesheets/_sul-icons-rails.scss")
+      @icons << parse_icon_aliases("#{SulStyles::Engine.root}/app/assets/stylesheets/_sul-icons-aliases.scss")
+    end
+
+    def colors
+      @colors = []
+      @colors << parse_colors("#{SulStyles::Engine.root}/app/assets/stylesheet"\
+      's/sul-styles/su_primary_colors.scss')
+      @colors << parse_colors("#{SulStyles::Engine.root}/app/assets/stylesheet"\
+        's/sul-styles/su_web_colors.scss')
+    end
+
+    def parse_colors(file_name)
+      file = File.read(file_name)
+      {
+        title: file.match(/(?<=\/\*\n)(.*)(?=\*\/)/m).to_s,
+        colors: file.scan(/^\$.*;$/).map { |c| c.split(':') }
+      }
+    end
+
+    def parse_icons(file_name)
+      file = File.read(file_name)
+      {
+        title: 'Icons',
+        icons: file.scan(/(?<=\.)(.*)(?=})/).map { |i| i[0].split(':before { content: "\\') }
+      }
+    end
+
+    def parse_icon_aliases(file_name)
+      file = File.read(file_name)
+      {
+        title: 'Icon aliases',
+        icons: file.scan(/(?<=\.)(.*)(?= {)/)
+      }
+    end
+  end
+end

data/app/views/layouts/styleguide.html.erb

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Stanford University Libraries - Style Guide</title>
+  <%= stylesheet_link_tag 'styleguide', media: 'all', 'data-turbolinks-track' => true %>
+</head>
+<body>
+<h1>Stanford University Libraries - Style Guide</h1>
+<div class='navigation'>
+  <ul>
+    <li>
+      <%= link_to 'Colors', 'colors' %>
+    </li>
+    <li>
+      <%= link_to 'Icons', 'icons' %>
+    </li>
+  </ul>
+</div>
+<%= yield %>
+
+</body>
+</html>

data/app/views/sul_styles/style_guide/colors.html.erb

@@ -0,0 +1,18 @@
+<h2>Colors</h2>
+<% @colors.each do |color_group| %>
+  <h3><%= color_group[:title] %></h3>
+  <div class='color-sample-container'>
+    <% color_group[:colors].each do |color| %>
+      <div class='color-sample'>
+        <div class='color-swatch' style='background-color: <%= color[1] %>'>
+        </div>
+        <div class='color-variable-name'>
+          <%= color[0] %>
+        </div>
+        <div class='color-name'>
+          <%= color[1] %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/views/sul_styles/style_guide/icons.html.erb

@@ -0,0 +1,19 @@
+Icons are created using the Streamline icon sets. For maintainability, icons keep their Streamline filename but aliases can also be created for ease of use.
+<% @icons.each do |icon_group| %>
+  <h3><%= icon_group[:title] %></h3>
+  <div class='icon-container'>
+    <% icon_group[:icons].each do |icon| %>
+      <div class='icon-example-container'>
+        <%= content_tag(:div, '', class: "#{icon[0]} icon-example") %>
+        <div class='icon-example-name'>
+          <%= icon[0] %>
+        </div>
+        <% if icon[1].present? %>
+          <div class='icon-example-character-code <%= icon[0]%>-char'>
+            <%= icon[1].gsub('";', '') %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/bin/rails

@@ -0,0 +1,12 @@
+#!/usr/bin/env ruby
+# This command will automatically be run when you run "rails" with Rails 4 gems installed from the root of your application.
+
+ENGINE_ROOT = File.expand_path('../..', __FILE__)
+ENGINE_PATH = File.expand_path('../../lib/sul_styles/engine', __FILE__)
+
+# Set up gems listed in the Gemfile.
+ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__)
+require 'bundler/setup' if File.exist?(ENV['BUNDLE_GEMFILE'])
+
+require 'rails/all'
+require 'rails/engine/commands'

data/config/locales/sul_styles.en.yml

@@ -0,0 +1,4 @@
+en:
+  date:
+    formats:
+      day_mon_year: '%d-%b-%Y'

data/config/routes.rb

@@ -0,0 +1,5 @@
+SulStyles::Engine.routes.draw do
+  root to: 'style_guide#index'
+  get 'icons', to: 'style_guide#icons'
+  get 'colors', to: 'style_guide#colors'
+end