├── .github
    └── FUNDING.yml
├── .gitignore
├── LICENSE
├── README.md
├── icon.png
├── index.html
├── minimal-inputs.css
├── minimal.css
├── package.json
└── screenshot.png


/.github/FUNDING.yml:
--------------------------------------------------------------------------------
 1 | # These are supported funding model platforms
 2 | 
 3 | github: chr15m
 4 | patreon: chr15m
 5 | open_collective: # Replace with a single Open Collective username
 6 | ko_fi: chr15m
 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
 9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
13 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .*.swp
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | Permission is hereby granted, free of charge, to any person obtaining a copy
 2 | of this software and associated documentation files (the "Software"), to deal
 3 | in the Software without restriction, including without limitation the rights
 4 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 5 | copies of the Software, and to permit persons to whom the Software is
 6 | furnished to do so, subject to the following conditions:
 7 | 
 8 | The above copyright notice and this permission notice shall be included in
 9 | all copies or substantial portions of the Software.
10 | 
11 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
12 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
13 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
14 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
15 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
16 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
17 | THE SOFTWARE.
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | As a developer I often need to throw together a basic HTML + JS + CSS page to test or prototype some idea.
 2 | 
 3 | These minimal stylesheets get us one step beyond `Times New Roman` to make such a basic page or web app look non-terrible: [demo page](https://chr15m.github.io/minimal-stylesheet).
 4 | 
 5 | ![Screenshot of the inputs styles](./screenshot.png)
 6 | 
 7 | There's a `< 1k` stylesheet for basic HTML styles and a separate `3.2k` one for buttons, forms etc. and they are designed so that the result looks basically the same across different devices.
 8 | 
 9 | ```html
10 | <link rel="stylesheet" type="text/css" href="//chr15m.github.io/minimal-stylesheet/minimal.css"/>
11 | 
12 | <link rel="stylesheet" type="text/css" href="//chr15m.github.io/minimal-stylesheet/minimal-inputs.css"/>
13 | ```
14 | 
15 | Use `npm i minimal-stylesheet` to get these on your local. You can then find the files in `node_modules/minimal-stylesheet/minimal*.css`.
16 | 
17 | ### Tips
18 | 
19 |  * Set the `font-size` on `body` to scale up or down the whole interface.
20 |  * Do a search and replace of `#f56a6a` to theme it with your own color.
21 | 
22 | 


--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chr15m/minimal-stylesheet/14d7cf7192e21441b671cef1ede1818b0efeb68d/icon.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <title>Minimal stylesheet for HTML5 in under 1k of CSS</title>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <link rel="stylesheet" type="text/css" href="minimal.css" >
 8 |     <link rel="stylesheet" type="text/css" href="minimal-inputs.css" >
 9 |     <meta property="og:title" content="Minimal stylesheet for HTML5 in under 1k of CSS">
10 |     <meta property="og:type" content="website" />
11 |     <meta property="og:description" content="A minimal stylesheet for plain unstyled HTML that's just enough to make your page look not bad, and a slightly larger stylesheet for form inputs.">
12 |     <meta property="og:image" content="https://chr15m.github.io/minimal-stylesheet/screenshot.png">
13 |     <meta property="og:url" content="https://chr15m.github.io/minimal-stylesheet/">
14 |     <meta name="twitter:card" content="summary_large_image">
15 |     <link rel="icon" href="icon.png">
16 |   </head>
17 |   <body>
18 |     <h1>🤏 Minimal stylesheet</h1>
19 |     <p>This page is styled with a <a href="minimal.css">minimal stylesheet</a> in under <code>1k</code> of CSS.
20 |        It's just enough to make a page not look awful.
21 |        Most of the styling is shamelessly yoinked from
22 |        <a href="https://jgthms.com/web-design-in-4-minutes/">jgthms' Web Design in 4 Minutes</a>.</p>
23 |     <p>Use: <code>&lt;link rel="stylesheet" type="text/css" href="minimal.css"&gt;</code></p>
24 |     <p><a href="https://github.com/chr15m/minimal-stylesheet">Get the source code or star the project on GitHub</a>.</p>
25 |     <h2>Examples</h2>
26 |     <p>This <a href="#">here is some kinda</a> link.</p>
27 |     <p>And <code>this is some kinda</code> code.</p>
28 |     <blockquote>And this is some kinda blockquote.</blockquote>
29 |     <pre>And here is
30 |     Some code block 0xf2.
31 |     { open(brace); }</pre>
32 |     <h2>Forms etc.</h2>
33 |     <p>There's a separate and <a href="minimal-inputs.css">slighly larger stylesheet</a> of <code>3.2k</code> for styling all of the inputs below.
34 |        These styles are mostly yoinked from <a href="http://html5up.net/">html5up</a> templates.</p>
35 |     <p>Use: <code>&lt;link rel="stylesheet" type="text/css" href="minimal.css"&gt;</code></p>
36 |     <h3>Buttons</h3>
37 |     <div>
38 |       <button>Hello</button>
39 |       <button class="primary">Hello</button>
40 |       <button>Hellooooooooooo yes</button>
41 |       <button class="fit">Hello</button>
42 |       <button class="half primary">Half</button>
43 |       <button class="half">n' half again</button>
44 |       <button class="half">n' half</button> <button class="half">n' half</button>
45 |       <h4>These icon buttons could be fontawesome or whatever:</h4>
46 |       <button class="icon">A</button>
47 |       <button class="icon primary">b</button>
48 |       <button class="icon"><span>🔧&#xFE0E;</span></button>
49 |       <button class="icon"><span>●&#xFE0E;</span></button>
50 |       <button class="icon primary"><span>✔&#xFE0E;</span></button>
51 |       <button>not me i'm text</button>
52 |     </div>
53 |     <h3>Inputs</h3>
54 |     <p>
55 |       <input type="radio" id="demo-priority-low" name="demo-priority" checked="">
56 |       <label for="demo-priority-low">Low</label>
57 |       <input type="radio" id="demo-priority-normal" name="demo-priority" checked="">
58 |       <label for="demo-priority-normal">Normal</label>
59 |       <input type="radio" id="demo-priority-high" name="demo-priority" checked="">
60 |       <label for="demo-priority-high">High</label>
61 |     </p>
62 |     <p>
63 |       <input type="checkbox" id="demo-check-1" name="demo-check-1">
64 |       <label for="demo-check-1">Check one</label>
65 |       <input type="checkbox" id="demo-check-2" name="demo-check-2" checked="">
66 |       <label for="demo-check-2">Check two</label>
67 |       <input type="checkbox" id="demo-check-3" name="demo-check-3">
68 |       <label for="demo-check-3">Checka checka</label>
69 |     </p>
70 |     <p>
71 |       <input type="text" class="half" name="demo-name" id="demo-name" value="" placeholder="Name">
72 |       <input type="password" class="half" name="demo-password" id="demo-password" value="" placeholder="Password">
73 |       <input type="email" class="fit" name="demo-email" id="demo-email" value="" placeholder="Email">
74 |       <textarea placeholder="Foobar" class="fit" rows="7"></textarea>
75 |       <select class="half">
76 |         <option value="one">One</option>
77 |         <option value="two">Two</option>
78 |         <option value="three">Three</option>
79 |         <option value="four">Four yeah</option>
80 |         <option value="five">Five</option>
81 |       </select>
82 |     </p>
83 |     <h2>Loading spinner</h2>
84 |     <p><div class="spinner spin"></div></p>
85 |     <h2>And that's basically it.</h2>
86 |     <p>Yup.</p>
87 | 
88 |     <!-- GitHub banner -->
89 |     <a href="https://github.com/chr15m/minimal-stylesheet" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
90 |     <style>
91 |       .github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
92 |     </style>
93 |   </body>
94 | </html>
95 | 


--------------------------------------------------------------------------------
/minimal-inputs.css:
--------------------------------------------------------------------------------
  1 | /* Hacked from:
  2 |  * https://html5up.net/uploads/demos/editorial/elements.html */
  3 | 
  4 | :root {
  5 |   --color-hi: #f56a6a;
  6 |   --border-radius: 0.375em;
  7 | }
  8 | 
  9 | input, input[type="submit"], input[type="reset"], input[type="button"], button, .button,
 10 | input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea {
 11 |   border-radius: var(--border-radius);
 12 |   background-color: transparent;
 13 |   border: 0;
 14 |   cursor: pointer;
 15 |   display: inline-block;
 16 |   min-height: 3.5em;
 17 |   line-height: 3.5em;
 18 |   padding: 0 2.25em;
 19 |   text-decoration: none;
 20 |   margin: 0.25em 0.25em;
 21 |   font-size: 0.8em;
 22 | }
 23 | 
 24 | input[type="submit"], input[type="reset"], input[type="button"], button, .button {
 25 |   box-shadow: inset 0 0 0 2px var(--color-hi);
 26 |   color: var(--color-hi);
 27 |   font-weight: 700;
 28 |   letter-spacing: 0.075em;
 29 |   text-transform: uppercase;
 30 |   text-align: center;
 31 |   font-size: 0.8em;
 32 | }
 33 | 
 34 | :disabled {
 35 |   opacity: 0.5;
 36 | }
 37 | 
 38 | ::placeholder {
 39 |   color: #bbb !important;
 40 |   opacity: 1.0;
 41 | }
 42 | 
 43 | input, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea {
 44 |   background-color: #eee;
 45 |   color: #555;
 46 |   outline: none;
 47 |   padding: 0 0.75em;
 48 |   font-weight: bold;
 49 | }
 50 | 
 51 | textarea {
 52 |   font-size: 1.2em;
 53 |   line-height: 1.2em;
 54 |   padding-top: 1em;
 55 |   padding-bottom: 1em;
 56 | }
 57 | 
 58 | .primary {
 59 |   background-color: var(--color-hi);
 60 |   color: #eee;
 61 |   box-shadow: none;
 62 | }
 63 | 
 64 | /*** Radio & Checkbox ***/
 65 | 
 66 | input[type="checkbox"], input[type="radio"] {
 67 |   cursor: pointer;
 68 |   display: block;
 69 |   float: left;
 70 |   margin: -2em;
 71 |   width: 1em;
 72 |   appearance: none;
 73 |   opacity: 0;
 74 |   z-index: -1;
 75 | }
 76 | 
 77 | input[type="checkbox"] + label::before, input[type="radio"] + label::before {
 78 |   background-color: var(--color-hi);
 79 |   color: var(--color-hi);
 80 |   cursor: pointer;
 81 |   border-radius: var(--border-radius);
 82 |   content: '_';
 83 |   display: inline-block;
 84 |   height: 1.5em;
 85 |   line-height: 1.58125em;
 86 |   text-align: center;
 87 |   width: 1.5em;
 88 |   margin-right: 0.5em;
 89 |   font-weight: bold;
 90 |   font-size: 1.5em;
 91 |   outline: 0;
 92 |   margin-top: 0.25em;
 93 | }
 94 | 
 95 | input[type="radio"] + label::before {
 96 |   border-radius: 100%;
 97 | }
 98 | 
 99 | input[type="checkbox"] + label, input[type="radio"] + label {
100 |   cursor: pointer;
101 |   margin-right: 1em;
102 |   white-space: nowrap;
103 | }
104 | 
105 | input[type="checkbox"]:checked + label::before, input[type="radio"]:checked + label::before {
106 |   color: #eee;
107 |   content: '\2714';
108 | }
109 | 
110 | /*** Select ***/
111 | 
112 | select {
113 |   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23bbbbbb' /%3E%3C/svg%3E");
114 |   -webkit-appearance: none;
115 |   appearance: none;
116 |   background-size: 1.25rem;
117 |   background-repeat: no-repeat;
118 |   background-position: calc(100% - 1rem) center;
119 |   height: 3rem;
120 |   padding-right: 3rem;
121 |   text-overflow: ellipsis;
122 |   outline: 0;
123 | }
124 | 
125 | select::-ms-expand {
126 |     display: none;
127 | }
128 | 
129 | /*** Layout ***/
130 | 
131 | .fit,.full {
132 |   width: calc(100% - 0.5em);
133 | }
134 | 
135 | .half {
136 |   width: calc(50% - 0.7em);
137 | }
138 | 
139 | .mid {
140 |   text-align: center;
141 | }
142 | 
143 | .double {
144 |   font-size: 1em;
145 | }
146 | 
147 | .icon {
148 |   width: 3.5em;
149 |   padding: 0px;
150 | }
151 | 
152 | .icon > * {
153 |   font-size: 2em;
154 |   line-height: 1em;
155 |   vertical-align: middle;
156 | }
157 | 
158 | /*** Spinner ***/
159 | 
160 | .spinner {
161 |   border: 4px solid silver;
162 |   border-left: 4px solid transparent;
163 |   border-right: 4px solid transparent;
164 |   width: 2em;
165 |   height: 2em;
166 |   border-radius: 2em;
167 |   margin: auto;
168 | }
169 | 
170 | .spin {
171 |   animation: spin 0.333s linear infinite;
172 | }
173 | 
174 | @keyframes spin {
175 |     0% {transform:rotate(0deg);}
176 |     100% {transform:rotate(360deg);}
177 | }
178 | 
179 | /*** Dark mode ***/
180 | 
181 | @media (prefers-color-scheme: dark) {
182 |   input, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea { 
183 |     background:  #444; 
184 |     color: white; 
185 |   }
186 | 
187 |   select {
188 |     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23bbbbbb' /%3E%3C/svg%3E");
189 |     background-size: 1.25rem;
190 |     background-repeat: no-repeat;
191 |     background-position: calc(100% - 1rem) center;
192 |   }
193 | }
194 | 


--------------------------------------------------------------------------------
/minimal.css:
--------------------------------------------------------------------------------
 1 | /* Hacked together based on:
 2 |  * https://jgthms.com/web-design-in-4-minutes/ 
 3 |  */
 4 | 
 5 | :root {
 6 |   --color-hi: #f56a6a;
 7 | }
 8 | 
 9 | * {
10 |   box-sizing: border-box;
11 | }
12 | 
13 | body {
14 |   color: #555;
15 |   margin: 0 auto;
16 |   max-width: 50em;
17 |   font-family: "Helvetica", "Arial", sans-serif;
18 |   line-height: 1.5;
19 |   padding: 2em 1em;
20 | }
21 | 
22 | h1 {
23 |   font-size: 2.5em
24 | }
25 | 
26 | h2 {
27 |   font-size: 2em;
28 | }
29 | 
30 | h3 {
31 |   font-size: 1.5em
32 | }
33 | 
34 | h2, h3 {
35 |   margin-top: 1.5em;
36 | }
37 | 
38 | h1, h2, strong {
39 |   color: #333;
40 | }
41 | 
42 | code, pre {
43 |   background: #eee;
44 | }
45 | 
46 | code {
47 |   padding: 2px 4px;
48 |   vertical-align: text-bottom;
49 | }
50 | 
51 | pre {
52 |   border-left: 2px solid #bbb;
53 |   padding: 1em;
54 | }
55 | 
56 | a {
57 |   color: var(--color-hi);
58 | }
59 | 
60 | blockquote, q {
61 |   border-left: solid 4px #bbb;
62 |   font-style: italic;
63 |   margin: 0 0 2em 0;
64 |   padding: 0.5em 0 0.5em 2em;
65 | }
66 | 
67 | blockquote::before, blockquote::after, q::before, q::after {
68 |     content: '';
69 |     content: none;
70 | }
71 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "minimal-stylesheet",
 3 |   "description": "A minimal stylesheet for when you just need your web app MVP or prototype to look ok.",
 4 |   "version": "0.1.1",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/chr15m/minimal-stylesheet.git"
 8 |   },
 9 |   "keywords": [
10 |     "css",
11 |     "stylesheet",
12 |     "minimal",
13 |     "mvp"
14 |   ],
15 |   "author": "Chris McCormick <chris@mccormick.cx>",
16 |   "bugs": {
17 |     "url": "https://github.com/chr15m/minimal-stylesheet/issues"
18 |   },
19 |   "homepage": "https://github.com/chr15m/minimal-stylesheet#readme",
20 |   "devDependencies": {
21 |     "browser-sync": "^2.29.1"
22 |   },
23 |   "scripts": {
24 |     "watch": "browser-sync start --server . --files . --no-open --port 8000"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chr15m/minimal-stylesheet/14d7cf7192e21441b671cef1ede1818b0efeb68d/screenshot.png


--------------------------------------------------------------------------------