-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.html
175 lines (159 loc) · 6.96 KB
/
index.html
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap" rel="stylesheet">
<title>Blunt</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/f-prime/blunt/dist/blunt.min.css">
<link rel="icon" type="image/png" href="logo.png">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<style>
:root {
--blue: #4585c5;
--light-blue: #4585c533;
}
html, body {
padding: 0;
margin: 0;
font-family: monospace;
}
a {
text-decoration: none;
color: var(--blue);
}
a:hover {
text-decoration: underline;
}
.code {
border-radius: 5px;
background-color: var(--light-blue);
font-family: 'Fira Code', monospace;
display: block;
white-space: pre;
}
.links {
border: 1px solid var(--light-blue);
border-radius: 5px;
}
</style>
<div class="md-vw-60 sm-vw-90 lg-vw-60 auto-center pt-5 pb-5 lh-2 font-1p2">
<section>
<header class="font-2 ">Blunt</header>
<p>A CSS layout framework that gets to the point and stays out of your way.</p>
<p class="mt-3">
<a class="github-button" href="https://github.com/f-prime/blunt" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star f-prime/Blunt on GitHub">Star</a>
</p>
<p class="font-1p2">
Blunt is designed to make creating page layouts a easy. It provides a host of general CSS classes to position elements, add padding and margins to elements, create responsive grids, and more.
It has no opinions on how your page should look. This means that you won't have to fight with Blunt to overwrite default colors and button styles. All of that is left up to you.
</p>
<p class="mt-3">
You can find Blunt on <a href="https://github.com/f-prime/Blunt">GitHub</a>
and join the discussion on <a href="https://gitter.im/Blunt-css">Gitter</a>.
</p>
</section>
<section>
<header class="font-2 mt-5">Getting Started</header>
<p>
Include Blunt into your project with the this single line of code.
</p>
<p class="code pt-1 pb-1 pl-1 pr-1 text-center">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/f-prime/blunt/src/blunt.css">
</p>
</section>
<section>
<header class="font-2 mt-5">Documentation</header>
<div class="mt-3 links col lg-row h-space-around pt-1 pb-1">
<a class="col" href="#basic">Basics</a>
<a class="col" href="#container">Container</a>
<a class="col" href="#width-height">Width and Height</a>
<a class="col" href="#row-col">Row and Col</a>
<a class="col" href="#grid">Grid</a>
<a class="col" href="#font-lineheight">Font and Line Height</a>
<a class="col" href="#position">Positioning</a>
</div>
<header class="font-1p7 mt-5" id="basics">Basics</header>
<div class="mt-2">
<p>
With the exception of the container class, all classes in Blunt follow the same structure.
</p>
<p class="code pt-1 pb-1 pl-1 pr-1">
{size}-{className}-{value}
</p>
<p>
Where {size} is replaced with a screen size lg, md, or sm, {className} is replaced with the specific Blunt class and {value} is replaced with a number.
</p>
<p>
Blunt currently supports three screen sizes sm (max width 900px) md (max width 1500px) and lg (min width 1500px)
</p>
<p>
As a practical example, let's say we wanted to add padding to the top of an element. <br/>
If we wanted to do this for all screen sizes we would do this.
</p>
<p class="code pt-1 pb-1 pl-1 pr-1"><div class="pt-1"></p>
<p>
If we wanted to have this padding on only spall screens (screen size < 900px) we would do the following
</p>
<p class="code pt-1 pb-1 pl-1 pr-1"><div class="sm-pt-1"></p>
<p>The padding class along with some other classes also support decimal values using the notation <div class="mt-1 code pt-1 pb-1 pl-1 pr-1">{number}p{fraction}</div></p>
<p>So if we wanted to add, say, a padding of 1.3 to the top of an element we could do the following.</p>
<p class="code pt-1 pb-1 pl-1 pr-1"><div class="pt-1p3"></p>
</div>
<header class="font-1p7 mt-3" id="container">Container</header>
<div class="mt-2">
<p>The container class creates an element with responsive width.</p>
<div class="code pt-1 pb-1 pl-1 pr-1"><div class="container">
Other stuff
</div></div>
</div>
<header class="font-1p7 mt-3" id="width-height">Width and Height</header>
<p>Blunt provides 3 different width and height classes</p>
<p>{h,w}-{1-100}, px{h,w}-{1-1000} and v{h,w}-{1-100}</p>
<p>
<div class="code pt-1 pb-1 pl-1 pr-1"><div class="w-50"></div>
</p>
<p>
Makes the div's width 50%
</p>
<p>
<div class="code pt-1 pb-1 pl-1 pr-1"><div class="vh-50"></div>
</p>
<p>
Makes the div's height 50vh
</p>
<p>
<div class="code pt-1 pb-1 pl-1 pr-1"><div class="md-pxw-500"></div>
</p>
<p>
Makes the div's width 500px on medium sized screens
</p>
<header class="font-1p7 mt-3" id="margin-padding">Margin and Padding</header>
<div class="mt-2">
<p>The following padding and margin classes are provided</p>
<p>{m,p}{l,r,t,b}-{0-15}p{1-9}</p>
<p>
<div class="code pt-1 pb-1 pl-1 pr-1"><div class="mt-5"></div>
</p>
<p>Adds a top margin of 5vh to the div</p>
<p><div class="code pt-1 pb-1 pl-1 pr-1"><div class="pl-3"></div></p>
<p>Adds a padding left of 3vw to the div</p>
<p><div class="code pt-1 pb-1 pl-1 pr-1"><div class="sm-mb-2p5"></div></p>
<p>Adds a margin of 2.5vh to the div on small screens</p>
<p><div class="code pt-1 pb-1 pl-1 pr-1"><div class="md-pr-10"></div></p>
<p>Adds a padding right of 10vw to the div on medium screens</p>
</div>
<header class="font-1p7 mt-3" id="row-col">Row and Col</header>
<header class="font-1p7 mt-3" id="grid">Grid</header>
<header class="font-1p7 mt-3" id="font-lineheight">Font and Line Height</header>
<header class="font-1p7 mt-3" id="position">Positioning</header>
</section>
<section class="mt-2">
<header class="font-2 mt-3">Simple Card</header>
</section>
</div>
</body>
</html>