-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcss-quick-reference.html
More file actions
132 lines (125 loc) · 3.47 KB
/
css-quick-reference.html
File metadata and controls
132 lines (125 loc) · 3.47 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>CSS Quick Reference</title>
<link
rel="stylesheet"
href="pdf-style.css"
/>
<style>
/* Quick Reference Page Styling */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
h1,
h2,
h3 {
margin-top: 2rem;
}
.section {
margin-bottom: 2rem;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
}
.example {
border: 1px solid #ddd;
padding: 1rem;
margin-top: 0.5rem;
border-radius: 4px;
background-color: #fff;
}
.example .example-box {
margin-top: 0.5rem;
padding: 0.5rem;
border-radius: 4px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>CSS Quick Reference</h1>
<p>A one-page guide to all your custom styles and utilities.</p>
</header>
<!-- Typography -->
<section class="section">
<h2>Typography</h2>
<p>Utility classes for text styling and alignment.</p>
<div class="example">
<div class="example-box text-bold">Bold Text</div>
<div class="example-box text-italic">Italic Text</div>
<div class="example-box text-uppercase">Uppercase Text</div>
<div class="example-box text-center">Centered Text</div>
</div>
</section>
<!-- Colors -->
<section class="section">
<h2>Colors</h2>
<p>Background and text color utilities.</p>
<div class="example">
<div class="example-box bg-primary text-light">Primary Background</div>
<div class="example-box bg-success text-light">Success Background</div>
<div class="example-box bg-danger text-light">Danger Background</div>
<div class="example-box text-warning">Warning Text</div>
</div>
</section>
<!-- Borders -->
<section class="section">
<h2>Borders</h2>
<p>Border utilities for quick styling.</p>
<div class="example">
<div class="example-box border border-primary">Primary Border</div>
<div class="example-box border border-danger">Danger Border</div>
<div class="example-box border-top">Top Border Only</div>
</div>
</section>
<!-- Spacing -->
<section class="section">
<h2>Spacing</h2>
<p>Utilities for padding and margins.</p>
<div class="example">
<div class="example-box p-3">Padding 3</div>
<div class="example-box m-3 border">Margin 3</div>
</div>
</section>
<!-- Layout -->
<section class="section">
<h2>Layout</h2>
<p>Flexbox and grid utilities for layouts.</p>
<div class="example">
<div class="flex-container justify-around">
<div class="example-box border">Flex Item 1</div>
<div class="example-box border">Flex Item 2</div>
<div class="example-box border">Flex Item 3</div>
</div>
<div class="grid grid-cols-3 grid-gap-2">
<div class="example-box border">Grid Item 1</div>
<div class="example-box border">Grid Item 2</div>
<div class="example-box border">Grid Item 3</div>
</div>
</div>
</section>
<!-- Debugging -->
<section class="section">
<h2>Debugging Utilities</h2>
<p>Tools for debugging layouts.</p>
<div class="example">
<div class="example-box debug-outline">Debugging Outline Applied</div>
<div class="example-box debug-outline">
<div class="debug-outline">Nested Debugging</div>
</div>
</div>
</section>
<footer>
<p style="text-align: center">© 2024 Your CSS Quick Reference</p>
</footer>
</body>
</html>