Web Design discrete note low-quality

Last modified 2 months ago / Edit on Github
Warning
This is a low-quality note, read at your own risk!
In this note
  1. Create and combine svg icons
  2. Get rid of extra space: svg in div
  3. Terms
  4. Verticle align fontawesome icon and text
  5. Auto focus on an input field when page loads
  6. Separate a list into 2 columns
  7. @media not working
  8. Useful URLs

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.
  2. Using mediamodifier.com to combine them. Then download as .jpg files. Yep, with free account, you can only download this type of file.
  3. Using remove.bg to remove background and then save a new file in .png format.
  4. Using pngtosvg.com to convert to .svg file. Don't forget to reduce the number of color to 1 before clicking "Generate".
  5. Using Icomoon to centralize the svg paths.
  6. Finally, download you desired svg icon.

Get rid of extra space: svg in div 

<div>
  <svg style="display: block;" height="100" width="100"></svg>
</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.

<div>
  <i id="icon" class="far fa-copy"></i>
  <span id="text">Text</span>
</div>
div {
  display: inline-block;
  height: 1rem;
}
#text, #ico {
  line-height: 1rem;
}
#ico {
  vertical-align: middle;
}

Auto focus on an input field when page loads

Just add autofocus into the <input> tag.

<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.

<div class="two-columns-list">
  <ul>
    <li></li>
  </ul>
</div>
.two-columns-list {
  @media (min-width: $grid-md) {
    @include column-count(2);
    & > li {
      padding-right: 10px;
    }
  }
}

@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>,

<meta name="viewport" content="width=device-width" />

Useful URLs