Thi's avatar
HomeAboutNotesBlogTopicsToolsReading
About|My sketches |Cooking |Cafe icon Support Thi
💌 [email protected]

Web Design / CSS / SCSS discrete note

Anh-Thi Dinh
Web Dev
Fixing Input Focus Issues
Ví dụ Radix’s tooltip bao quanh 1 dropdown → sau khi chọn dropdown hoặc nhấn ra ngoài để close dropdown content → cái buttun tự động bị focus lại và hiện tooltip!
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
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
SCSS / SASS
Heading numbering
Using FontAwesome in CSS
👉 Official doc.
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
  • 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
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.
Auto focus on an input field when page loads
Just add autofocus into the <input> tag.
Separate a list into 2 columns
And make it into 1 if the screen is small.
@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>
Useful URLs
  • Sia Karamalegos -- Making Google Fonts Faster.
  • The SASS way -- If-For-Each-While in SCSS.
About|My sketches |Cooking |Cafe icon Support Thi
💌 [email protected]
1<DropdownMenuContent
2  align="end"
3  onCloseAutoFocus={(event) => event.preventDefault()}
4>
5  {/* Dropdown menu items */}
6</DropdownMenuContent>
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);
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 {}
1.login::before {
2  content: "\\f007";
3  font-family: "Font Awesome 5 Free";
4  font-weight: 900;
5}
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" />
1<div>
2  <svg style="display: block;" height="100" width="100"></svg>
3</div>
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}
1<input name="q" class="search" type="search" placeholder="..." autofocus>
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}
1<meta name="viewport" content="width=device-width" />