modularis 0.0.1

data/docs/components/keystrokes.html.erb

@@ -0,0 +1,76 @@
+<% @side_nav = "type" %>
+
+<div class="row">
+  <div class="large-9 push-3 columns">
+
+    <% @page_title = "Keystrokes" %>
+    <div class="row">
+      <div class="large-12 columns">
+        <h2><%= @page_title %></h2>
+        <h4 class="subheader">If you have keyboard affordances, you might need to explain them. To that end, there's a simple keystroke character affordance in Modularis.</h4>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="large-12 columns">
+        <p>For example, to close your browser hit <kbd>Cmd</kbd> + <kbd>Q</kbd>. Don't actually do it. There's more docs to read.</p>
+
+        <hr>
+
+        <h3>Build With Predefined HTML Classes</h3>
+        <p>There are two ways to build keystrokes in Modularis 4: with our predefined HTML or with our mixins. Building keystrokes using our predefined classes is simple, you simply wrap <code>kbd</code> or <code>.keystroke</code> around whatever you want to call out.</p>
+
+<%= code_example '
+<p>For example, to close your browser hit <kbd>Cmd</kbd> + <kbd>Q</kbd>', :html %>
+
+        <p>For these styles to come across, make sure you have the default Modularis CSS package or that you've selected keystrokes from a custom package. These should be linked up following our <a href="../index.html">default HTML page structure.</a></p>
+
+        <hr>
+
+        <h3>Build with a Mixin</h3>
+        <p>We've included SCSS mixins used to style keystrokes. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/_modularis-global.scss">_modularis-global.scss</a>, <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_global.scss">_global.scss</a> and <a href="https://github.com/themepile/modularis/blob/master/scss/modularis/components/_keystrokes.scss">_keystrokes.scss</a> from Github and throw them into a Modularis folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>
+
+<%= code_example '
+@import "modularis/modularis-global", "modularis/components/global", "modularis/components/keystrokes";
+', :css %>
+
+        <h5>Quick Mixin</h5>
+        <p>You can build your keystrokes using our global mixin by including it on your custom class or the <code>kbd</code> element in your own stylesheet. The mixin contains options for changing the background color, which also controls the border and text color. The rest of the defaults can be modified using the available variables. The global mixin looks like this:</p>
+
+<%= code_example '
+.your-class-name { @include keystroke($bg); }
+
+/* You can set the background color of your keystrokes, which also effects text and border */
+$bg: $keystroke-bg', :css %>
+
+        <p class="custom-keystroke">Here's an example of a custom <kbd>keystroke</kbd> style.</p>
+
+        <h5>Default SCSS Variables</h5>
+
+<%= code_example '
+/* We use these to control text styles. */
+$keystroke-font:            "Consolas", "Menlo", "Courier", monospace;
+$keystroke-font-size:       emCalc(15px);
+$keystroke-font-color:      #222;
+$keystroke-font-color-alt:  #fff;
+$keystroke-function-factor: 7%;
+
+/* We use this to control keystroke padding. */
+$keystroke-padding:         emCalc(2px) emCalc(4px) emCalc(0px);
+
+/* We use these to control background and border styles. */
+$keystroke-bg:              darken(#fff, $keystroke-function-factor);
+$keystroke-border-style:    solid;
+$keystroke-border-width:    1px;
+$keystroke-border-color:    darken($keystroke-bg, $keystroke-function-factor);
+$keystroke-radius:          $global-radius;', :css %>
+
+        <p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_modularis-global.scss</strong>.</p>
+
+      </div>
+    </div>
+  </div>
+  <div class="large-3 pull-9 columns">
+    <%= render "_sidebar-components.html.erb" %>
+  </div>
+</div>