Learn wirte a Jekyll theme

I want to build a website as to be the owned channel of content distribution.
As a software engineer, I know how to leverage computer programming to save money.
But, actually, when I started to be using the static site generator Jekyll, it turned out that I didn’t have enough knowledge about CSS.
So I got some source code to read.

The first one is minima.
The basic strucutre comes as following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
├── 404.html
├── CODE_OF_CONDUCT.md
├── Gemfile
├── History.markdown
├── LICENSE.txt
├── README.md
├── _config.yml
├── _includes
├── _layouts
├── _posts
├── _sass
├── about.md
├── assets
├── index.md
├── minima.gemspec
├── screenshot.png
└── script

I started to read from the _sass folder and keep writing notes here.

SCSS

Placeholder Selectors

1
2
3
4
5
6
7
8
9
/**
* Set `margin-bottom` to maintain vertical rhythm
*/
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
margin-bottom: $spacing-unit / 2;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
* Clearfix
*/
%clearfix:after {
content: "";
display: table;
clear: both;
}

/**
* Wrapper
*/
.wrapper {
max-width: calc(#{$content-width} - (#{$spacing-unit}));
margin-right: auto;
margin-left: auto;
padding-right: $spacing-unit / 2;
padding-left: $spacing-unit / 2;
@extend %clearfix;
}

At-rules

@mixin

https://sass-lang.com/documentation/at-rules/mixin

It’s a SCSS at-rule, pairing with @include.

1
2
3
@mixin relative-font-size($ratio) {
font-size: #{$ratio}rem;
}

@import

1
2
3
4
5
6
7
// Import pre-styling-overrides hook and style-partials.
@import
"minima/custom-variables", // Hook to override predefined variables.
"minima/base", // Defines element resets.
"minima/layout", // Defines structure and style based on CSS selectors.
"minima/custom-styles" // Hook to override existing styles.
;

Interpolation

https://sass-lang.com/documentation/interpolation

1
2
3
body {
font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
}

CSS

Properties

Units

vh & vw

https://stackoverflow.com/questions/24876368/how-do-vw-and-vh-units-work