base/test/index.html at master · suitcss/base · 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
<!DOCTYPE html>
<meta charset="utf-8">
<title>SUIT CSS base</title>
<meta name="viewport" content="initial-scale=1, width=device-width">
<link rel="stylesheet" href="../build/test.css">
<style>
  .Test-run {
    line-height: 1;
  }

  .dev-highlight {
    background: lightblue;
  }

  .box-sizing-elem {
    width: 100%;
    padding: 0 10%;
  }

  #iframe iframe {
    background-clip: content-box;
  }
</style>

<div class="Test">
  <h1 class="Test-title">SUIT CSS: <a href="https://github.com/suitcss/base">base</a> styles tests</h1>

  <h2 class="Test-describe">h1-h6</h2>
  <h3 class="Test-it">have no margin</h3>
  <div class="Test-run">
    <h1 class="dev-highlight">Heading 1</h1>
    <h2 class="dev-highlight">Heading 2</h2>
    <h3 class="dev-highlight">Heading 3</h3>
    <h4 class="dev-highlight">Heading 4</h4>
    <h5 class="dev-highlight">Heading 5</h5>
    <h6 class="dev-highlight">Heading 6</h6>
  </div>

  <h2 class="Test-describe">figure, p, pre, and blockquote</h2>
  <h3 class="Test-it">have no margin</h3>
  <div class="Test-run">
    <figure class="dev-highlight">Figure</figure>
    <p class="dev-highlight">Paragraph</p>
    <pre class="dev-highlight">Preformatted text</pre>
    <blockquote class="dev-highlight">Blockquote content</blockquote>
  </div>

  <h2 class="Test-describe">dl and dd</h2>
  <h3 class="Test-it">have no margin</h3>
  <div class="Test-run">
    <dl class="dev-highlight">
      <dt>Description name</dt>
      <dd>Description value</dd>
      <dd>
        <dl>
          <dt>> Description name</dt>
          <dd>> Description value</dd>
          <dt>> Description name</dt>
          <dd>> Description value</dd>
        </dl>
      </dd>
      <dt>Description name</dt>
      <dd>Description value</dd>
    </dl>
  </div>

  <h2 class="Test-describe">ul</h2>
  <h3 class="Test-it">has no margin or list style</h3>
  <div class="Test-run">
    <ul class="dev-highlight">
      <li>ul item 1</li>
      <li>ul item 2</li>
      <li>
        <ul>
          <li>> ul item 1</li>
          <li>> ul item 2</li>
          <li>> ul item 3</li>
        </ul>
      </li>
      <li>ul item 3</li>
      <li>ul item 4</li>
    </ul>
  </div>

  <h2 class="Test-describe">ol</h2>
  <h3 class="Test-it">has no margin, padding, or list style</h3>
  <div class="Test-run">
    <ol class="dev-highlight">
      <li>ol item 1</li>
      <li>ol item 2</li>
      <li>
        <ol>
          <li>> ol item 1</li>
          <li>> ol item 2</li>
          <li>> ol item 3</li>
        </ol>
      </li>
      <li>ol item 3</li>
      <li>ol item 4</li>
    </ol>
  </div>

  <h2 class="Test-describe">button</h2>
  <h3 class="Test-it">has no background, border, or padding</h3>
  <div class="Test-run">
    <button class="dev-highlight" type="button">
      Button content
    </button>
  </div>
  <h3 class="Test-it">has focus styles (in Firefox and IE)</h3>
  <div class="Test-run">
    <button type="button">
      Button content
    </button>
  </div>

  <h2 class="Test-describe">fieldset</h2>
  <h3 class="Test-it">has no border, margin, or padding</h3>
  <div class="Test-run">
    <form>
      <fieldset class="dev-highlight">
        Fieldset content
      </fieldset>
    </form>
  </div>

  <h2 class="Test-describe">iframe</h2>
  <h3 class="Test-it">has no border, margin, or padding</h3>
  <div class="Test-run" id="iframe">
    <iframe class="dev-highlight"></iframe>
  </div>

  <h2 class="Test-describe">border-box</h2>
  <h3 class="Test-it">padding should not add to the element width (elements should be centred)</h3>
  <div class="Test-run" style="width: 80%; margin: 0 auto">
    <div class="dev-highlight box-sizing-elem">content</div>
    <div class="dev-highlight"><input type="search" class="box-sizing-elem"></div>
  </div>
</div>