-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
223 lines (207 loc) · 9.64 KB
/
Copy pathindex.html
File metadata and controls
223 lines (207 loc) · 9.64 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
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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!doctype html>
<html lang="pt-BR" data-bs-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Laboratório de Frameworks CSS</title>
<link rel="icon" type="image/svg+xml" href="./favicon.svg" />
<link rel="stylesheet" href="./src/scss/main.scss" />
</head>
<body>
<header class="container py-5 text-center">
<h1 class="display-4 fw-bold mb-3">Laboratório de Frameworks CSS</h1>
<p class="fs-5 texto-fraco mb-0">
Portal de Simuladores Web — conceitos abstratos virando interface que
você arrasta e vê reagindo.
</p>
</header>
<main class="container pb-5">
<!-- ============================================ -->
<!-- LAYOUT E GRID -->
<!-- ============================================ -->
<h2 class="h4 fw-bold mb-1">Layout e grid</h2>
<p class="texto-fraco mb-3">
Como o Bootstrap divide a tela e por que às vezes ela não divide do
jeito que você esperava.
</p>
<div class="row g-4 mb-5">
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-primary align-self-start mb-3">01</span>
<h3 class="h5 fw-bold">Grid Responsivo</h3>
<p class="texto-fraco small flex-grow-1">
Arraste a largura da tela de 320px a 1600px e veja as classes
<code>col-md-6</code>, <code>col-lg-4</code> e
<code>col-xl-3</code> assumindo o controle do layout.
</p>
<a href="./src/simuladores/bootstrap-grid/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-primary align-self-start mb-3">02</span>
<h3 class="h5 fw-bold">Grid Avançado</h3>
<p class="texto-fraco small flex-grow-1">
Controle quanto cada bloco ocupa e veja a soma passar de 12 e a
linha quebrar. Entra <code>offset-*</code>, <code>order-*</code> e
o <code>col</code> sem número.
</p>
<a href="./src/simuladores/grid-avancado/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-primary align-self-start mb-3">03</span>
<h3 class="h5 fw-bold">Containers</h3>
<p class="texto-fraco small flex-grow-1">
Por que o conteúdo trava numa largura e sobram faixas vazias.
<code>container</code>, <code>container-fluid</code> e
<code>container-lg</code> medidos lado a lado.
</p>
<a href="./src/simuladores/containers/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-primary align-self-start mb-3">04</span>
<h3 class="h5 fw-bold">Gutters</h3>
<p class="texto-fraco small flex-grow-1">
O espaço entre colunas não é margem: é padding na coluna mais
margem negativa na <code>.row</code>. E é por isso que fundo
colorido em <code>.col</code> dá errado.
</p>
<a href="./src/simuladores/gutters/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-primary align-self-start mb-3">05</span>
<h3 class="h5 fw-bold">Flexbox</h3>
<p class="texto-fraco small flex-grow-1">
Os eixos desenhados na tela, girando junto com
<code>flex-direction</code>. É aqui que
<code>justify-content</code> para de ser "horizontal".
</p>
<a href="./src/simuladores/flexbox/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
</div>
<!-- ============================================ -->
<!-- RESPONSIVIDADE -->
<!-- ============================================ -->
<h2 class="h4 fw-bold mb-1">Responsividade</h2>
<p class="texto-fraco mb-3">
O que acontece fora do grid quando a tela muda de tamanho.
</p>
<div class="row g-4 mb-5">
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-info align-self-start mb-3">06</span>
<h3 class="h5 fw-bold">Utilitários Responsivos</h3>
<p class="texto-fraco small flex-grow-1">
O mesmo slider de largura, mas agora mostrando elementos
aparecendo e sumindo com <code>d-none d-md-block</code>,
<code>flex-column flex-md-row</code> e companhia.
</p>
<a href="./src/simuladores/utilitarios-responsivos/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-info align-self-start mb-3">07</span>
<h3 class="h5 fw-bold">Navbar Responsiva</h3>
<p class="texto-fraco small flex-grow-1">
Onde exatamente o menu vira hambúrguer. Troque o breakpoint de
<code>navbar-expand-*</code> e descubra por que ele não quer dizer
o que parece.
</p>
<a href="./src/simuladores/navbar/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
</div>
<!-- ============================================ -->
<!-- ESTILO E COMPONENTES -->
<!-- ============================================ -->
<h2 class="h4 fw-bold mb-1">Estilo e componentes</h2>
<p class="texto-fraco mb-3">
Espaçamento, cores e as peças prontas que você monta com classes.
</p>
<div class="row g-4">
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-warning align-self-start mb-3">08</span>
<h3 class="h5 fw-bold">Escala de Espaçamento</h3>
<p class="texto-fraco small flex-grow-1">
Percorra a escala de <code>0</code> a <code>5</code> e veja quanto
vale cada degrau em rem e em pixels — e a diferença entre
<code>m-*</code> e <code>p-*</code>.
</p>
<a href="./src/simuladores/espacamento/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-warning align-self-start mb-3">09</span>
<h3 class="h5 fw-bold">Cores do Tema</h3>
<p class="texto-fraco small flex-grow-1">
Mude <code>$primary</code> e veja vinte componentes mudarem junto,
com o hover, o clique e a cor do texto sendo derivados na hora.
</p>
<a href="./src/simuladores/cores/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-success align-self-start mb-3">10</span>
<h3 class="h5 fw-bold">Montador de Componentes</h3>
<p class="texto-fraco small flex-grow-1">
Ligue modificadores (<code>btn-lg</code>,
<code>btn-outline-primary</code>, <code>rounded-pill</code>) e veja
o HTML sendo escrito ao lado do resultado.
</p>
<a href="./src/simuladores/componentes/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card-simulador painel h-100 p-4 d-flex flex-column">
<span class="badge text-bg-success align-self-start mb-3">11</span>
<h3 class="h5 fw-bold">Formulário Responsivo</h3>
<p class="texto-fraco small flex-grow-1">
Onde o grid, os utilitários e os componentes se encontram:
<code>form-floating</code>, validação e campos se reorganizando
conforme a tela.
</p>
<a href="./src/simuladores/formulario/index.html" class="btn btn-primary w-100">
Abrir simulador
</a>
</div>
</div>
</div>
</main>
<footer class="container py-4 border-top border-secondary-subtle">
<p class="small texto-fraco mb-0">
Portal de Simuladores Web · v1.0 — Vite + Bootstrap 5 + SCSS
</p>
</footer>
</body>
</html>