Skip to content

Commit f13ee80

Browse files
UtwoUtwo
committed
Add 7 in 1 guideline structure for scss.
1 parent 959cc93 commit f13ee80

File tree

16 files changed

+333
-304
lines changed

16 files changed

+333
-304
lines changed

‎css/abstracts/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Abstracts
2+
3+
The `abstracts/` folder gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.
4+
5+
The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. These are nothing but Sass helpers.
6+
7+
Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Abstracts folder](http://sass-guidelin.es/#abstracts-folder)

‎css/abstracts/_variables.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* VARIABLES
3+
*/
4+
5+
/// Regular font family
6+
/// @type List
7+
$text-font-stack: "Bitter", sans-serif !default;
8+
9+
10+
11+
// Copy text color
12+
$text-color: rgb(34, 34, 34) !default;
13+
14+
// Main brand color
15+
$brand-color: rgb(229, 0, 80) !default;
16+
17+
// Light grey
18+
$light-grey: rgb(237, 237, 237) !default;
19+
20+
// Medium grey
21+
$mid-grey: rgb(153, 153, 153) !default;
22+
23+
// Dark grey
24+
$dark-grey: rgb(68, 68, 68) !default;

‎css/base/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Base
2+
3+
The `base/` folder holds what we might call the boilerplate code for the project. In there, you might find some typographic rules, and probably a stylesheet (that I’m used to calling `_base.scss`), defining some standard styles for commonly used HTML elements.
4+
5+
Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Base folder](http://sass-guidelin.es/#base-folder)

‎css/base/_base.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* GENERAL STYLES
3+
*/
4+
5+
html {
6+
font: 22px/1 $text-font-stack !important;
7+
}
8+
9+
a {
10+
text-decoration: none;
11+
color: #32a5f0;
12+
}
13+
14+
strong { font-weight: bold; }
15+
16+
i { font-style: italic; }
17+
18+
@media (max-width: 650px) {
19+
html { font-size: 18px !important; }
20+
}
21+
22+
@media (max-width: 500px) {
23+
html { font-size: 16px !important; }
24+
}

‎css/base/_fonts.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/**
2+
* This file contains all @font-face declarations, if any.
3+
*/

‎css/base/_helpers.scss‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/**
2+
* HELPERS
3+
*/
4+
5+
.mt-half { margin-top: .5rem; }
6+
.mt-full { margin-top: 1rem; }
7+
.mt-double { margin-top: 2rem; }
8+
9+
.mr-half { margin-right: .5rem; }
10+
.mr-full { margin-right: 1rem; }
11+
.mr-double { margin-right: 2rem; }
12+
13+
.mb-half { margin-bottom: .5rem; }
14+
.mb-full { margin-bottom: 1rem; }
15+
.mb-double { margin-bottom: 2rem; }
16+
17+
.ml-half { margin-left: .5rem; }
18+
.ml-full { margin-left: 1rem; }
19+
.ml-double { margin-left: 2rem; }
20+
21+
.highlight { color: #e74c3c; }

‎css/base/_reset.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* RESET STYLES
3+
*/
4+
5+
*,
6+
*::before,
7+
*::after {
8+
margin: 0;
9+
padding: 0;
10+
border: 0;
11+
font: inherit;
12+
}
13+
14+
article,
15+
aside,
16+
figcaption,
17+
figure,
18+
footer,
19+
header,
20+
nav,
21+
section,
22+
iframe { display: block; }
23+
24+
audio,
25+
video {
26+
display: inline-block;
27+
vertical-align: baseline;
28+
}
29+
30+
audio:not([controls]) {
31+
display: none;
32+
height: 0;
33+
}
34+
35+
ol,
36+
ul { margin-left: 1.75rem; }
37+
38+
blockquote,
39+
q { quotes: none; }
40+
41+
blockquote::before,
42+
q::before { content: ""; }
43+
44+
table {
45+
border-collapse: collapse;
46+
border-spacing: 0;
47+
}

‎css/components/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Components
2+
3+
For small components, there is the `components/` folder. While `layout/` is macro (defining the global wireframe), `components/` is more focused on widgets. It contains all kind of specific modules like a slider, a loader, a widget, and basically anything along those lines. There are usually a lot of files in components/ since the whole site/application should be mostly composed of tiny modules.
4+
5+
Reference: [Sass Guidelines](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Components folder](http://sass-guidelin.es/#components-folder)

‎css/components/_post-content.scss‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/**
2+
* POST STYLES (POST, PAGE)
3+
*/
4+
5+
.post {
6+
width: 800px;
7+
margin-bottom: 10rem;
8+
}
9+
10+
.post__header { margin-bottom: 4rem; }
11+
12+
.post__header h2 {
13+
font-size: 2rem;
14+
line-height: 1.35;
15+
}
16+
17+
.post__tags a + a { margin-left: 10px; }
18+
19+
.post__content {
20+
margin-bottom: 4rem;
21+
font-size: 1.125rem;
22+
line-height: 1.75;
23+
}
24+
25+
.post__content--is-page { margin-bottom: 0; }
26+
27+
.post__content h3,
28+
.post__content ul,
29+
.post__content ol,
30+
.post__content blockquote,
31+
.post__content pre,
32+
.post__content pre[class*=language-],
33+
.post__content iframe,
34+
.post__content p { margin-bottom: 2rem; }
35+
36+
.post__content h3 {
37+
font-size: 1.25rem;
38+
font-weight: 700;
39+
}
40+
41+
.post__content ol ol,
42+
.post__content ul ul { margin-bottom: 0; }
43+
44+
.post__content iframe { width: 100%; }
45+
46+
.post__content img {
47+
display: block;
48+
max-width: 100%;
49+
margin: 0 auto;
50+
}
51+
52+
.post__content blockquote,
53+
.post__content pre { display: block; }
54+
55+
.post__content blockquote {
56+
padding: 1rem 1.5rem;
57+
color: #1abc9c;
58+
border-left: 4px solid #1abc9c;
59+
font-style: italic;
60+
}
61+
62+
.post__content blockquote > * {
63+
margin-bottom: 0;
64+
font-size: 1.125rem;
65+
}
66+
67+
.post__content p code {
68+
background: #f5f2f0;
69+
font-family: monospace;
70+
border-radius: 5px;
71+
padding: .25rem .5rem;
72+
}
73+
74+
.post__content pre,
75+
.post__content pre[class*=language-] {
76+
padding: 0 1.5rem;
77+
margin-top: 0;
78+
font-size: 16px;
79+
border-radius: 5px;
80+
}
81+
82+
.post__content > *:last-child { margin-bottom: 0; }
83+
84+
@media (max-width: 900px) {
85+
.post { width: 90%; }
86+
}

‎css/components/_post-summary.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* POST SUMMARY STYLES (HOMEPAGE)
3+
*/
4+
5+
.post--is-summary {
6+
position: relative;
7+
padding-bottom: 3rem;
8+
margin-bottom: 3rem;
9+
text-align: center;
10+
}
11+
12+
.post--is-summary:last-of-type { padding-bottom: 0; }
13+
14+
.post--is-summary:not(:last-of-type)::after {
15+
display: block;
16+
width: 50%;
17+
height: 1px;
18+
position: absolute;
19+
bottom: 0;
20+
left: 50%;
21+
transform: translate(-50%, 0);
22+
background: #ccc;
23+
content: "";
24+
}
25+
26+
.post--is-summary h2 {
27+
font-size: 2rem;
28+
line-height: 1.35;
29+
}
30+
31+
.post__excerpt {
32+
font-size: .925rem;
33+
line-height: 1.75;
34+
text-align: left;
35+
}

0 commit comments

Comments
 (0)