├── .gitattributes
├── README.md
├── birchtree.css
├── img
    ├── alerts.png
    ├── buttons.png
    ├── checkbox.png
    ├── headings.png
    ├── labels.png
    ├── nav-left.png
    ├── nav-right.png
    ├── nav.png
    ├── select.png
    ├── text-input-large.png
    ├── text-input.png
    ├── textarea.png
    ├── upload.png
    └── wells.png
└── index.html


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Birchtree.css
  2 | 
  3 | Mocking up simple personal pages or test sites for your business typically mean using zero, to close to zero styling, and moving on because "it’s just a test site, who cares?" Oh, and these pages usually look like trash on mobile. This is all reasonable, it doesn’t need to be this way!
  4 | 
  5 | Birchtree.css is a small CSS package you can use to make those sites look good with very little effort. You could use this for a full, public website, but it’s lacking a ton of features, so you’d have to build all that out yourself.
  6 | 
  7 | Yes, something like Bootstrap does this, but (a) I don't love how Bootstrap looks out of the box, and (b) our aim is to have as little code as possible. Just because I don't see the extent of Bootstrap, doesn't mean it's not overkill for some things.
  8 | 
  9 | # Usage
 10 | 
 11 | Think of this like Bootstrap, but way simpler and way smaller. You use some basic HTML formatting and class names to style everything from form inputs to buttons to headers and more.
 12 | 
 13 | # Step 1: Import birchtree.css
 14 | 
 15 | In your HTML or PHP file, load the CSS file.
 16 | 
 17 | ```html
 18 | <link rel="stylesheet" src="birchtree.css">
 19 | ```
 20 | 
 21 | # Step 2: Use the below formatting to get the styles.
 22 | 
 23 | ## Contents
 24 | 
 25 | * [Layout](#layout)
 26 | * [Form Inputs](#form-inputs)
 27 | * [Buttons](#buttons)
 28 | * [Headings](#headings)
 29 | * [Information Wells](#information-wells)
 30 | * [Alerts](#alerts)
 31 | * [Labels](#labels)
 32 | * [Navigation Bars](#navigation-bars)
 33 | 
 34 | ## Layout
 35 | 
 36 | This ain’t Bootstrap, so don’t look to this to do advanced styling for you, but you can use the <code>container</code> class to hold all parts of your page. This simply constrains the width and centers everything on the page.
 37 | 
 38 | ```html
 39 | <div class="container">
 40 |     { test page content }
 41 | </div>
 42 | ```
 43 | 
 44 | ## Form Inputs
 45 | 
 46 | The building block of almost any test page, form inputs are easily laid out.
 47 | 
 48 | **Text**
 49 | 
 50 | ![](img/text-input.png)
 51 | 
 52 | ```html
 53 | <div class="input input-text">
 54 |     <span class="input-label">Email Address</span>
 55 |     <input class="input-field" type="text" placeholder="someone@example.com" name="email" value="">
 56 | </div>
 57 | ```
 58 | 
 59 | You can also make larger text fields by adding the <code>input-mega</code> class to the <code>input-text</code> element.
 60 | 
 61 | ![](img/text-input-large.png)
 62 | 
 63 | ```html
 64 | <div class="input input-text input-mega">
 65 |     <span class="input-label">Large Text Field</span>
 66 |     <input class="input-field" type="text" placeholder="someone@example.com" name="email">
 67 | </div>
 68 | ```
 69 | 
 70 | **Checkbox**
 71 | 
 72 | ![](img/checkbox.png)
 73 | 
 74 | ```html
 75 | <div class="input input-chckbox">
 76 |     <input type="checkbox"> <span class="input-label">Checkbox Stuff</span>
 77 | </div>
 78 | ```
 79 | 
 80 | **Select**
 81 | 
 82 | ![](img/select.png)
 83 | 
 84 | ```html
 85 | <div class="input input-select">
 86 |     <select class="input-dropdown">
 87 |         <option value="">— Select An Option —</option>
 88 |         <option value="1">One</option>
 89 |         <option value="2">Two</option>
 90 |         <option value="3">Three</option>
 91 |     </select>
 92 | </div>
 93 | ```
 94 | 
 95 | **File Upload**
 96 | 
 97 | ![](img/upload.png)
 98 | 
 99 | ```html
100 | <div class="input input-upload">
101 |     <label class="input-label" for="file-upload">Upload a file</label>
102 |     <input type="file" class="file-upload" id="file-upload">
103 | </div>
104 | ```
105 | 
106 | ## Buttons
107 | 
108 | ![](img/buttons.png)
109 | 
110 | Rendering a basic button is simple.
111 | 
112 | ```html
113 | <button class="btn">Pay Now</button>
114 | ```
115 | 
116 | If you need a different type of button, you can add one of 5 other classes to get different styles.
117 | 
118 | ```html
119 | <button class="btn btn-danger">Danger</button>
120 | ```
121 | 
122 | All options include:
123 | 
124 | * <code>btn-submit</code>
125 | * <code>btn-warning</code>
126 | * <code>btn-danger</code>
127 | * <code>btn-dark</code>
128 | * <code>btn-light</code>
129 | 
130 | Buttons can be made larger or smaller if you’d like, using <code>btn-sm</code> or <code>btn-mega</code>
131 | 
132 | ```html
133 | <button class="btn btn-submit btn-sm">Confirm, Do the Thing</button>
134 | <button class="btn btn-danger btn-mega">Warning, Please Confirm This</button>
135 | ```
136 | 
137 | ## Headings
138 | 
139 | ![](img/headings.png)
140 | 
141 | There is nothing special to do here, Birchtree.css simply makes some small adjustments to heading designs.
142 | 
143 | ```html
144 | <h1>This is a heading with style</h1>
145 | ```
146 | 
147 | Oh, and try using the class <code>site-title</code> to make your page’s name pop even more.
148 | 
149 | ```html
150 | <span class="site-title">Page Title</span>
151 | ```
152 | 
153 | ## Information Wells
154 | 
155 | ![](img/wells.png)
156 | 
157 | Typically used for instructional text.
158 | 
159 | ```html
160 | <div class="well">
161 |     Paragraph of text goes here.
162 | </div>
163 | ```
164 | 
165 | ## Alerts
166 | 
167 | ![](img/alerts.png)
168 | 
169 | Much like a well, these are call outs you can use to show success or error messages, or whatever you want, really.
170 | 
171 | ```html
172 | <div class="alert">
173 |     Hey, this is an alert that I think you should really care about!
174 | </div>
175 | ```
176 | 
177 | Much like buttons, this creates a blue alert, and there are some alternate styles you can pick from:
178 | 
179 | * <code>alert-success</code>
180 | * <code>alert-warning</code>
181 | * <code>alert-danger</code>
182 | 
183 | ```html
184 | <div class="alert alert-success">
185 |     Hey, this is an alert that I think you should really care about!
186 | </div>
187 | ```
188 | 
189 | ## Labels
190 | 
191 | ![](img/labels.png)
192 | 
193 | If you need to put a badge/label next to something to call it out, labels let you do this.
194 | 
195 | ```html
196 | <p>Item <span class="label">Badge</span></p>
197 | ```
198 | 
199 | Labels will resize based on the size of their parent element, so the above example will be pretty small, but a label on an <code>h1</code> will be much bigger.
200 | 
201 | Again, there are a few colors to choose from.
202 | 
203 | * <code>label-success</code>
204 | * <code>label-warning</code>
205 | * <code>label-danger</code>
206 | 
207 | ```html
208 | <p>Item <span class="label label-danger">Badge</span></p>
209 | ```
210 | 
211 | ## Navigation Bars
212 | 
213 | ![](img/nav.png)
214 | 
215 | If you want to link to a few other pages, use the navigation bar element to make nicer links to your other pages.
216 | 
217 | ```html
218 | <div class="nav">
219 |     <div class="nav-item active" aria-current="page">Home</div>
220 |     <div class="nav-item"><a href="https://google.com" target="_blank">Google</a></div>
221 |     <div class="nav-item"><a href="https://github.com" target="_blank">GitHub</a></div>
222 | </div>
223 | ```
224 | 
225 | The default is to center the menu items, but you can left or right-justify them using:
226 | 
227 | ![](img/nav-left.png)
228 | 
229 | ```html
230 | <div class="nav nav-left">
231 |     { nav items }
232 | </div>
233 | ```
234 | 
235 | ![](img/nav-right.png)
236 | 
237 | ```html
238 | <div class="nav nav-right">
239 |     { nav items }
240 | </div>
241 | ```
242 | 
243 | Also, there is an option to throw a subtle shadow under the navigation to add a little separation.
244 | 
245 | ```html
246 | <div class="nav nav-shadow">
247 |     { nav items }
248 | </div>
249 | ```
250 | 
251 | 
252 | 


--------------------------------------------------------------------------------
/birchtree.css:
--------------------------------------------------------------------------------
  1 | /* General Rules */
  2 | * {
  3 | 	font-family: -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | *::before,
  8 | *::after {
  9 |   box-sizing: border-box;
 10 | }
 11 | 
 12 | body {
 13 | 	margin: 0px;
 14 | 	padding: 0px;
 15 | }
 16 | 
 17 | a {
 18 | 	color: #189fcc;
 19 | 	text-decoration: none;
 20 | }
 21 | 
 22 | hr {
 23 | 	color: black;
 24 | 	width: 100%;
 25 | 	border: 0.5px solid black;
 26 | 	margin: 40px 0;
 27 | }
 28 | 
 29 | .site-title {
 30 | 	font-size: 50px;
 31 | 	font-weight: 700;
 32 | }
 33 | 
 34 | h1 {
 35 | 	font-weight: 300;
 36 | 	margin: 20px 0 10px 0;
 37 | 	font-size: 42px;
 38 | }
 39 | 
 40 | h2 {
 41 | 	font-weight: 300;
 42 | 	margin: 20px 0 10px 0;
 43 | 	font-size: 34px;
 44 | }
 45 | 
 46 | h3 {
 47 | 	font-weight: 300;
 48 | 	margin: 20px 0 10px 0;
 49 | 	font-size: 30px;
 50 | }
 51 | 
 52 | h4 {
 53 | 	font-weight: 300;
 54 | 	margin: 20px 0 10px 0;
 55 | 	font-size: 26px;
 56 | }
 57 | 
 58 | h5 {
 59 | 	font-weight: 300;
 60 | 	margin: 20px 0 10px 0;
 61 | 	font-size: 22px;
 62 | }
 63 | 
 64 | h6 {
 65 | 	font-weight: 300;
 66 | 	margin: 20px 0 10px 0;
 67 | 	font-size: 18px;
 68 | }
 69 | 
 70 | .container {
 71 | 	width: 700px;
 72 | 	max-width: 95%;
 73 | 	display: block;
 74 | 	margin: 0px auto 100px auto;
 75 | }
 76 | 
 77 | /* Alerts */
 78 | .alert {
 79 | 	background-color: #189fcc66;
 80 | 	padding: 20px;
 81 | 	margin: 20px 0px;
 82 | 	border-radius: 4px;
 83 | 	box-shadow: 0px 2px 8px #00000022;
 84 | }
 85 | .alert-success {
 86 | 	background-color: #06D6A066;
 87 | }
 88 | .alert-warning {
 89 | 	background-color: #f47f2c66;
 90 | }
 91 | .alert-danger {
 92 | 	background-color: #EF476F66;
 93 | }
 94 | 
 95 | /* Labels */
 96 | .label {
 97 | 	background-color: #189fcc;
 98 | 	border-radius: 2px;
 99 | 	padding: 5px 10px;
100 | 	color: white;
101 | 	font-size: 0.7em;
102 | 	font-weight: 700;
103 | }
104 | .label-success {
105 | 	background-color: #06D6A0;
106 | }
107 | .label-warning {
108 | 	background-color: #f47f2c;
109 | }
110 | .label-danger {
111 | 	background-color: #EF476F;
112 | }
113 | 
114 | .well {
115 | 	background-color: #e5e9ea;
116 | 	padding: 20px;
117 | 	border-radius: 4px;
118 | 	margin: 20px 0;
119 | }
120 | 
121 | /* Buttons */
122 | .btn {
123 | 	-webkit-appearance: none;
124 | 	font-family: sans-serif;
125 | 	background: linear-gradient(140deg, #189fcc, #0babe0);
126 | 	box-shadow: 0px 2px 8px #189fcc40;
127 | 	color: white;
128 | 	border: none;
129 | 	padding: 10px 30px;
130 | 	margin: 5px 3px;
131 | 	font-size: 18px;
132 | 	border-radius: 4px;
133 | 	min-width: 140px;
134 | 	transition: 200ms;
135 | }
136 | .btn:hover {
137 | 	cursor: pointer;
138 | 	opacity: 0.95;
139 | 	transition: 200ms;
140 | }
141 | .btn-sm {
142 | 	font-size: 14px;
143 | 	padding: 6px 18px;
144 | 	margin: 5px 1px;
145 | 	min-width: 50px;
146 | 	border-radius: 3px;
147 | 	box-shadow: 0px 2px 8px #189fcc40;
148 | }
149 | .btn-mega {
150 | 	font-size: 22px;
151 | 	padding: 15px 30px;
152 | 	margin: 10px 5px;
153 | 	min-width: 200px;
154 | 	border-radius: 6px;
155 | 	box-shadow: 0px 2px 8px #189fcc40;
156 | }
157 | /* Button Styles */
158 | .btn-success {
159 | 	background: linear-gradient(140deg, #06D6A0, #0fe2aa);
160 | 	box-shadow: 0px 2px 8px #06D6A040;
161 | }
162 | .btn-warning {
163 | 	background: linear-gradient(140deg, #f47f2c, #f99045);
164 | 	box-shadow: 0px 2px 8px #f47f2c40;
165 | }
166 | .btn-danger {
167 | 	background: linear-gradient(140deg, #EF476F, #f7315f);
168 | 	box-shadow: 0px 2px 8px #EF476F40;
169 | }
170 | .btn-dark {
171 | 	background: linear-gradient(140deg, #073B4C, #08485e);
172 | 	box-shadow: 0px 2px 8px #073B4C40;
173 | }
174 | .btn-light {
175 | 	background: linear-gradient(140deg, #e5e9ea, #f4f4f4);
176 | 	box-shadow: 0px 2px 8px #00000030;
177 | 	color: #073B4C;
178 | }
179 | 
180 | /* Inputs */
181 | .input {
182 | 	padding: 10px 0px;
183 | }
184 | .input-text, .input-textarea, .input-upload {
185 | 	display: flex;
186 | 	flex-direction: column;
187 | }
188 | .input-label {
189 | 	padding-left: 3px;
190 | }
191 | .input-field {
192 | 	border: 1px solid #e5e9ea;
193 | 	-webkit-appearance: none;
194 | 	border-radius: 2px;
195 | 	font-size: 16px;
196 | 	padding: 6px;
197 | 	box-shadow: 0px 2px 8px #00000011;
198 | }
199 | textarea {
200 | 	border: 1px solid #e5e9ea;
201 | 	-webkit-appearance: none;
202 | 	border-radius: 2px;
203 | 	font-size: 16px;
204 | 	padding: 6px;
205 | 	box-shadow: 0px 2px 8px #00000011;
206 | 	height: 200px;
207 | }
208 | .input-mega .input-label {
209 | 	font-size: 22px;
210 | }
211 | .input-mega .input-field {
212 | 	font-size: 24px;
213 | 	padding: 10px;
214 | }
215 | .input-dropdown {
216 | 	width: 100%;
217 | 	border: 1px solid #e5e9ea;
218 | 	-webkit-appearance: none;
219 | 	border-radius: 2px;
220 | 	font-size: 16px;
221 | 	padding: 6px;
222 | 	box-shadow: 0px 2px 8px #00000011;
223 | }
224 | .file-upload {
225 | 	font-size: 20px;
226 | }
227 | 
228 | /* Navigation */
229 | .nav {
230 | 	display: flex;
231 | 	justify-content: center;
232 | 	background-color: #f4f4f4;
233 | 	margin: 0px 0px 30px 0px;
234 | 	padding: auto 20px;
235 | }
236 | .nav-left {
237 | 	justify-content: flex-start;
238 | }
239 | .nav-right {
240 | 	justify-content: flex-end;
241 | }
242 | .nav-shadow {
243 | 	box-shadow: 0px 2px 12px #00000020;
244 | }
245 | .nav-item {
246 | 	padding: 20px 10px;
247 | 	transition: 100ms;
248 | }
249 | .nav-item:hover {
250 | 	background-color: #189fcc;
251 | 	cursor: pointer;
252 | }
253 | .nav-item:hover > a {
254 | 	color: white;
255 | }
256 | .active {
257 | 	color: #000000;
258 | 	border-bottom: 3px solid #189fcc;
259 | }
260 | .active:hover {
261 | 	color:white;
262 | }
263 | 
264 | @media (prefers-color-scheme: dark) {
265 | 	* {
266 | 		color: white;
267 | 	}
268 | 	html {
269 | 		background-color: #222222;
270 | 	}
271 | 	hr {
272 | 		color: white;
273 | 	}
274 | 	.well {
275 | 		background-color: #121212;
276 | 	}
277 | 	input {
278 | 		background-color: #222222;
279 | 		border-color: white;
280 | 	}
281 | 	.alert {
282 | 		background-color: #189fcc;
283 | 	}
284 | 	.alert-success {
285 | 		background-color: #06D6A0;
286 | 	}
287 | 	.alert-warning {
288 | 		background-color: #f47f2c;
289 | 	}
290 | 	.alert-danger {
291 | 		background-color: #EF476F;
292 | 	}
293 | 	.nav {
294 | 		background-color: #121212;
295 | 	}
296 | 	.active {
297 | 		color: white;
298 | 	}
299 | }


--------------------------------------------------------------------------------
/img/alerts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/alerts.png


--------------------------------------------------------------------------------
/img/buttons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/buttons.png


--------------------------------------------------------------------------------
/img/checkbox.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/checkbox.png


--------------------------------------------------------------------------------
/img/headings.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/headings.png


--------------------------------------------------------------------------------
/img/labels.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/labels.png


--------------------------------------------------------------------------------
/img/nav-left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/nav-left.png


--------------------------------------------------------------------------------
/img/nav-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/nav-right.png


--------------------------------------------------------------------------------
/img/nav.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/nav.png


--------------------------------------------------------------------------------
/img/select.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/select.png


--------------------------------------------------------------------------------
/img/text-input-large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/text-input-large.png


--------------------------------------------------------------------------------
/img/text-input.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/text-input.png


--------------------------------------------------------------------------------
/img/textarea.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/textarea.png


--------------------------------------------------------------------------------
/img/upload.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/upload.png


--------------------------------------------------------------------------------
/img/wells.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattbirchler/birchtree-css/f72918545d3a3f54caa71967d855b2e26997ac1b/img/wells.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!-- This file is not useful for integrators, but it's what I use at https://mattbirchler.com/css for the non-GitHub documentation. -->
  2 | 
  3 | <head>
  4 | 	<title>Birchtree.css</title>
  5 | 	<link rel="stylesheet" href="birchtree.css">
  6 | 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7 | </head>
  8 | <div class="nav nav-shadow">
  9 |     <div class="nav-item active" aria-current="page">Home</div>
 10 |     <div class="nav-item"><a href="https://github.com/mattbirchler/birchtree-css" target="_blank">GitHub</a></div>
 11 |     <div class="nav-item"><a href="https://mattbirchler.com" target="_blank">About Me</a></div>
 12 | </div>
 13 | <style>
 14 |     .highlight {
 15 |         background-color: #272336;
 16 |         padding: 1px 20px;
 17 |         color: white;
 18 |         border-radius: 4px;
 19 |         font-weight: 500;
 20 |         overflow: hidden;
 21 |         margin: 20px 0;
 22 |     }
 23 |     pre, pre span {
 24 |         font-family: monospace;
 25 |         font-weight: 500;
 26 |     }
 27 |     .pl-ent {
 28 |         color: #76F0B4;
 29 |     }
 30 |     .pl-e {
 31 |         color: #FADF4B;
 32 |     }
 33 |     .pl-s {
 34 |         color: #FB8E2C;
 35 |     }
 36 | </style>
 37 | <div class="container">
 38 |     <h1 class="site-title">Birchtree.css</h1>
 39 |     <div class="well">
 40 |         Mocking up simple personal pages or test sites for your business typically mean using zero, to close to zero styling, and moving on because "it's just a test site, who cares?" Oh, and these pages usually look like trash on mobile. This is all reasonable, it doesn't need to be this way!
 41 |         <br><br>
 42 |         Birchtree.css is a small CSS package you can use to make those sites look good with very little effort. You could use this for a full, public website, but it's lacking a ton of features, so you'd have to build all that out yourself.
 43 |         <br><br>
 44 |         Yes, something like Bootstrap does this, but (a) I don't love how Bootstrap looks out of the box, and (b) our aim is to have as little code as possible. Just because I don't see the extent of Bootstrap, doesn't mean it's not overkill for some things.
 45 |     </div>
 46 |     <h1>Usage</h1>
 47 |     <p>Think of this like Bootstrap, but way simpler and way smaller. You use some basic HTML formatting and class names to style everything from form inputs to buttons to headers and more.</p>
 48 |     <h2>Step 1: Import birchtree.css</h2>
 49 |     <p>Clone the <a href="https://mattbirchler.com/css/birchtree.css" target="_blank">birhtree.css file</a> into your project and load it from your header.</p>
 50 |     <div class="highlight highlight-text-html-basic">
 51 |         <pre>&lt;<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s">"stylesheet"</span> <span class="pl-e">src</span>=<span class="pl-s">"birchtree.css"</span>&gt;</pre>
 52 |     </div>
 53 | 
 54 |     <h2>Step 2: Use the below formatting to get the styles</h2>
 55 | 
 56 |     <h3>Contents</h3>
 57 | 
 58 |     <ul>
 59 |         <li>Layout</li>
 60 |         <li>Form Inputs</li>
 61 |         <li>Buttons</li>
 62 |         <li>Headings</li>
 63 |         <li>Information Wells</li>
 64 |         <li>Alerts</li>
 65 |         <li>Labels</li>
 66 |         <li>Navigation</li>
 67 |     </ul>
 68 |     <hr>
 69 |     <h3>Layout</h3>
 70 |     <div class="well">
 71 |         This ain't Bootstrap, so don't look to this to do advanced styling for you, but you can use the container class to hold all parts of your page. This simply constrains the width and centers everything on the page.
 72 |     </div>
 73 | 
 74 |     <div class="highlight highlight-text-html-basic">
 75 | <pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"container"</span>&gt;
 76 |     { page content }
 77 | &lt;/<span class="pl-ent">div</span>&gt;</pre>
 78 | </div>
 79 | <hr>
 80 |     <h3>Form Inputs</h3>
 81 | 
 82 |     <h3>Text</h3>
 83 | 
 84 |     <div class="input input-text">
 85 |         <span class="input-label">Email Address</span>
 86 |         <input class="input-field" type="text" placeholder="hey@yo.co" name="email">
 87 |     </div>
 88 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"input</span> <span class="pl-e">input-text"</span>&gt;
 89 |     &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s">"input-label"</span>&gt;Email Address&lt;/<span class="pl-ent">span</span>&gt;
 90 |     &lt;<span class="pl-ent">input</span> <span class="pl-e">class</span>=<span class="pl-s">"input-field"</span> <span class="pl-e">type</span>=<span class="pl-s">"text"</span> <span class="pl-e">placeholder</span>=<span class="pl-s">"hey@yo.co"</span> <span class="pl-e">name</span>=<span class="pl-s">"email"</span>&gt;
 91 | &lt;/<span class="pl-ent">div</span>&gt;</pre></div>
 92 | 
 93 | <p>You can also create large text fields.</p>
 94 | 
 95 | <div class="input input-text input-mega">
 96 |     <span class="input-label">Large Text Field</span>
 97 |     <input class="input-field" type="text" placeholder="someone@example.com" name="email">
 98 | </div>
 99 | 
100 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"input</span> <span class="pl-e">input-text input-mega"</span>&gt;
101 |     &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s">"input-label"</span>&gt;Email Address&lt;/<span class="pl-ent">span</span>&gt;
102 |     &lt;<span class="pl-ent">input</span> <span class="pl-e">class</span>=<span class="pl-s">"input-field"</span> <span class="pl-e">type</span>=<span class="pl-s">"text"</span> <span class="pl-e">placeholder</span>=<span class="pl-s">"hey@yo.co"</span> <span class="pl-e">name</span>=<span class="pl-s">"email"</span>&gt;
103 | &lt;/<span class="pl-ent">div</span>&gt;</pre></div>
104 | <hr>
105 | <h3>Checkbox</h3>
106 | <div class="input input-chckbox">
107 |     <input type="checkbox"> <span class="input-label">Check this for fun</span>
108 | </div>
109 | 
110 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"input</span> <span class="pl-e">input-chckbox"</span>&gt;
111 |     &lt;<span class="pl-ent">input</span> <span class="pl-e">type</span>=<span class="pl-s">"checkbox"</span>&gt; &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s">"input-label"</span>&gt;Checkbox Stuff&lt;/<span class="pl-ent">span</span>&gt;
112 | &lt;/<span class="pl-ent">div</span>&gt;</pre></div>
113 | <hr>
114 | <h3>Select</h3>
115 | 
116 | <div class="input input-select">
117 |     <select class="input-dropdown">
118 |         <option value="">-- Select An Option --</option>
119 |         <option value="1">One</option>
120 |         <option value="2">Two</option>
121 |         <option value="3">Three</option>
122 |     </select>
123 | </div>
124 | 
125 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"input</span> <span class="pl-e">input-select"</span>&gt;
126 |     &lt;<span class="pl-ent">select</span> <span class="pl-e">class</span>=<span class="pl-s">"input-dropdown"</span>&gt;
127 |         &lt;<span class="pl-ent">option</span> <span class="pl-e">value</span>=<span class="pl-s">""</span>&gt;-- Select An Option --&lt;/<span class="pl-ent">option</span>&gt;
128 |         &lt;<span class="pl-ent">option</span> <span class="pl-e">value</span>=<span class="pl-s">"1"</span>&gt;One&lt;/<span class="pl-ent">option</span>&gt;
129 |         &lt;<span class="pl-ent">option</span> <span class="pl-e">value</span>=<span class="pl-s">"2"</span>&gt;Two&lt;/<span class="pl-ent">option</span>&gt;
130 |         &lt;<span class="pl-ent">option</span> <span class="pl-e">value</span>=<span class="pl-s">"3"</span>&gt;Three&lt;/<span class="pl-ent">option</span>&gt;
131 |     &lt;/<span class="pl-ent">select</span>&gt;
132 | &lt;/<span class="pl-ent">div</span>&gt;</pre></div>
133 | <hr>
134 | <h3>File Upload</h3>
135 | 
136 | <div class="input input-upload">
137 |     <label class="input-label" for="file-upload">Upload a file</label>
138 |     <input type="file" class="file-upload" id="file-upload">
139 | </div>
140 | 
141 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"input</span> <span class="pl-e">input-upload"</span>&gt;
142 |     &lt;<span class="pl-ent">label</span> <span class="pl-e">class</span>=<span class="pl-s">"input-label"</span> <span class="pl-e">for</span>=<span class="pl-s">"file-upload"</span>&gt;Upload a file&lt;/<span class="pl-ent">label</span>&gt;
143 |     &lt;<span class="pl-ent">input</span> <span class="pl-e">type</span>=<span class="pl-s">"file"</span> <span class="pl-e">class</span>=<span class="pl-s">"file-upload"</span> <span class="pl-e">id</span>=<span class="pl-s">"file-upload"</span>&gt;
144 | &lt;/<span class="pl-ent">div</span>&gt;</pre></div>
145 | <hr>
146 | <h3>Buttons</h3>
147 | 
148 | <button class="btn">Default</button>
149 | <button class="btn btn-success">Success</button>
150 | <button class="btn btn-warning">Warning</button>
151 | <button class="btn btn-danger">Danger</button>
152 | <button class="btn btn-dark">Dark</button>
153 | <button class="btn btn-light">Light</button>
154 |     
155 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">button</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>btn<span class="pl-pds">"</span></span>&gt;Default&lt;/<span class="pl-ent">button</span>&gt;
156 | &lt;<span class="pl-ent">button</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>btn btn-success<span class="pl-pds">"</span></span>&gt;Success&lt;/<span class="pl-ent">button</span>&gt;
157 | &lt;<span class="pl-ent">button</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>btn btn-warning<span class="pl-pds">"</span></span>&gt;Warning&lt;/<span class="pl-ent">button</span>&gt;
158 | &lt;<span class="pl-ent">button</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>btn btn-danger<span class="pl-pds">"</span></span>&gt;Danger&lt;/<span class="pl-ent">button</span>&gt;
159 | &lt;<span class="pl-ent">button</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>btn btn-dark<span class="pl-pds">"</span></span>&gt;Dark&lt;/<span class="pl-ent">button</span>&gt;
160 | &lt;<span class="pl-ent">button</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>btn btn-light<span class="pl-pds">"</span></span>&gt;Light&lt;/<span class="pl-ent">button</span>&gt;</pre></div>
161 | 
162 | <p>You can also make smaller or larger buttons.</p>
163 | 
164 | <button class="btn btn-sm">Small Button</button>
165 | 
166 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">button</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>btn btn-sm<span class="pl-pds">"</span></span>&gt;Small Button&lt;/<span class="pl-ent">button</span>&gt;</pre></div>
167 | 
168 | <button class="btn btn-mega">Large Button</button>
169 | 
170 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">button</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>btn btn-mega<span class="pl-pds">"</span></span>&gt;Large Button&lt;/<span class="pl-ent">button</span>&gt;</pre></div>
171 | <hr>
172 | <h3>Headings</h3>
173 | <p>Nothing special to do here, just use headings like normal.</p>
174 | <h1>Heading 1</h1>
175 | <h2>Heading 2</h2>
176 | <h3>Heading 3</h3>
177 | <h4>Heading 4</h4>
178 | <h5>Heading 5</h5>
179 | <h6>Heading 6</h6>
180 | <hr>
181 | <h3>Wells</h3>
182 | 
183 | <div class="well">
184 |     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
185 | </div>
186 | 
187 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"well"</span>&gt;
188 |     Paragraph of text goes here.
189 | &lt;/<span class="pl-ent">div</span>&gt;</pre></div>
190 | <hr>
191 | <h3>Alerts</h3>
192 | 
193 | <div class="alert">
194 |     Hey, this is an alert that I think you should really care about!
195 | </div>
196 | <div class="alert alert-success">
197 |     Hey, this is an alert that I think you should really care about!
198 | </div>
199 | <div class="alert alert-warning">
200 |     Hey, this is an alert that I think you should really care about!
201 | </div>
202 | <div class="alert alert-danger">
203 |     Hey, this is an alert that I think you should really care about!
204 | </div>
205 | 
206 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"alert"</span>&gt;
207 |     Hey, this is an alert that I think you should really care about!
208 | &lt;/<span class="pl-ent">div</span>&gt;</pre></div>
209 | <hr>
210 | <h3>Labels</h3>
211 | <h4>Item <span class="label">Badge</span></h4>
212 | <h5>Item <span class="label label-success">Badge 2</span></h5>
213 | <h6>Item <span class="label label-warning">Another longer badge</span></h6>
214 | <p>Item <span class="label label-danger">99+</span></p>
215 | 
216 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">p</span>&gt;Item &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s">"label"</span>&gt;Badge&lt;/<span class="pl-ent">span</span>&gt;&lt;/<span class="pl-ent">p</span>&gt;
217 | &lt;<span class="pl-ent">p</span>&gt;Item &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s">"label label-success"</span>&gt;Badge&lt;/<span class="pl-ent">span</span>&gt;&lt;/<span class="pl-ent">p</span>&gt;
218 | &lt;<span class="pl-ent">p</span>&gt;Item &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s">"label label-warning"</span>&gt;Badge&lt;/<span class="pl-ent">span</span>&gt;&lt;/<span class="pl-ent">p</span>&gt;
219 | &lt;<span class="pl-ent">p</span>&gt;Item &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s">"label label-danger"</span>&gt;Badge&lt;/<span class="pl-ent">span</span>&gt;&lt;/<span class="pl-ent">p</span>&gt;</pre></div>
220 | <hr>
221 | <h3>Navigation</h3>
222 | 
223 | <p>If you want to link to a few other pages, use the navigation bar element to make nicer links to your other pages.</p>
224 | 
225 | <div class="nav">
226 |     <div class="nav-item active" aria-current="page">Home</div>
227 |     <div class="nav-item"><a href="https://google.com" target="_blank">Google</a></div>
228 |     <div class="nav-item"><a href="https://github.com" target="_blank">GitHub</a></div>
229 | </div>
230 | 
231 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav"</span>&gt;
232 |     &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav-item</span> <span class="pl-e">active"</span> <span class="pl-e">aria-current</span>=<span class="pl-s">"page"</span>&gt;Home&lt;/<span class="pl-ent">div</span>&gt;
233 |     &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav-item"</span>&gt;&lt;<span class="pl-ent">a</span> <span class="pl-e">href</span>=<span class="pl-s">"https://google.com"</span> <span class="pl-e">target</span>=<span class="pl-s">"_blank"</span>&gt;Google&lt;/<span class="pl-ent">a</span>&gt;&lt;/<span class="pl-ent">div</span>&gt;
234 |     &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav-item"</span>&gt;&lt;<span class="pl-ent">a</span> <span class="pl-e">href</span>=<span class="pl-s">"https://github.com"</span> <span class="pl-e">target</span>=<span class="pl-s">"_blank"</span>&gt;GitHub&lt;/<span class="pl-ent">a</span>&gt;&lt;/<span class="pl-ent">div</span>&gt;
235 | &lt;/<span class="pl-ent">div</span>&gt;</pre></div>
236 |     
237 | <p>The default behavior is to center the items, but you can also left or right align the menu items.</p>
238 | 
239 | <div class="nav nav-left">
240 |     <div class="nav-item active" aria-current="page">Home</div>
241 |     <div class="nav-item"><a href="https://google.com" target="_blank">Google</a></div>
242 |     <div class="nav-item"><a href="https://github.com" target="_blank">GitHub</a></div>
243 | </div>
244 | 
245 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav nav-left"</span>&gt;
246 |     &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav-item</span> <span class="pl-e">active"</span> <span class="pl-e">aria-current</span>=<span class="pl-s">"page"</span>&gt;Home&lt;/<span class="pl-ent">div</span>&gt;
247 |     &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav-item"</span>&gt;&lt;<span class="pl-ent">a</span> <span class="pl-e">href</span>=<span class="pl-s">"https://google.com"</span> <span class="pl-e">target</span>=<span class="pl-s">"_blank"</span>&gt;Google&lt;/<span class="pl-ent">a</span>&gt;&lt;/<span class="pl-ent">div</span>&gt;
248 |     &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav-item"</span>&gt;&lt;<span class="pl-ent">a</span> <span class="pl-e">href</span>=<span class="pl-s">"https://github.com"</span> <span class="pl-e">target</span>=<span class="pl-s">"_blank"</span>&gt;GitHub&lt;/<span class="pl-ent">a</span>&gt;&lt;/<span class="pl-ent">div</span>&gt;
249 | &lt;/<span class="pl-ent">div</span>&gt;</pre></div>
250 | 
251 | <div class="nav nav-right">
252 |     <div class="nav-item active" aria-current="page">Home</div>
253 |     <div class="nav-item"><a href="https://google.com" target="_blank">Google</a></div>
254 |     <div class="nav-item"><a href="https://github.com" target="_blank">GitHub</a></div>
255 | </div>
256 | 
257 | 
258 | <div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav nav-right"</span>&gt;
259 |     &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav-item</span> <span class="pl-e">active"</span> <span class="pl-e">aria-current</span>=<span class="pl-s">"page"</span>&gt;Home&lt;/<span class="pl-ent">div</span>&gt;
260 |     &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav-item"</span>&gt;&lt;<span class="pl-ent">a</span> <span class="pl-e">href</span>=<span class="pl-s">"https://google.com"</span> <span class="pl-e">target</span>=<span class="pl-s">"_blank"</span>&gt;Google&lt;/<span class="pl-ent">a</span>&gt;&lt;/<span class="pl-ent">div</span>&gt;
261 |     &lt;<span class="pl-ent">div</span> <span class="pl-e">class</span>=<span class="pl-s">"nav-item"</span>&gt;&lt;<span class="pl-ent">a</span> <span class="pl-e">href</span>=<span class="pl-s">"https://github.com"</span> <span class="pl-e">target</span>=<span class="pl-s">"_blank"</span>&gt;GitHub&lt;/<span class="pl-ent">a</span>&gt;&lt;/<span class="pl-ent">div</span>&gt;
262 | &lt;/<span class="pl-ent">div</span>&gt;</pre></div>
263 | 
264 | 
265 | </div>
266 | 
267 | <style>
268 | 
269 | </style>
270 | 


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