< Back to index
Minimal sign up

<%
  styles = Styler.new do
    style :container, %w(sans-serif bg-black flex justify-between bb b--white-10)
    style :logo, %w(link white-70 hover-white no-underline flex items-center pa3)
    style :logo_svg, %w(dib h1 w1)
    style :logo_path, %w(M2 2 L10 2 L10 10 L2 10z M12 2 L20 2 L20 10 L12 10z M22 2 L30 2 L30 10 L22 10z M2 12 L10 12 L10 20 L2 20z M12 12 L20 12 L20 20 L12 20z M22 12 L30 12 L30 20 L22 20z M2 22 L10 22 L10 30 L2 30z M12 22 L20 22 L20 30 L12 30z M22 22 L30 22 L30 30 L22 30z)
    style :links, %w(flex-grow pa3 flex items-center)
    style :link, %w(f6 link dib white dim mr3 mr4-ns)
    style :button, %w(f6 dib white bg-animate hover-bg-white hover-black no-underline pv2 ph4 br-pill ba b--white-20)
  end
%>

<nav class="<%= styles.container %>">
  <a class="<%= styles.logo %>">
    <svg class="<%= styles.logo_svg %>" data-icon="grid" viewBox="0 0 32 32" style="fill:currentcolor">
      <title>Super Normal Icon Mark</title>
      <path d="<%= styles.logo_path %>"></path>
    </svg>
  </a>
  <div class="<%= styles.links %>">
    <a class="<%= styles.link %>" href="#">About</a>
    <a class="<%= styles.link %>" href="#">Sign In</a>
    <a class="<%= styles.button %>" href="#">Sgn Up</a>
  </div>
</nav>
Styler gem and Tachyons components

Minimal sign up
