css tips for web development

• Thi
• Tools
• px vs em vs rem vs %
• Automatically watch and convert scss to css
  • Easy: if you use VSC
  • Any scss file to css file
  • style.scss to style.css
• Using FontAwesome 5 in CSS
• Heading numbering
  • TOC numbering
• SCSS / SASS
  • Loop
  • Mixin (function)

Thi

Tools

• Flat UI Color: Choose different contrast colors
• Color Space: make gradient colors.
• CSS Gradient: make gradient background.

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.

Automatically watch and convert scss to css

Easy: if you use VSC

1. Install extension Live Sass Compiler

2. Open settings and add following,

    "liveSassCompile.settings.formats": [
      {
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/",
      }
    ],
   

3. Click on “Watch Sass” at the bottom line of VSC.
4. Everytime you save or make some changes on /sass/style.scss, /style.css will be automatically updated.

Any scss file to css file

Using gulp,

npm install gulp-cli -g
npm install gulp -D
npx -p touch nodetouch gulpfile.js
gulp --help

# then use
sass --watch <scss folder>:<css folder>

style.scss to style.css

1. Install ruby.

2. Update ruby (if you installed it before) and install compass,

    gem update --system
    gem install compass
   

3. cd to the current working theme.
4. Create a folder named sass in the root of this theme.

5. Create a file config.rb which contains below codes, this file is for compass

    http_path = "/" #root level target path
    css_dir = "." #targets our default style.css file at the root level of our theme
    sass_dir = "sass" #targets our sass directory
    images_dir = "images" #targets our pre existing image directory
    javascripts_dir = "js" #targets our JavaScript directory
    #
    # You can select your preferred output style here (can be overridden via the command line):
    # output_style = :expanded or :nested or :compact or :compressed
    #
    # To enable relative paths to assets via compass helper functions.
    # note: this is important in wordpress themes for sprites
    #
    relative_assets = true
   

6. Inside folder sass, create a folder named _partials, all partial scss files will be located in this folder. For example, we use _font.scss to store all styles relating to font for the theme.

7. Inside folder sass, create a file named style.scss, after every modification, this file will be generated by compass and overwirte the style.css file in the root theme folder. In the content of this file, you place,

    @import "compass";
    @import "_partials/font";
   

8. Use terminal and run following command (suppose that you are already in the theme folder). From this step, everytime you modify style.scss or files in _partials folder, the compass will automatically update the changes and overwrite to the style.css file in root theme folder.

    compass watch
   

Using FontAwesome 5 in CSS

👉 Official doc.

.login::before {
  content: "\f007";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

Heading numbering

// don't count h1, from h2 only
body{counter-reset: h2counter;}

.post-content{
  h1 {counter-reset: h2counter;}
  h2 {counter-reset: h3counter;}
  h3 {counter-reset: h4counter;}

  h2:before {
    content: counter(h2counter) ".\0000a0\0000a0";
    counter-increment: h2counter;}

  h3:before {
    content: counter(h2counter) "." counter(h3counter) ".\0000a0\0000a0";
    counter-increment: h3counter;}

  h4:before {
    content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) ".\0000a0\0000a0";
    counter-increment: h4counter;}
}

TOC numbering

.post-content{
  counter-reset: item;
    list-style-type: none;
    ol {
      counter-reset: item;
      list-style-type: none;}
    li {
      &::before {
        content: counters(item, ".") ". ";
        counter-increment: item;}}
}

SCSS / SASS

👉 Official references.

Loop

$imgage-sizes: 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100;

@each $size in $imgage-sizes{
  .img-full-#{$size}{
    width: $size/100*100%;
  }
}

Mixin (function)

::: col-2-equal

@mixin column-count($ncol) {
	column-count: $ncol;
	-webkit-column-count: $ncol;
	-moz-column-count: $ncol;
	-moz-column-count: $ncol;
}

// usage
.custom{
  @include column-count(3);
}

:::

The following wiki, pages and posts are tagged with jekyll