- commit
- f7a3e82120635afb689490b1b0f4d1098bca63c2
- parent
- f9ba3113f79d826085abb59093b68b6bf9b2663d
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2024-04-04 21:24
Merge branch 'rm-sass'
Diffstat
| M | README.md | 4 | +--- |
| R | sass/base.scss -> css/base.css | 56 | ++++++++++++++++++++++++++++++++++++-------------------- |
| A | css/fontsize.css | 3 | +++ |
| R | sass/form.scss -> css/form.css | 72 | ++++++++++++++++++++++++++++++++----------------------------- |
| R | sass/layout.scss -> css/layout.css | 4 | ++-- |
| M | examples/example.css | 242 | ++----------------------------------------------------------- |
| D | examples/example.scss | 13 | ------------- |
| M | package.json | 4 | ++-- |
| D | sass/fontsize.scss | 11 | ----------- |
| D | sass/variables.scss | 16 | ---------------- |
10 files changed, 88 insertions, 337 deletions
diff --git a/README.md b/README.md
@@ -6,9 +6,7 @@ I found that I started every new project with mostly the same CSS code. So 6 6 instead of duplicating that code again and again, I distilled the base styles 7 7 from several projects into this little library. 8 89 -1 It is written in [Sass](http://sass-lang.com/) and consists of variable10 -1 definitions (`variables.scss`), some basic styling (`base.scss`) and some11 -1 optional components.-1 9 It consists of some basic styling (`base.css`) and some optional components. 12 10 13 11 See how it looks 14 12 [here](https://xi.github.io/mfbs/examples/motherfuckingwebsite.html) and
diff --git a/sass/base.scss b/css/base.css
@@ -1,3 +1,19 @@
-1 1 :root {
-1 2 --color-bg: #fff;
-1 3 --color-fg: #333;
-1 4 --color-bg-tint: #f5f5f5;
-1 5 --color-border: #888;
-1 6 --color-link: #26c;
-1 7 --color-link-focus: #248;
-1 8
-1 9 --font-size-min: 0.9em;
-1 10 --font-size-max: 1.2em;
-1 11 --padding: 0.5em;
-1 12 --spacer: 1em;
-1 13 --indentation: 1.5rem;
-1 14 --width: 37em;
-1 15 }
-1 16
1 17 *,
2 18 *::before,
3 19 *::after {
@@ -15,17 +31,17 @@ video {
15 31 }
16 32
17 33 p, address, blockquote, pre, table, dl, ul, ol, figure, fieldset {
18 -1 margin-block: 0 $spacer;
-1 34 margin-block: 0 var(--spacer);
19 35 }
20 36
21 37 html {
22 38 overflow-y: scroll;
23 -1 background-color: $color-bg;
24 -1 color: $color-fg;
25 -1 font-size: $font-size-max;
-1 39 background-color: var(--color-bg);
-1 40 color: var(--color-fg);
-1 41 font-size: var(--font-size-max);
26 42 font-family: sans-serif;
27 43 line-height: 1.5;
28 -1 accent-color: $color-link;
-1 44 accent-color: var(--color-link);
29 45 }
30 46
31 47 h1, h2, h3, h4, h5, h6 {
@@ -33,38 +49,38 @@ h1, h2, h3, h4, h5, h6 {
33 49 margin-block: 0 0.8rem;
34 50
35 51 * + & {
36 -1 margin-block-start: 1.5 * $spacer;
-1 52 margin-block-start: calc(1.5 * var(--spacer));
37 53 }
38 54 }
39 55
40 56 :link,
41 57 :visited {
42 -1 color: $color-link;
-1 58 color: var(--color-link);
43 59 text-decoration: underline;
44 60
45 61 &:hover {
46 -1 color: $color-link-focus;
-1 62 color: var(--color-link-focus);
47 63 }
48 64 }
49 65
50 66 hr {
51 67 border: 0;
52 -1 border-block-end: 1px solid $color-border;
53 -1 margin-block: $spacer;
-1 68 border-block-end: 1px solid var(--color-border);
-1 69 margin-block: var(--spacer);
54 70 }
55 71
56 72 pre, code {
57 73 font-size: 90%;
58 74 font-family: monospace;
59 -1 background-color: $color-bg-tint;
-1 75 background-color: var(--color-bg-tint);
60 76 }
61 77 code {
62 78 padding-inline: 0.25em;
63 79 }
64 80 pre {
65 -1 padding: $padding;
-1 81 padding: var(--padding);
66 82 overflow: auto;
67 -1 border: 1px solid $color-border;
-1 83 border: 1px solid var(--color-border);
68 84
69 85 code {
70 86 all: revert;
@@ -72,18 +88,18 @@ pre {
72 88 }
73 89
74 90 ol, ul {
75 -1 padding-inline-start: $indentation;
-1 91 padding-inline-start: var(--indentation);
76 92 }
77 93 dt {
78 94 font-weight: bold;
79 95 }
80 96 dd {
81 -1 margin-inline-start: $indentation;
-1 97 margin-inline-start: var(--indentation);
82 98 }
83 99
84 100 blockquote {
85 101 font-style: italic;
86 -1 margin-inline: $indentation 0;
-1 102 margin-inline: var(--indentation) 0;
87 103 }
88 104
89 105 table {
@@ -91,11 +107,11 @@ table {
91 107 border-spacing: 0;
92 108 }
93 109 tr {
94 -1 border-bottom: 1px solid $color-border;
-1 110 border-bottom: 1px solid var(--color-border);
95 111 }
96 112 td, th {
97 113 text-align: start;
98 -1 padding: $padding * 0.5;
-1 114 padding: calc(var(--padding) * 0.5);
99 115 vertical-align: top;
100 116 }
101 117
@@ -104,7 +120,7 @@ select[multiple] {
104 120 resize: vertical;
105 121 }
106 122
107 -1 // Prevent sub and sup affecting line-height.
-1 123 /* Prevent sub and sup affecting line-height. */
108 124 sub, sup {
109 125 line-height: 0;
110 126 }
@@ -112,7 +128,7 @@ sub, sup {
112 128 @media print {
113 129 html {
114 130 background: transparent;
115 -1 color: #000; // Black prints faster:
-1 131 color: #000; /* Black prints faster */
116 132 }
117 133
118 134 h1, h2, h3, h4, h5, h6 {
diff --git a/css/fontsize.css b/css/fontsize.css
@@ -0,0 +1,3 @@
-1 1 html {
-1 2 font-size: clamp(var(--font-size-min), 2.5vi, var(--font-size-max));
-1 3 }
diff --git a/sass/form.scss b/css/form.css
@@ -2,8 +2,13 @@ label {
2 2 display: block;
3 3 }
4 4
5 -1 %inputBase {
6 -1 border: 1px solid $color-border;
-1 5 input,
-1 6 textarea,
-1 7 select,
-1 8 .button,
-1 9 button,
-1 10 input[type="file"]::file-selector-button {
-1 11 border: 1px solid var(--color-border);
7 12 padding-block: 0.3em;
8 13 padding-inline: 0.75em;
9 14 font-family: inherit;
@@ -14,17 +19,16 @@ label {
14 19 input,
15 20 textarea,
16 21 select {
17 -1 @extend %inputBase;
18 -1 background: $color-bg;
19 -1 color: $color-fg;
-1 22 background: var(--color-bg);
-1 23 color: var(--color-fg);
20 24
21 25 &:focus-visible {
22 -1 border-color: $color-link-focus;
-1 26 border-color: var(--color-link-focus);
23 27 }
24 28 &:disabled {
25 -1 border-color: $color-border;
26 -1 background: $color-bg-tint;
27 -1 color: $color-border;
-1 29 border-color: var(--color-border);
-1 30 background: var(--color-bg-tint);
-1 31 color: var(--color-border);
28 32 cursor: not-allowed;
29 33 }
30 34 }
@@ -33,26 +37,16 @@ textarea {
33 37 line-height: inherit;
34 38 }
35 39
36 -1 @mixin button-color($color, $color-contrast, $color-focus) {
37 -1 border-color: $color;
38 -1 background: $color;
39 -1 color: $color-contrast;
40 -1
41 -1 &:hover, &:focus-visible {
42 -1 border-color: mix($color, $color-focus, 50%);
43 -1 background: mix($color, $color-focus, 50%);
44 -1 color: $color-contrast;
-1 40 @keyframes color-link {
-1 41 from {
-1 42 border-color: var(--color-link);
-1 43 background: var(--color-link);
-1 44 color: var(--color-bg);
45 45 }
46 -1 &:active {
47 -1 border-color: $color-focus;
48 -1 background: $color-focus;
49 -1 color: $color-contrast;
50 -1 }
51 -1 &:disabled {
52 -1 border-color: mix($color, $color-contrast, 50%);
53 -1 background: mix($color, $color-contrast, 50%);
54 -1 color: mix($color, $color-contrast, 10%);
55 -1 cursor: not-allowed;
-1 46 to {
-1 47 border-color: var(--color-link-focus);
-1 48 background: var(--color-link-focus);
-1 49 color: var(--color-bg);
56 50 }
57 51 }
58 52
@@ -60,26 +54,36 @@ textarea {
60 54 button,
61 55 [type=button],
62 56 [type=submit] {
63 -1 @extend %inputBase;
64 57 text-decoration: none;
65 58 display: inline-block;
66 59 cursor: pointer;
67 60 text-align: center;
68 61 border-radius: 0.3em;
69 62
70 -1 @include button-color($color-link, $color-bg, $color-link-focus);
-1 63 animation: 100s color-link linear forwards paused;
-1 64
-1 65 &:hover, &:focus-visible {
-1 66 animation-delay: -50s;
-1 67 }
-1 68 &:active {
-1 69 animation-delay: -100s;
-1 70 }
-1 71 &:disabled {
-1 72 animation-delay: 0s;
-1 73 opacity: 0.5;
-1 74 cursor: not-allowed;
-1 75 }
71 76 }
72 77
73 78 input[type="file"]::file-selector-button {
74 -1 @extend %inputBase;
75 -1 background: $color-bg-tint;
76 -1 color: $color-fg;
-1 79 background: var(--color-bg-tint);
-1 80 color: var(--color-fg);
77 81 border: 0;
78 82 cursor: pointer;
79 83
80 84 margin-block: -0.3em;
81 85 margin-inline: -0.75em 0.75em;
82 -1 border-inline-end: 1px solid $color-border;
-1 86 border-inline-end: 1px solid var(--color-border);
83 87 }
84 88 input[type="file"]:disabled::file-selector-button {
85 89 background: transparent;
diff --git a/sass/layout.scss b/css/layout.css
@@ -1,7 +1,7 @@ 1 1 body { 2 2 margin-block: 2em; 3 3 margin-inline: auto;4 -1 max-inline-size: $width;-1 4 max-inline-size: var(--width); 5 5 padding-block: 0;6 -1 padding-inline: $padding;-1 6 padding-inline: var(--padding); 7 7 }
diff --git a/examples/example.css b/examples/example.css
@@ -1,242 +1,12 @@1 -1 *,2 -1 *::before,3 -1 *::after {4 -1 box-sizing: border-box;5 -1 }6 -17 -1 [hidden] {8 -1 display: none !important;9 -1 }10 -111 -1 img,12 -1 video {13 -1 max-inline-size: 100%;14 -1 }15 -116 -1 p, address, blockquote, pre, table, dl, ul, ol, figure, fieldset {17 -1 margin-block: 0 1em;18 -1 }-1 1 @import "../css/base.css"; -1 2 @import "../css/layout.css"; -1 3 @import "../css/fontsize.css"; -1 4 @import "../css/form.css"; 19 5 20 6 html {21 -1 overflow-y: scroll;22 -1 background-color: #fff;23 -1 color: #333;24 -1 font-size: 1.2em;25 -1 font-family: sans-serif;26 -1 line-height: 1.5;27 -1 accent-color: #26c;-1 7 font-family: serif; 28 8 } 29 9 30 10 h1, h2, h3, h4, h5, h6 {31 -1 line-height: 1.2;32 -1 margin-block: 0 0.8rem;33 -1 }34 -1 * + h1, * + h2, * + h3, * + h4, * + h5, * + h6 {35 -1 margin-block-start: 1.5em;36 -1 }37 -138 -1 :link,39 -1 :visited {40 -1 color: #26c;41 -1 text-decoration: underline;42 -1 }43 -1 :link:hover, :link:focus-visible, :link:active,44 -1 :visited:hover,45 -1 :visited:focus-visible,46 -1 :visited:active {47 -1 color: #2b4d80;-1 11 font-family: sans-serif; 48 12 }49 -150 -1 hr {51 -1 border: 0;52 -1 border-block-end: 1px solid #8f8f8f;53 -1 margin-block: 1em;54 -1 }55 -156 -1 pre, code {57 -1 font-size: 90%;58 -1 font-family: monospace;59 -1 background-color: whitesmoke;60 -1 }61 -162 -1 code {63 -1 padding-inline: 0.25em;64 -1 }65 -166 -1 pre {67 -1 padding: 0.5em;68 -1 overflow: auto;69 -1 border: 1px solid #8f8f8f;70 -1 }71 -1 pre code {72 -1 background: none;73 -1 font-size: 100%;74 -1 padding: 0;75 -1 }76 -177 -1 ol, ul {78 -1 padding-inline-start: 1.5rem;79 -1 }80 -181 -1 dt {82 -1 font-weight: bold;83 -1 }84 -185 -1 dd {86 -1 margin-inline-start: 1.5rem;87 -1 }88 -189 -1 blockquote {90 -1 font-style: italic;91 -1 margin-inline: 1.5rem 0;92 -1 }93 -194 -1 table {95 -1 border-collapse: collapse;96 -1 border-spacing: 0;97 -1 }98 -199 -1 tr {100 -1 border-bottom: 1px solid #8f8f8f;101 -1 }102 -1103 -1 td, th {104 -1 text-align: start;105 -1 padding: 0.25em;106 -1 vertical-align: top;107 -1 }108 -1109 -1 textarea,110 -1 select[multiple] {111 -1 resize: vertical;112 -1 }113 -1114 -1 sub, sup {115 -1 line-height: 0;116 -1 }117 -1118 -1 @media print {119 -1 html {120 -1 background: transparent;121 -1 color: #000;122 -1 }123 -1124 -1 h1, h2, h3, h4, h5, h6 {125 -1 page-break-after: avoid;126 -1 }127 -1 }128 -1 body {129 -1 margin-block: 2em;130 -1 margin-inline: auto;131 -1 max-inline-size: 37em;132 -1 padding-block: 0;133 -1 padding-inline: 0.5em;134 -1 }135 -1136 -1 html {137 -1 font-size: 2.5vw;138 -1 }139 -1 @media (min-width: 48em) {140 -1 html {141 -1 font-size: 1.2em;142 -1 }143 -1 }144 -1 @media (max-width: 36em) {145 -1 html {146 -1 font-size: 0.9em;147 -1 }148 -1 }149 -1150 -1 label {151 -1 display: block;152 -1 }153 -1154 -1 .button,155 -1 button,156 -1 [type=button],157 -1 [type=submit], input,158 -1 textarea,159 -1 select {160 -1 border: 1px solid #8f8f8f;161 -1 padding-block: 0.3em;162 -1 padding-inline: 0.75em;163 -1 font-family: inherit;164 -1 font-size: inherit;165 -1 line-height: 1.8;166 -1 }167 -1168 -1 input,169 -1 textarea,170 -1 select {171 -1 background: #fff;172 -1 color: #333;173 -1 }174 -1 input:focus-visible,175 -1 textarea:focus-visible,176 -1 select:focus-visible {177 -1 border-color: #2b4d80;178 -1 }179 -1 input:disabled,180 -1 textarea:disabled,181 -1 select:disabled {182 -1 border-color: #8f8f8f;183 -1 background: whitesmoke;184 -1 color: #8f8f8f;185 -1 cursor: not-allowed;186 -1 }187 -1188 -1 textarea {189 -1 line-height: inherit;190 -1 }191 -1192 -1 .button,193 -1 button,194 -1 [type=button],195 -1 [type=submit] {196 -1 text-decoration: none;197 -1 display: inline-block;198 -1 cursor: pointer;199 -1 text-align: center;200 -1 border-radius: 0.3em;201 -1 border-color: #26c;202 -1 background: #26c;203 -1 color: #fff;204 -1 }205 -1 .button:hover, .button:focus-visible,206 -1 button:hover,207 -1 button:focus-visible,208 -1 [type=button]:hover,209 -1 [type=button]:focus-visible,210 -1 [type=submit]:hover,211 -1 [type=submit]:focus-visible {212 -1 border-color: #275aa6;213 -1 background: #275aa6;214 -1 color: #fff;215 -1 }216 -1 .button:active,217 -1 button:active,218 -1 [type=button]:active,219 -1 [type=submit]:active {220 -1 border-color: #2b4d80;221 -1 background: #2b4d80;222 -1 color: #fff;223 -1 }224 -1 .button:disabled,225 -1 button:disabled,226 -1 [type=button]:disabled,227 -1 [type=submit]:disabled {228 -1 border-color: #91b3e6;229 -1 background: #91b3e6;230 -1 color: #e9f0fa;231 -1 cursor: not-allowed;232 -1 }233 -1234 -1 html {235 -1 font-family: serif;236 -1 }237 -1238 -1 h1, h2, h3, h4, h5, h6 {239 -1 font-family: sans-serif;240 -1 }241 -1242 -1 /*# sourceMappingURL=example.css.map */
diff --git a/examples/example.scss b/examples/example.scss
@@ -1,13 +0,0 @@1 -1 @import "../sass/variables";2 -1 @import "../sass/base";3 -1 @import "../sass/layout";4 -1 @import "../sass/fontsize";5 -1 @import "../sass/form";6 -17 -1 html {8 -1 font-family: serif;9 -1 }10 -111 -1 h1, h2, h3, h4, h5, h6 {12 -1 font-family: sans-serif;13 -1 }
diff --git a/package.json b/package.json
@@ -2,12 +2,12 @@ 2 2 "name": "mfbs", 3 3 "version": "5.3.0", 4 4 "description": "mother fucking bootstrap - a minimal CSS framework",5 -1 "keywords": ["sass"],-1 5 "keywords": ["css"], 6 6 "repository": { 7 7 "type": "git", 8 8 "url": "git+https://github.com/xi/mfbs.git" 9 9 },10 -1 "files": ["sass"],-1 10 "files": ["css"], 11 11 "author": "Tobias Bengfort <tobias.bengfort@posteo.de>", 12 12 "license": "GPL-2.0+" 13 13 }
diff --git a/sass/fontsize.scss b/sass/fontsize.scss
@@ -1,11 +0,0 @@1 -1 html {2 -1 font-size: 2.5vi;3 -14 -1 @media (min-width: ($font-size-max * 40)) {5 -1 font-size: $font-size-max;6 -1 }7 -18 -1 @media (max-width: ($font-size-min * 40)) {9 -1 font-size: $font-size-min;10 -1 }11 -1 }
diff --git a/sass/variables.scss b/sass/variables.scss
@@ -1,16 +0,0 @@1 -1 // colors2 -13 -1 $color-bg: #fff !default;4 -1 $color-fg: #333 !default;5 -1 $color-bg-tint: mix($color-bg, $color-fg, 95%) !default;6 -1 $color-border: mix($color-bg, $color-fg, 45%) !default;7 -1 $color-link: #26c !default;8 -1 $color-link-focus: mix($color-link, $color-fg, 50%) !default;9 -110 -1 // lengths11 -1 $font-size-min: 0.9em !default;12 -1 $font-size-max: 1.2em !default;13 -1 $padding: 0.5em !default;14 -1 $spacer: 1em !default;15 -1 $indentation: 1.5rem !default;16 -1 $width: 37em !default;