tachyons-css.github.io/src/templates/docs/debug-grid/index.html at 617a795ac489309cbafda47662d39607d623d9c1 · tachyons-css/tachyons-css.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>
      Grid Debug / Docs / TACHYONS
    </title>
    <meta name="description" content="How to use the Tachyons debug grid to line up your elements on an 8 or 16px based grid.">
    <%= head  %>
  </head>
  <body class="w-100 sans-serif">
    <%= siteHeader  %>
    <main class="bg-white black-70">
      <header class="ph3 ph5-ns w-100 bg-transparent pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
        <div class="nowrap mw9 center">
          <%= layoutNav %>
        </div>
      </header>
      <article class="pa3 ph5-ns">
        <h3 class="f6 ttu tracked mt0">Debug Grid</h3>
        <p class="measure f4 f3-ns lh-copy">
          The debug grid module allows you to put a background grid on any
element which can help you line elements up vertically and horizontally with
eachother. Sometimes across large amounts of whitespace it can be tough to see
if things are aligned. The background grid comes in both 8 and 16px columns.
        </p>
        <p class="measure f5 lh-copy">
          The debug module is commented out at the bottom of the
          src/tachyons.css file. If you uncomment it a 1px outline will be
          placed on every element on the page. Each element has a different
          color outline.  The purpose of this is to help distinguish elements
          that are close together by giving them different colors.  This has
          been helpful at times when the outlines are overlapping by 1 or 2
          pixels and it’s hard to tell where one element ends and the other
          begins.
        </p>
      </article>
      <div class="ph3 ph5-ns pt4 pb5 bg-white">
        <h3 class="f5 mb4 pb2 bb">Examples</h3>
        <h3 class="f5 fw4 pt4 ttu tracked">Grid at 8px</h3>

        <div class="debug-grid pa2 pa4-ns">
          <h1 class="outline lh-solid f1 f-headline-l fw6 mt0 mb4">The Grid</h1>
          <h2 class="outline lh-solid f2 f-subheadline-l fw4 mv0">&amp; the Graphic Designer</h1>
          <p class="outline lh-copy measure f3">
            For us Graphic Design is “organization of information.” There are other types of graphic design more concerned with illustration or of a narrative nature.
          </p>
          <p class="outline lh-copy measure f4">
            Nothing could be more useful to reach our intention than the Grid. The grid represents the basic structure of our graphic design, it helps to
            organize the content, it provides consistency, it gives an orderly look and it projects a level of intellectual elegance that we like to express.
          </p>
          <p class="outline lh-copy measure f5">
            There are infinite kinds of grids, but just one - the most
            appropriate - for any problem. Therefore, it becomes important to
            know which kind of grid is the most appropriate. The basic
            understanding is that the smaller the module of the grid the least
            helpful it could be. We could say that an empty page is a page with
            an infintesimal small grid. Therefore, it is equivalent to not
            being there. Conversely a page with a coarse grid is a very
            restricting grid offering too few alternatives. The secret is to
            find the proper kind of grid for the
            job at hand.
          </p>
        </div>

        <h3 class="f5 fw4 pt4 ttu tracked">Grid at 16px</h3>
        <div class="debug-grid-16 pa2 pa4-ns">
          <div class="f5 measure center outline pa4">
            <img class="db w-100 o-30" src="http://mrmrs.github.io/photos/026.jpg">
            <h1>Image Title</h1>
            <p>Image description</p>
          </div>
          <form action="debug_submit" method="get" accept-charset="utf-8" class="mt4 pv4 outline">
            <fieldset class=" b--transparent pa3 ma0 pa0">
              <legend class="f4 fw6">Sign up form</legend>
              <div class="mb3 dib mr3">
                <label class="db fw6 mb2">username</label>
                <input type="text" value="" name="" class="input-reset outline bw0 b--transparent w-100 measure f5" />
              </div>
            <div class="mb3 dib">
              <label class="db fw6 mb2">password</label>
              <input type="text" value="" name="" class="input-reset outline bw0 b--transparent w-100 measure f5" />
            </div>
            <div class="mb3 db">
              <label class="db fw6 mb2">location</label>
              <input type="text" value="" name="" class="input-reset outline bw0 b--transparent w-100" />
            </div>
            </fieldset>
          </form>
        </div>
        <div class="mt5 cf">
          <div class="dib mr4">
            <h4 class="f6 fw6">Previous</h4>
            <a href="/docs/debug/" class="link fw6 blue dim">Debug</a>
          </div>
          <div class="dib">
            <h4 class="f6 fw6">Next</h4>
            <a href="/docs/layout/grid/" class="link fw6 blue dim">Grid</a>
          </div>
        </div>
        <div class="mt5">
          <h4 class="f6 fw6">Reference</h4>
          <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/outline" class="db link fw6 blue dim">MDN - Outline</a>
        </div>
      </div>
      <section class="bg-white black-70 pt4 pv4 overflow-container">
        <header class="ph3 ph5-ns pt4">
      <article class="bt b--black-10 pa3 ph5-ns">
        <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
        <span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
        <span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
        <div>
          <dl class="dib mr4 mt0">
            <dt class="f6 db">Declarations </dt>
            <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.declarations.total %></dd>
          </dl>
          <dl class="dib mr4">
            <dt class="f6 db pr2">Selectors </dt>
            <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.total %></dd>
          </dl>
          <dl class="dib mr4">
            <dt class="f6 db pr2">Max. Specificity Score </dt>
            <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.selectors.specificity.max %></dd>
          </dl>
          <dl class="dib mr4">
            <dt class="f6 db pr2">Size of Avg. Rule </dt>
            <dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
          </dl>
        </div>
          <kbd>src/_debug-grid.css</kbd>
        </header>
<pre class="ph3 ph5-ns">
<code class="code" style="font-size: .75rem;">
            <%= srccss %>
</code>
</pre>
      </section>
      <%= navDocs  %>
    </main>
    <%= siteFooter  %>
    <%= googleAnalytics  %>
  </body>
</html>