patterns-box/index.html at master · ScalesCSS/patterns-box · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Box Pattern - Scales</title>
<meta name="viewport" content="initial-scale=1,width=device-width">
<style>
.clearfix:after,
.box:after {
  content: "";
  display: table;
  clear: both;
}

.box {
  display: block;
  padding: 1em;
}
.box > :last-child {
  margin-bottom: 0;
}

.box--flush {
  padding: 0;
}

.box--tiny {
  padding: 0.25em;
}

.box--small {
  padding: 0.5em;
}

.box--large {
  padding: 2em;
}

.box--huge {
  padding: 4em;
}
</style>
</head>
<body>
    <header role="banner">
        <h1>Box Pattern for Scales</h1>
    </header>
    <main role="main">
        <p>This page includes the default box pattern styles</p>

        <h2>Box usage</h2>
        <p>Buttons should be used with links, buttons, and submit inputs for best results</p>

        <h3>Default styles</h3>

        <div class="box">
            The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. It is often called the housecat when kept as an indoor pet, or simply the cat when there is no need to distinguish it from other felids and felines.
        </div>

        <h3>Flush</h3>

        <div class="box box--flush">
            The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. It is often called the housecat when kept as an indoor pet, or simply the cat when there is no need to distinguish it from other felids and felines.
        </div>

        <h3>Tiny</h3>

        <div class="box box--tiny">
            The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. It is often called the housecat when kept as an indoor pet, or simply the cat when there is no need to distinguish it from other felids and felines.
        </div>

        <h3>Small</h3>

        <div class="box box--small">
            The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. It is often called the housecat when kept as an indoor pet, or simply the cat when there is no need to distinguish it from other felids and felines.
        </div>

        <h3>Large</h3>

        <div class="box box--large">
            The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. It is often called the housecat when kept as an indoor pet, or simply the cat when there is no need to distinguish it from other felids and felines.
        </div>

        <h3>Huge</h3>

        <div class="box box--huge">
            The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. It is often called the housecat when kept as an indoor pet, or simply the cat when there is no need to distinguish it from other felids and felines.
        </div>
    </main>
</body>
</html>