-
Notifications
You must be signed in to change notification settings - Fork 0
/
trillo-guide.html
377 lines (329 loc) · 10.3 KB
/
trillo-guide.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
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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="jquery-v3.5.1.min.js"></script>
<link
rel="stylesheet"
href="./node_modules/skeleton-css/css/skeleton.css"
/>
<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css" />
<title>Trillo Project</title>
</head>
<body>
<header>
<div class="header--container header--container--trillo container text-center u-max-full-width">
<h1 class="header--heading m-0">Trillo</h1>
<p class="m-0">
A course guide for Trillo Project
<span>
<pre class="m-0">Advanced CSS and SASS by: Jonas Schedtmann</pre>
</span>
</p>
</div>
</header>
<main class="container custom__container u-max-full-width">
<section
class="section--right-panel two-thirds column mt-40"
id="accordion"
>
<h3>Awesome Trick</h3>
<div>
<pre>
<h5>Flex: 1</h5>
//it says it will grow as much as it can. AWESOME!
flex: 1; Apply this on flex-item.
<h5>Select all direct children</h5>
.user-nav {
background-color: yellow;
display: flex;
align-items: center;
// the user-nav and all the direct children
& > * {
}
the children are
- __icon-box
- __user
<h5>Easiest way to center things</h5>
display: flex;
align-items: center;
<h5>Changing color of SVG</h5>
fill: var(--color-grey-dark-2);
use [fill]
// the current color of what is using. whaat?
// its just like an inherit color, for SGV
fill: currentColor;
<h5> Center Text </h5>
//put this on the main container
display: flex;
align-items: center;
justify-content: center;
<h5>Putting top or bottom the elements</h5>
display: flex;
flex-direction: column;
justify-content: space-between;
<h5>Where transform starts</h5>
transform-origin: right-end;
<h5>Modern animation</h5>
transition: transform 0.2s,
width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s,
background-color .1s;
<h5>Not last-child but las-of-type</h5>
.paragraph:not(:last-of-type) {
margin-bottom: 2rem;
}
<h5>2 Rows on Flex Item</h5>
&__list {
display: flex;
flex-wrap: wrap;
&__item {
flex: 0 0 50%;
} }
<h5>Mask</h5>
A mask defines an area where we can look through the element
and see what's behind that element.
to color - image
background-color: var(--color-primary);
-webkit-mask-image:url(../img/chevron-thin-right.svg);
<h5>Items & Content</h5>
<pre>
<code>
on parent block
//-items - is for individual items
// align - mean for vertical direction or column axis
- align-items & align-content
// justify - means for horizontal direction, row axis
- justify-content & justify-items;
align-item:
justify-items:
//-content: means is to align the entire tracks
justify-content:
align-content:
</code>
</pre>
<h3>A reminder for reusing border-box</h3>
box-sizing: content-box;
- we use it on the images and friends.
</pre>
</div>
<h3>f7v68</h3>
<div>
<img class="img-flex" src="./images/trillo/adv-trillo-1.jpg" alt="" />
</div>
<h3>f7v69 A Basic Intro to Flexbox The Flex Container</h3>
<div>
<h5>To container</h5>
<pre>
[display]:flex;
- So we can now use flex css style.
[flex-direction]: row;
- :row is default.
- :row-verse, :column-reverse is another value
- :column, will eat 100% of width. :column-reverse, just reverse.
[justify-content]: center;
- to control how the items shud be positioned
- :space-between - the spaces between.
- :space-around - will have the same amount,
- but the space of gutter is 50% less.
- :space-evenly - space between and gutter are the same.
- :flex-end - all items is in right-end with no spaces.
- :flex-start - all items is in left-end with no spaces.
[align-items]: gagana sya kung ung isang item is iba ung size (height)
- its default value is stretch
- meaning, khit isa lang ung my ibang size, lahat ng items e magiging ganun din.
- :center - the alignment will be center; along cross axis
- parang ung position: absolute,top50%,left50%;transform(-50%,-50%);
- :flex-start - the alignment starts at the top.
- tapos ung merong ibang size lang ung stretched.
- :flex-end - oposite ng flex-start.
- :baseline - works with texts. kung merong isang item na iba ung font-size, aalign sya from bottom. gulo ba?
</pre
>
<h5>The most used on flex-box container</h5>
<pre>
flex-direction: row
justify-content: center
align-items: center
when we change the flex-direction: row to :column
- now it will not gonna eat the whole width.
- it's becoz of align-items: center;
- we can now play align-items: flex-start or end.
- now for example we align-items: flex-end.
- all item now will be centered vertically
- with same gutter top and bottom
</pre
>
</div>
<h3>f7v070 A Basic Intro to Flexbox Flex Items</h3>
<div>
<pre>
[Align-self] - it override the [align-items]
- so if the container has [align-items: center] we can override it
- for ex. using :flex-end.
- :stretch use this to strectch the whole size of for the container
[order] - all the orders of flex-items is 0
- now if we put -1 as value on item #4 the number 4 will go in the first line
- so the lower the order number, it will the 1st in the order.
[flex-grow] - 1; it will grow its width. it will occupy the space they can.
- but if the other items has different [flex-grow] value for ex. 2.
- it will grow bigger that the previous size.
- it will multiply the size of 1
[flex] - same as [flex-grow: 1] and [flex-basis: 300px] and [flex-shrink:1]
- if we set [flex: 1] in just 1 item. it will occupy all the spaces
- and all remain items will just occupy their spaces but no expand
[flex: 0 0 300px] - 1st [flex-grow] - 2nd [flex-shrink] - 3rd [flex-basis]
[flex-basis] - we can set the width of a flex-item
- instead we use width on flex-items we use this.
- 20% - of the container. it can be px, em, rem.
- if 1 item has this property. it will get 20% size than other elements.
[flex-shrink] - 1; default. by value of 1, it can allow to shrink if this applies on one or all items
- 0; if zero value is set, it will now no longer can be shrink. when resizing the screen.
[small screen] - if we resize the window, the sizes will maybe back to normal.
- becoz there is no extra space.
</pre
>
</div>
<h3>f7v071 A Basic Intro to Flexbox Adding More Flex Items</h3>
<div>
<pre>
[flex-wrap] - default value :no-wrap
- its a propert for flex-container
- if other flex-items has different [order] number value then this one or many item will move down.
- then once we start resizing our screen to smaller other items will also go down.
[align-content] - is a partner of [flex-wrap] (in my perspective)
- it will align rows along the cross axis
- pretty similar to [align-items]
- :space-between - the items will be in top and bottom. so there is space in between.
</pre
>
</div>
<h3>f7v073 Defining Project Settings and Custom Properties</h3>
<div>
<h5>Global resets</h5>
<pre>
* {
margin: 0;
padding: 0;
}
*::before,
*::after,
* {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%; // 1rem = 10px, 10px/16px = 62.5%
}
</pre
>
<h5>Defining variable in css</h5>
<pre>
-- is necesarry for declaration
:root {
--color-primary: #eb2f64;
}
</pre
>
<h5>Calling defined variable</h5>
<pre>
color: var(--color-primary);
</pre
>
</div>
<h3>f7v074 Building the Overall Layout</h3>
<div>
<pre>
//it says it will grow as much as it can. AWESOME! trick!
flex: 1;
</pre
>
</div>
<h3>f7v075 and v76 Building the Header - Part 1 and 2</h3>
<div>
<h5>Why use SVG?</h5>
<pre>
SVG - Scallable Vector Graphics
- icon-font has a lot of problem. some browsers only show square.
- and we cant also change the color.
- so SVG to here to the rescue
- icomoon.io - 1 of the website we can use for SVG icons
- choose only the icons we need. remove .png.
- copy only the SVG folder and symbol-defs.svg
- then change the symbol-defs.sgv to sprite.svg
- only for web browser
</pre
>
<h5>How to call SVG</h5>
<pre>
<textarea class="textarea-code-sm">
<svg class="search__icon">
<use xlink:href="./img/sprite.svg#i-magnifying-glass"></use>
</svg>
</textarea>
</pre>
<h5>Calling siblings CSS selector</h5>
<pre>
<textarea name="" id="" cols="30" rows="10" class="textarea-code-sm">
// We can use this selector to select the siblings
&__input:focus + &__button {
background-color: var(--color-grey-light-3);
}
</textarea>
</pre>
<pre>
We can do also do flex-content together with flex-item.
</pre
>
</div>
<h3>f7v077 Building the Header - Part 3</h3>
<div>
<pre>
.user-nav {
background-color: yellow;
display: flex;
align-items: center;
// the user-nav and all the direct children
& > * {
}
</pre
>
</div>
<h3>f7v078 & 79 Building the Navigation - Part 1 and 2</h3>
<div>
<pre>
80 na!!
</pre
>
</div>
<h3>f7v080 - 81 Building the Hotel Overview - Part 1 2</h3>
<div></div>
<h3>f7v082 and 83 Building the Description Section - Part 1</h3>
<div>
we use mask.
and many more but i was lazy to write here.
I wrote it under tricks section.
</div>
<h3>f7v084 Building the User Reviews Section</h3>
<div>
nothing special.
</div>
<h3>f7v086 Writing Media Queries - Part 1 2</h3>
<div>
Actually Its all done. copy pasting.
no more newer techniques e. so done bye!
Awesome section!
</div>
</section>
</main>
</body>
<script src="./jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script>
$(function () {
$("#accordion").accordion({
collapsible: true,
heightStyle: "content",
});
});
</script>
</html>