Web Design / CSS / SCSS discrete note

Anh-Thi Dinh
Web Dev
We don’t need to modify the DOM to create highlight of the selected texts
CSS Custom Highlight API - Web APIs | MDN
CSS custom properties (--*)
👉  mdn doc.
  • --* with scss variables: --grid-xs: #{$grid-xs}
Colors
1// Alpha
2$main-color: #806eea;
3// With alpha 33%
4.style {
5  color: rgba($main-color, 0.33);
6}
7// Or
8$color: rgba(20,20,20, .5);
BEM syntax
  • "BEM" = Block, Element, Modifier.
  • Goal: better understand the relationship between the HTML and CSS.
  • Smart: everything is a class and nothing is nested.
👉 Read more: BEM 101 | CSS-Trick
1/* Block component */
2.btn {}
3
4/* Element that depends upon the block */
5.btn__price {}
6
7/* Modifier that changes the style of the block */
8.btn--orange {}
9.btn--big {}
SCSS / SASS
Heading numbering
Using FontAwesome in CSS
👉 Official doc.
1.login::before {
2  content: "\\f007";
3  font-family: "Font Awesome 5 Free";
4  font-weight: 900;
5}
px vs em vs rem vs %
  • px: not responsive.
  • em: flexible + scalable + translated to px.
    • Relative to element on which it's used.
    • 1em = 16px (default font-size Google Chrome)
    • Used for: headings, paragraphs, texts, elements related to typography (padding, margin).
  • rem: flexible + scalable + translated to px.
    • Relative to root HTML's font size.
    • Change root font size -> change the hold project.
  • %: relative to another component.
    • Used for height, width properties.
Image responsive and lazyload
👉 Responsive images - Learn web development | MDN
1<img
2  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
3  sizes="(max-width: 600px) 480px,
4         800px"
5  src="elva-fairy-800w.jpg"
6  alt="Elva dressed as a fairy" />
  • srcset : allow browser to choose which file to load, based on sizes
  • sizes: (in above example)
    • Media condition (max-width: 600px) 480px: screen ≤ 600px: The width of the slot
       the image will fill when the media condition is true (480px) → choose the image which has the same size or 1st image that is bigger than the chosen slot! →       elva-fairy-400w.jpg
    • Other sizes of screen: slot size will be 800px → choose 1st image width ≥ 800px → elva-fairy-800w.jpg
Create and combine svg icons
Combine 2 icons into one and generate a svg file. Eg. Combine "data" icon and "robot" icon into "data bot" icon.
  1. Find svg icons using these pages: icomoon, flaticon,... Down as .svg format. You should choose icons with single color.
  1. Using mediamodifier.com to combine them. Then download as .jpg files. Yep, with free account, you can only download this type of file.
  1. Using remove.bg to remove background and then save a new file in .png format.
  1. Using pngtosvg.com to convert to .svg file. Don't forget to reduce the number of color to 1 before clicking "Generate".
  1. Using Icomoon to centralize the svg paths.
  1. Finally, download you desired svg icon.
Get rid of extra space: svg in div
1<div>
2  <svg style="display: block;" height="100" width="100"></svg>
3</div>
Inline-block elements (like svg, img) sit on the text baseline. The extra space is for character descenders (eg. the tail of "y", "g",...) => We can use verticle-align: top if we wanna keep it inline or inline-block.
Terms
  • Font ligatures: When you type = + >, it becomes ⇒.
Verticle align fontawesome icon and text
👇 Source.
1<div>
2  <i id="icon" class="far fa-copy"></i>
3  <span id="text">Text</span>
4</div>
1div {
2  display: inline-block;
3  height: 1rem;
4}
5#text, #ico {
6  line-height: 1rem;
7}
8#ico {
9  vertical-align: middle;
10}
Auto focus on an input field when page loads
Just add autofocus into the <input> tag.
1<input name="q" class="search" type="search" placeholder="..." autofocus>
Separate a list into 2 columns
And make it into 1 if the screen is small.
1<div class="two-columns-list">
2  <ul>
3    <li></li>
4  </ul>
5</div>
1.two-columns-list {
2  @media (min-width: $grid-md) {
3    @include column-count(2);
4    & > li {
5      padding-right: 10px;
6    }
7  }
8}
@media not working
When I use bootstrap, the @media is not working when I change to mobile use, try to add below line to <head>
1<meta name="viewport" content="width=device-width" />
Useful URLs