mfbs

commit

02d076ba53e0f5158d1a97ddcc22d1ecae638641

parent

cd704b3b80d0e1306497fc5c676a1683664b9c65

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2024-04-04 21:23

rm sass

Diffstat

9 files changed, 27 insertions, 273 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     8 
    9    -1 It is written in [Sass](http://sass-lang.com/) and consists of variable
   10    -1 definitions (`variables.scss`), some basic styling (`base.scss`) and some
   11    -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 {
@@ -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/sass/fontsize.scss b/css/fontsize.css

diff --git a/sass/form.scss b/css/form.css

diff --git a/sass/layout.scss b/css/layout.css

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    -1 
    7    -1 [hidden] {
    8    -1   display: none !important;
    9    -1 }
   10    -1 
   11    -1 img,
   12    -1 video {
   13    -1   max-inline-size: 100%;
   14    -1 }
   15    -1 
   16    -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    -1 
   38    -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    -1 
   50    -1 hr {
   51    -1   border: 0;
   52    -1   border-block-end: 1px solid #8f8f8f;
   53    -1   margin-block: 1em;
   54    -1 }
   55    -1 
   56    -1 pre, code {
   57    -1   font-size: 90%;
   58    -1   font-family: monospace;
   59    -1   background-color: whitesmoke;
   60    -1 }
   61    -1 
   62    -1 code {
   63    -1   padding-inline: 0.25em;
   64    -1 }
   65    -1 
   66    -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    -1 
   77    -1 ol, ul {
   78    -1   padding-inline-start: 1.5rem;
   79    -1 }
   80    -1 
   81    -1 dt {
   82    -1   font-weight: bold;
   83    -1 }
   84    -1 
   85    -1 dd {
   86    -1   margin-inline-start: 1.5rem;
   87    -1 }
   88    -1 
   89    -1 blockquote {
   90    -1   font-style: italic;
   91    -1   margin-inline: 1.5rem 0;
   92    -1 }
   93    -1 
   94    -1 table {
   95    -1   border-collapse: collapse;
   96    -1   border-spacing: 0;
   97    -1 }
   98    -1 
   99    -1 tr {
  100    -1   border-bottom: 1px solid #8f8f8f;
  101    -1 }
  102    -1 
  103    -1 td, th {
  104    -1   text-align: start;
  105    -1   padding: 0.25em;
  106    -1   vertical-align: top;
  107    -1 }
  108    -1 
  109    -1 textarea,
  110    -1 select[multiple] {
  111    -1   resize: vertical;
  112    -1 }
  113    -1 
  114    -1 sub, sup {
  115    -1   line-height: 0;
  116    -1 }
  117    -1 
  118    -1 @media print {
  119    -1   html {
  120    -1     background: transparent;
  121    -1     color: #000;
  122    -1   }
  123    -1 
  124    -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    -1 
  136    -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    -1 
  150    -1 label {
  151    -1   display: block;
  152    -1 }
  153    -1 
  154    -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    -1 
  168    -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    -1 
  188    -1 textarea {
  189    -1   line-height: inherit;
  190    -1 }
  191    -1 
  192    -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    -1 
  234    -1 html {
  235    -1   font-family: serif;
  236    -1 }
  237    -1 
  238    -1 h1, h2, h3, h4, h5, h6 {
  239    -1   font-family: sans-serif;
  240    -1 }
  241    -1 
  242    -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    -1 
    7    -1 html {
    8    -1     font-family: serif;
    9    -1 }
   10    -1 
   11    -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/variables.scss b/sass/variables.scss

@@ -1,17 +0,0 @@
    1    -1 :root {
    2    -1     // colors
    3    -1     --color-bg: #fff;
    4    -1     --color-fg: #333;
    5    -1     --color-bg-tint: #f5f5f5;
    6    -1     --color-border: #888;
    7    -1     --color-link: #26c;
    8    -1     --color-link-focus: #248;
    9    -1 
   10    -1     // lengths
   11    -1     --font-size-min: 0.9em;
   12    -1     --font-size-max: 1.2em;
   13    -1     --padding: 0.5em;
   14    -1     --spacer: 1em;
   15    -1     --indentation: 1.5rem;
   16    -1     --width: 37em;
   17    -1 }