- Thi
- Tools
px
vsem
vsrem
vs%
- Automatically watch and convert
scss
tocss
- Using FontAwesome 5 in CSS
- Heading numbering
- SCSS / SASS
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 topx
.- 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 topx
.- 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
- Install extension Live Sass Compiler
-
Open settings and add following,
"liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "/", } ],
- Click on โWatch Sassโ at the bottom line of VSC.
- 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
- Install ruby.
-
Update ruby (if you installed it before) and install compass,
gem update --system gem install compass
cd
to the current working theme.- Create a folder named sass in the root of this theme.
-
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
- 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.
-
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";
-
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
Title | Type | Excerpt |
---|---|---|
Beautiful day it is | post | create tag-home with stackoverflow search platform |
Jekyll forloop without | post | Saturday-where_exp, you can do forloop without a loop using where or where_exp filters |
Jekyll + liquid | post | Monday-jekyll-liquid, jekyll install on mac and ubuntu using docker |
D3js trial and errors | post | Thursday, trying to integrate with jekyll and data mining |
Pages in this site | page | This theme primarily uses pages. You need to make sure your pages have the appropriate frontmatter. One frontmatter tag your users might find helpful is the ... |
{# nothing on index to avoid visible raw text #}