├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── brevis.css ├── brevis.min.css └── docs ├── apple-touch-icon.png ├── css ├── brevis.min.css └── custom.css ├── documentation.html ├── examples.html ├── examples ├── hello_button │ └── index.html ├── holy_grail │ └── index.html ├── landing │ └── index.html ├── login │ └── index.html └── starter │ └── index.html ├── faq.html ├── favicon.ico ├── favicon.png ├── img ├── analytics.svg ├── facebook.svg ├── github.svg ├── holygrail.png ├── landing.png ├── login.png ├── logo-brevis-white.svg ├── logo-brevis.svg ├── starter.png └── twitter.svg ├── index.html └── js └── prism.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.gitignore.io/api/macos,sublimetext 2 | 3 | ### SublimeText ### 4 | # cache files for sublime text 5 | *.tmlanguage.cache 6 | *.tmPreferences.cache 7 | *.stTheme.cache 8 | 9 | # workspace files are user-specific 10 | *.sublime-workspace 11 | 12 | # project files 13 | *.sublime-project 14 | 15 | # Package control specific files 16 | Package Control.last-run 17 | Package Control.ca-list 18 | Package Control.ca-bundle 19 | Package Control.system-ca-bundle 20 | Package Control.cache/ 21 | Package Control.ca-certs/ 22 | Package Control.merged-ca-bundle 23 | Package Control.user-ca-bundle 24 | oscrypto-ca-bundle.crt 25 | bh_unicode_properties.cache 26 | 27 | # Sublime-github package stores a github token in this file 28 | # https://packagecontrol.io/packages/sublime-github 29 | GitHub.sublime-settings 30 | 31 | ### macOS ### 32 | *.DS_Store 33 | .AppleDouble 34 | .LSOverride 35 | 36 | # Icon must end with two \r 37 | Icon 38 | 39 | # Thumbnails 40 | ._* 41 | 42 | # Files that might appear in the root of a volume 43 | .DocumentRevisions-V100 44 | .fseventsd 45 | .Spotlight-V100 46 | .TemporaryItems 47 | .Trashes 48 | .VolumeIcon.icns 49 | .com.apple.timemachine.donotpresent 50 | 51 | # Directories potentially created on remote AFP share 52 | .AppleDB 53 | .AppleDesktop 54 | Network Trash Folder 55 | Temporary Items 56 | .apdisk 57 | 58 | ### Windows ### 59 | # Windows thumbnail cache files 60 | Thumbs.db 61 | Thumbs.db:encryptable 62 | ehthumbs.db 63 | ehthumbs_vista.db 64 | 65 | # Dump file 66 | *.stackdump 67 | 68 | # Folder config file 69 | [Dd]esktop.ini 70 | 71 | # Recycle Bin used on file shares 72 | $RECYCLE.BIN/ 73 | 74 | # Windows Installer files 75 | *.cab 76 | *.msi 77 | *.msix 78 | *.msm 79 | *.msp 80 | 81 | # Windows shortcuts 82 | *.lnk 83 | 84 | ### Linux ### 85 | *~ 86 | 87 | # temporary files which can be created if a process still has a handle open of a deleted file 88 | .fuse_hidden* 89 | 90 | # KDE directory preferences 91 | .directory 92 | 93 | # Linux trash folder which might appear on any partition or disk 94 | .Trash-* 95 | 96 | # .nfs files are created when an open file is removed but is still being accessed 97 | .nfs* 98 | 99 | ### Misc ### 100 | TODO.txt 101 | 102 | # Cudatext 103 | *.cuda-proj 104 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Brevis 2 | 3 | We'd love to accept your patches and contributions to this project. There are just a few small guidelines you need to follow. 4 | 5 | * First off, please be nice and follow the [Code of Conduct](CODE_OF_CONDUCT.md). 6 | 7 | * If you’re new to Brevis, be sure to read our [documentation](https://getbrevis.com) to get a real understanding what is Brevis and its design principles. 8 | 9 | ## Issue Tracker 10 | 11 | The issue tracker is the **only** channel for bug reports and features requests, so please respect the following: 12 | 13 | * **Do not** use the issue tracker for personal support requests. 14 | 15 | * **Do not** derail or troll issues. Remember to follow the [Code of Conduct](CODE_OF_CONDUCT.md). 16 | 17 | * Please close your own issue once it is resolved. 18 | 19 | * Please do search for duplicate or closed issues, before you open a new issue. Duplicate issues will be closed. 20 | 21 | ## Bug reports 22 | 23 | Guidelines for bug reports: 24 | 25 | 1. **Use the GitHub issue search** – check if the issue has already been reported. 26 | 27 | 2. **Check if the issue has been fixed** – try to reproduce it using the latest `master` branch in the repository. 28 | 29 | 3. **Isolate the problem** – create a live example (e.g., on [Codepen](http://codepen.io)). 30 | 31 | A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS 32 | experience the problem? What would you expect to be the outcome? All these details will help people to fix any potential bugs. 33 | 34 | Example: 35 | 36 | > Short and descriptive example bug report title 37 | > 38 | > A summary of the issue and the browser/OS environment in which it occurs. If 39 | > suitable, include the steps required to reproduce the bug. 40 | > 41 | > 1. This is the first step 42 | > 2. This is the second step 43 | > 3. Further steps, etc. 44 | > 45 | > `` - a link to the reduced test case 46 | > 47 | > Any other information you want to share that is relevant to the issue being 48 | > reported. This might include the lines of code that you have identified as 49 | > causing the bug, and potential solutions (and your opinions on their 50 | > merits). 51 | 52 | 53 | ## Feature Requests 54 | 55 | Brevis conforms to a strict set of design principles. Before proposing changes, consider alternative ways to achieve the intent behind a design. 56 | 57 | If you’d like to propose a change, please look through and reference any existing issues that are related. 58 | Then, open an issue with the *Enhancement* label, links to related issues, and code demonstrating the proposal. 59 | 60 | All code **must** 61 | meet the below style guide to keep consistency. Pull requests that fail to follow it will be rejected. 62 | 63 | ## Style Guide 64 | 65 | ### Formatting 66 | 67 | - Files **must** 68 | use UTF-8 character set encoding without BOM. 69 | - Files **must** 70 | use UNIX line endings (LF: `\n`). 71 | - Files **must** 72 | end with a single empty line (i.e. LF: `\n`). 73 | - Indentation **must** use only tabs. 74 | - Alignment when applicable, **should** use only spaces. 75 | - If using tabs for anything, you **must** 76 | set the tab spacing to 4. 77 | 78 | ### Naming 79 | 80 | - Class selectors **must** 81 | follow the naming convention. However, there's no guarantee that the name will be accepted. We reserve the right to change it as necessary. 82 | 83 | 84 | ## License 85 | 86 | By contributing your code, you agree to license your contribution under the MIT License. 87 | 88 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Daniel Zilli 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Brevis is a powerfull and easy to use CSS toolkit. 3 |

4 | 5 |

CSS toolkit engineered for high performance and scalable web applications.

6 | 7 |
8 | 9 | ## Special Features 10 | 11 | * Not a single `!important` rule :tada: 12 | * Selector-First responsive design 13 | * Logical and super easy naming convention 14 | * FDFD (fast development faster deployment) 15 | 16 | ## More Features 17 | 18 | #### Utility-first 19 | 20 | Immutable classes behave exactly as expected. A class does one thing only and does it well. 21 | 22 | #### Lightweight 23 | 24 | Brevis is super fast, lean and play well with other technologies. 25 | 26 | #### Low Specificity 27 | 28 | Only the selectors with `:hover` pseudo-class have specificity of 20. All the other selectors have a specificity of 10. 29 | 30 | #### Consistency 31 | 32 | Consistency is in the heart of Brevis. Once you learn how it works, you'll see patterns everywhere. 33 | 34 | #### Neutral 35 | 36 | There's no default style to dictate how things should look like. That's entirely up to you. 37 | 38 | #### Cohesive Scale Pattern 39 | 40 | Brevis uses the 8-point scale pattern to ensure a consistent design. 41 | 42 | #### Zero Dependency 43 | 44 | * NO libraries 45 | * NO preprocessors 46 | * NO javascript 47 | * NO npm 48 | * NO grunt 49 | * NO yarn 50 | * NO bower 51 | * NO travis 52 | * NO cdn 53 | 54 | Just a single file. 55 | 56 | ## Documentation 57 | The documentation resides in the docs folder, and it reflects the master branch. You can browse the online documentation and FAQ section at [https://dlzi.github.io/brevis/](https://dlzi.github.io/brevis/documentation.html). 58 | 59 | ## Contributing 60 | 61 | Please read our [guidelines](CONTRIBUTING.md) for contributors. 62 | 63 | ## Help 64 | 65 | If you have a question or need help, feel free to [open an issue](https://github.com/dlzi/brevis/issues/new). 66 | 67 | ## Related Projects 68 | 69 | | Project | Description | 70 | |-----------|---------| 71 | |[Brevis Autocomplete](https://github.com/dlzi/brevis-autocomplete) | Sublime Text 3 autocomplete plugin for Brevis CSS toolkit. | 72 | 73 | 74 | ## Copyright and license 75 | 76 | ©2020 Daniel Zilli - code licensed [MIT](LICENSE), docs [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/). 77 | -------------------------------------------------------------------------------- /docs/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlzi/brevis/99317ffd5a7b9c70ffc343b10d0577da3248d425/docs/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/css/custom.css: -------------------------------------------------------------------------------- 1 | td:first-child { font-weight: 700 } 2 | td > a { text-decoration: none } 3 | th, td { 4 | padding: 8px 16px; 5 | border: 1px solid #dddddd; 6 | } 7 | h3 + p { margin: 0 } 8 | 9 | 10 | /* 11 | * PLUGINS 12 | */ 13 | 14 | /* prismjs */ 15 | code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:consolas,monaco,andale mono,ubuntu mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#905}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#9a6e3a;background:#ffffff80}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function,.token.class-name{color:#dd4a68}.token.regex,.token.important,.token.variable{color:#e90}.token.important,.token.bold{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} 16 | -------------------------------------------------------------------------------- /docs/documentation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Documentation | Brevis specification document 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 33 |
34 |
35 | 36 |
37 | 38 |

Documentation

39 | 40 |

This page lists all the classes and their modifiers used in Brevis. There are also information about the naming convention, scale pattern and colour palette.

41 | 42 | 43 |
44 | Class Reference 45 | 46 | Naming Convention 47 | 48 | Scale Pattern 49 | 50 | Colour Palette 51 |
52 | 53 | 54 |

Class Reference

55 | 56 |
57 | 58 | 59 | 60 | 61 | 64 | 65 | 66 | 67 | 75 | 76 | 77 | 78 | 82 | 83 | 84 | 85 | 90 | 91 | 92 | 93 | 98 | 99 | 100 | 101 | 110 | 111 | 112 | 113 | 119 | 120 | 121 | 122 | 125 | 126 | 127 | 128 | 133 | 134 | 135 | 136 | 145 | 146 | 147 | 148 | 151 | 152 | 153 | 154 | 161 | 162 | 163 | 164 | 167 | 168 | 169 | 170 | 177 | 178 | 179 | 180 | 183 | 184 | 185 | 186 | 193 | 194 | 195 | 196 | 201 | 202 | 203 | 204 | 209 | 210 | 211 | 212 | 216 | 217 | 218 | 219 | 222 | 223 | 224 | 225 | 230 | 231 | 232 | 233 | 236 | 237 | 238 | 239 | 246 | 247 | 248 | 249 | 259 | 260 | 261 | 262 | 268 | 269 | 270 | 271 | 274 | 275 | 276 |
Box-sizing 62 | box-sizing 63 |
Position 68 | display, 69 | position, 70 | top, 71 | right, 72 | bottom, 73 | left 74 |
Float 79 | float, 80 | clear 81 |
Justify-content 86 | justify-content, 87 | justify-items, 88 | justify-self 89 |
Align-content 94 | align-content, 95 | align-items, 96 | align-self 97 |
Flex 102 | flex, 103 | flex-basis, 104 | flex-direction, 105 | flex-flow, 106 | flex-grow, 107 | flex-shrink, 108 | flex-wrap 109 |
Transitions 114 | transition-property, 115 | transition-duration, 116 | transition-timing-function, 117 | transition-delay 118 |
Order 123 | order 124 |
Visibility 129 | visibility, 130 | opacity, 131 | z-index 132 |
Margin 137 | margin, 138 | margin-top, 139 | margin-right, 140 | margin-bottom, 141 | margin-left, 142 | margin-y, 143 | margin-x 144 |
Outline 149 | outline 150 |
Border 155 | border, 156 | border-width, 157 | border-style, 158 | border-radius, 159 | border-color 160 |
Box-shadow 165 | box-shadow 166 |
Background 171 | background-color, 172 | background-color:hover, 173 | background-position, 174 | background-repeat, 175 | background-size 176 |
Cursor 181 | cursor 182 |
Padding 187 | padding, 188 | padding-top, 189 | padding-right, 190 | padding-bottom, 191 | padding-left 192 |
Width 197 | width, 198 | min-width, 199 | max-width 200 |
Height 205 | height, 206 | min-height, 207 | max-height 208 |
Overflow 213 | overflow, 214 | resize 215 |
List-style 220 | list-style 221 |
Table 226 | table-layout, 227 | border-collapse, 228 | border-spacing 229 |
Vertical-algin 234 | vertical-align 235 |
Text-alignment & Decoration 240 | direction, 241 | text-align, 242 | text-indent, 243 | text-transform, 244 | text-decoration 245 |
Text-spacing & Color 250 | line height, 251 | word-spacing, 252 | letter-spacing, 253 | white-space, 254 | word-break, 255 | word-wrap, 256 | color, 257 | color:hover 258 |
Font 263 | font-family, 264 | font-size, 265 | font-weight, 266 | font-style 267 |
Pointer-events 272 | pointer-events 273 |
277 |
278 | 279 | 280 | 281 |

BOX-SIZING

282 |

BOX-SIZING

283 |
SYNTAX
284 | 
# Base
 285 | 	bxs = box-sizing
 286 | 
 287 | # Modifiers
 288 | 	--brbx = border-box
 289 | 	--ctbx = content-box
 290 | 
 291 | # Note
 292 | 	You don't need to box-sizing everything - https://aastudio.fr/box-sizing.html
 293 | 
 294 | 	When you DON’T need it:
 295 | 		- for element without width or height or min/max-width or min/max-height
 296 | 		- for inline elements
 297 | 	
 298 | 	When you MAY need it:
 299 | 		- when the element is a column’s grid
 300 | 		- when you have width and padding or borders
 301 | 		- when a form field needs a full-width
302 | 303 |
CLASSES
304 | 
.bxs--brbx { box-sizing: border-box }
 305 | .bxs--ctbx { box-sizing: content-box }
306 | 307 |

top↑

308 | 309 |
310 | 311 | 312 |

POSITION

313 | 314 | 315 |

DISPLAY

316 |
SYNTAX
317 | 318 | 
# Base
 319 | 	d = display
 320 | 
 321 | # Modifiers
 322 | 	--blk = block
 323 | 	--fx = flex
 324 | 	--ie = inline
 325 | 	--ieblk = inline-block
 326 | 	--iefx = inline-flex
 327 | 	--ietbl = inline-table
 328 | 	--n = none
 329 | 	--tbl = table
 330 | 	--tblcl = table-cell
 331 | 	--tblrw = table-row
 332 | 	--tblrwgrp = table-row-group
 333 | 	--tblcol = table-column
 334 | 	--tblcolgrp = table-column-group
335 | 336 |
CLASSES
337 | 
.d--blk { display: block }
 338 | .d--fx { display: flex }
 339 | .d--ie { display: inline }
 340 | .d--ieblk { display: inline-block }
 341 | .d--ietbl { display: inline-table }
 342 | .d--iefx { display: inline-flex }
 343 | .d--n { display: none }
 344 | .d--tbl { display: table }
 345 | .d--tblcl { display: table-cell }
 346 | .d--tblrw { display: table-row }
 347 | .d--tblrwgrp { display: table-row-group }
 348 | .d--tblcol { display: table-column }
 349 | .d--tblcolgrp { display: table-column-group }
350 | 351 |

top↑

352 | 353 | 354 |

POSITION

355 | 356 |
SYNTAX
357 | 
# Base
 358 | 	pos = position
 359 | 
 360 | # Modifiers
 361 | 	--sta = static
 362 | 	--rel = relative 
 363 | 	--abs = absolute 
 364 | 	--fix = fixed
365 | 366 |
CLASSES
367 | 
.pos--sta { position: static }
 368 | .pos--rel { position: relative }
 369 | .pos--abs { position: absolute }
 370 | .pos--fix { position: fixed }
371 | 372 |

top↑

373 | 374 | 375 |

TOP

376 | 377 |
SYNTAX
378 | 
# Base
 379 | 	t = top
 380 | 
 381 | # Modifiers
 382 | 	--0 = 0
 383 | 	--1 = 8px
 384 | 	--2 = 16px
 385 | 	--3 = 24px
 386 | 	--4 = 32px
 387 | 	--5 = 40px
 388 | 	--6 = 48px
 389 | 	--7 = 56px
 390 | 	--8 = 64px
 391 | 	--50p = 50%
 392 | 	--100p = 100%
 393 | 	--n1 = -8px
 394 | 	--n2 = -16px
 395 | 	--n3 = -24px
 396 | 	--n4 = -32px
 397 | 	--n5 = -40px
 398 | 	--n6 = -48px
 399 | 	--n7 = -56px
 400 | 	--n8 = -64px
401 | 402 |
CLASSES
403 | 
.t--0 { top: 0 }
 404 | .t--1 { top: 8px }
 405 | .t--2 { top: 16px }
 406 | .t--3 { top: 24px }
 407 | .t--4 { top: 32px }
 408 | .t--5 { top: 40px }
 409 | .t--6 { top: 48px }
 410 | .t--7 { top: 56px }
 411 | .t--8 { top: 64px }
 412 | .t--50p { top: 50% }
 413 | .t--100p { top: 100% }
 414 | .t--n1 { top: -8px }
 415 | .t--n2 { top: -16px }
 416 | .t--n3 { top: -24px }
 417 | .t--n4 { top: -32px }
 418 | .t--n5 { top: -40px }
 419 | .t--n6 { top: -48px }
 420 | .t--n7 { top: -56px }
 421 | .t--n8 { top: -64px }
422 | 423 |

top↑

424 | 425 | 426 | 427 | 428 |
SYNTAX
429 | 
# Base
 430 | 	r = right
 431 | 
 432 | # Modifiers
 433 | 	--0 = 0
 434 | 	--1 = 8px
 435 | 	--2 = 16px
 436 | 	--3 = 24px
 437 | 	--4 = 32px
 438 | 	--5 = 40px
 439 | 	--6 = 48px
 440 | 	--7 = 56px
 441 | 	--8 = 64px
 442 | 	--50p = 50%
 443 | 	--100p = 100%
 444 | 	--n1 = -8px
 445 | 	--n2 = -16px
 446 | 	--n3 = -24px
 447 | 	--n4 = -32px
 448 | 	--n5 = -40px
 449 | 	--n6 = -48px
 450 | 	--n7 = -56px
 451 | 	--n8 = -64px
452 | 453 |
CLASSES
454 | 
.r--0 { right: 0 }
 455 | .r--1 { right: 8px }
 456 | .r--2 { right: 16px }
 457 | .r--3 { right: 24px }
 458 | .r--4 { right: 32px }
 459 | .r--5 { right: 40px }
 460 | .r--6 { right: 48px }
 461 | .r--7 { right: 56px }
 462 | .r--8 { right: 64px }
 463 | .r--50p { right: 50% }
 464 | .r--100p { right: 100% }
 465 | .r--n1 { right: -8px }
 466 | .r--n2 { right: -16px }
 467 | .r--n3 { right: -24px }
 468 | .r--n4 { right: -32px }
 469 | .r--n5 { right: -40px }
 470 | .r--n6 { right: -48px }
 471 | .r--n7 { right: -56px }
 472 | .r--n8 { right: -64px }
473 | 474 |

top↑

475 | 476 | 477 |

BOTTOM

478 | 479 |
SYNTAX
480 | 
# Base
 481 | 	b = bottom
 482 | 
 483 | # Modifiers
 484 | 	--0 = 0
 485 | 	--1 = 8px
 486 | 	--2 = 16px
 487 | 	--3 = 24px
 488 | 	--4 = 32px
 489 | 	--5 = 40px
 490 | 	--6 = 48px
 491 | 	--7 = 56px
 492 | 	--8 = 64px
 493 | 	--50p = 50%
 494 | 	--100p = 100%
 495 | 	--n1 = -8px
 496 | 	--n2 = -16px
 497 | 	--n3 = -24px
 498 | 	--n4 = -32px
 499 | 	--n5 = -40px
 500 | 	--n6 = -48px
 501 | 	--n7 = -56px
 502 | 	--n8 = -64px
503 | 504 |
CLASSES
505 | 
.b--0 { bottom: 0 }
 506 | .b--1 { bottom: 8px }
 507 | .b--2 { bottom: 16px }
 508 | .b--3 { bottom: 24px }
 509 | .b--4 { bottom: 32px }
 510 | .b--5 { bottom: 40px }
 511 | .b--6 { bottom: 48px }
 512 | .b--7 { bottom: 56px }
 513 | .b--8 { bottom: 64px }
 514 | .b--50p { bottom: 50% }
 515 | .b--100p { bottom: 100% }
 516 | .b--n1 { bottom: -8px }
 517 | .b--n2 { bottom: -16px }
 518 | .b--n3 { bottom: -24px }
 519 | .b--n4 { bottom: -32px }
 520 | .b--n5 { bottom: -40px }
 521 | .b--n6 { bottom: -48px }
 522 | .b--n7 { bottom: -56px }
 523 | .b--n8 { bottom: -64px }
524 | 525 |

top↑

526 | 527 | 528 |

LEFT

529 | 530 |
SYNTAX
531 | 
# Base
 532 | 	l = left
 533 | 
 534 | # Modifiers
 535 | 	--0 = 0
 536 | 	--1 = 8px
 537 | 	--2 = 16px
 538 | 	--3 = 24px
 539 | 	--4 = 32px
 540 | 	--5 = 40px
 541 | 	--6 = 48px
 542 | 	--7 = 56px
 543 | 	--8 = 64px
 544 | 	--50p = 50%
 545 | 	--100p = 100%
 546 | 	--n1 = -8px
 547 | 	--n2 = -16px
 548 | 	--n3 = -24px
 549 | 	--n4 = -32px
 550 | 	--n5 = -40px
 551 | 	--n6 = -48px
 552 | 	--n7 = -56px
 553 | 	--n8 = -64px
554 | 555 |
CLASSES
556 | 
.l--0 { left: 0 }
 557 | .l--1 { left: 8px }
 558 | .l--2 { left: 16px }
 559 | .l--3 { left: 24px }
 560 | .l--4 { left: 32px }
 561 | .l--5 { left: 40px }
 562 | .l--6 { left: 48px }
 563 | .l--7 { left: 56px }
 564 | .l--8 { left: 64px }
 565 | .l--50p { left: 50% }
 566 | .l--100p { left: 100% }
 567 | .l--n1 { left: -8px }
 568 | .l--n2 { left: -16px }
 569 | .l--n3 { left: -24px }
 570 | .l--n4 { left: -32px }
 571 | .l--n5 { left: -40px }
 572 | .l--n6 { left: -48px }
 573 | .l--n7 { left: -56px }
 574 | .l--n8 { left: -64px }
575 | 576 |

top↑

577 | 578 |
579 | 580 | 581 |

FLOAT

582 | 583 | 584 |

FLOAT

585 |
SYNTAX
586 | 
# Base
 587 | 	f = float
 588 | 
 589 | # Modifiers
 590 | 	--r = right
 591 | 	--l = left
 592 | 	--n = none
593 | 594 |
CLASSES
595 | 
.f--r { float: right }
 596 | .f--l { float: left }
 597 | .f--n { float: none }
598 | 599 |

top↑

600 | 601 | 602 |

CLEAR

603 | 604 |
SYNTAX
605 | 
# Base
 606 | 	clr = clear
 607 | 
 608 | # Modifiers
 609 | 	--r = right
 610 | 	--l = left
 611 | 	--bh = both
 612 | 	--n = none
613 | 614 |
CLASSES
615 | 
.clr--r { clear: right }
 616 | .clr--l { clear: left }
 617 | .clr--bh { clear: both }
 618 | .clr--n { clear: none }
619 | 620 |

top↑

621 | 622 |
623 | 624 | 625 |

JUSTIFY-CONTENT

626 | 627 | 628 |

JUSTIFY-CONTENT

629 | 630 |
SYNTAX
631 | 
# Base
 632 | 	jct = justify-content
 633 | 
 634 | # Modifiers
 635 | 	--ctr = center
 636 | 	--fxe = flex-end
 637 | 	--fxst = flex-start
 638 | 	--spard = space-around
 639 | 	--spbtw = space-between
640 | 641 |
CLASSES
642 | 
.jct--ctr { justify-content: center }
 643 | .jct--fxe { justify-content: flex-end }
 644 | .jct--fxst { justify-content: flex-start }
 645 | .jct--spard { justify-content: space-around }
 646 | .jct--spbtw { justify-content: space-between }
647 | 648 |

top↑

649 | 650 | 651 |

JUSTIFY-ITEMS

652 | 653 |
SYNTAX
654 | 
# Base
 655 | 	jis = justify-items
 656 | 
 657 | # Modifiers
 658 | 	--ctr = center
 659 | 	--fxe = flex-end
 660 | 	--fxst = flex-start
 661 | 	--sfst = self-start
 662 | 	--sfe = self-end
 663 | 	--str = stretch
664 | 665 |
CLASSES
666 | 
.jis--ctr { justify-items: center }
 667 | .jis--fxe { justify-items: flex-end }
 668 | .jis--fxst { justify-items: flex-start }
 669 | .jis--sfst { justify-items: self-start }
 670 | .jis--sfe { justify-items: self-end }
 671 | .jis--str { justify-items: stretch }
672 | 673 | 674 |

top↑

675 | 676 | 677 |

JUSTIFY-SELF

678 | 679 |
SYNTAX
680 | 
# Base
 681 | 	jsf = justify-self
 682 | 
 683 | # Modifiers
 684 | 	--ctr = center
 685 | 	--fxe = flex-end
 686 | 	--fxst = flex-start
 687 | 	--sfst = self-start
 688 | 	--sfe = self-end
689 | 690 |
CLASSES
691 | 
.jsf--ctr { justify-self: center }
 692 | .jsf--fxe { justify-self: flex-end }
 693 | .jsf--fxst { justify-self: flex-start }
 694 | .jsf--sfst { justify-self: self-start }
 695 | .jsf--sfe { justify-self: self-end }
696 | 697 |

top↑

698 | 699 |
700 | 701 | 702 |

ALIGN-CONTENT

703 | 704 |

ALIGN-CONTENT

705 |
SYNTAX
706 | 
# Base
 707 | 	anct = align-content
 708 | 
 709 | # Modifiers
 710 | 	--ctr = center
 711 | 	--fxe = flex-end
 712 | 	--fxst = flex-start
 713 | 	--spard = space-around
 714 | 	--spbtw = space-between
715 | 716 |
CLASSES
717 | 
.anct--ctr { align-content: center }
 718 | .anct--fxe { align-content: flex-end }
 719 | .anct--fxst { align-content: flex-start }
 720 | .anct--spard { align-content: space-around }
 721 | .anct--spbtw { align-content: space-between }
722 | 723 |

top↑

724 | 725 | 726 | 727 |

ALIGN-ITEMS

728 | 729 |
SYNTAX
730 | 
# Base
 731 | 	anis = align-items
 732 | 
 733 | # Modifiers
 734 | 	--bln = baseline
 735 | 	--ctr = center
 736 | 	--fxe = flex-end
 737 | 	--fxst = flex-start
 738 | 	--str = stretch
739 | 740 |
CLASSES
741 | 
.anis--bln { align-items: baseline }
 742 | .anis--ctr { align-items: center }
 743 | .anis--fxe { align-items: flex-end }
 744 | .anis--fxst { align-items: flex-start }
 745 | .anis--str { align-items: stretch }
746 | 747 |

top↑

748 | 749 | 750 |

ALIGN-SELF

751 | 752 |
SYNTAX
753 | 
# Base
 754 | 	ansf = align-self
 755 | 
 756 | # Modifiers
 757 | 	--a = auto
 758 | 	--ctr = center
 759 | 	--fxe = flex-end
 760 | 	--fxst = flex-start
 761 | 	--str = stretch
762 | 763 |
CLASSES
764 | 
.ansf--a { align-self: auto }
 765 | .ansf--ctr { align-self: center }
 766 | .ansf--fxe { align-self: flex-end }
 767 | .ansf--fxst { align-self: flex-start }
 768 | .ansf--str { align-self: stretch }
769 | 770 |

top↑

771 | 772 |
773 | 774 | 775 |

FLEX

776 | 777 | 778 |

FLEX

779 | 780 |
SYNTAX
781 | 
# Base
 782 | 	fx = flex
 783 | 
 784 | # Modifiers
 785 | 	--1 = 1 | this is equivalent to setting "flex: 1 1 0%"
 786 | 	--a = auto | this is equivalent to setting "flex: 1 1 auto"
 787 | 	--ini = initial | this is equivalent to setting "flex: 0 1 auto"
 788 | 	--n = none | this is equivalent to setting "flex: 0 0 auto"
 789 | 
 790 | # Note
 791 | 	See why 0% at https://github.com/philipwalton/flexbugs#flexbug-4
792 | 793 |
CLASSES
794 | 
.fx--1 { flex: 1 1 0% }
 795 | .fx--a { flex: 1 1 auto }
 796 | .fx--ini { flex: 0 1 auto }
 797 | .fx--n { flex: 0 0 auto }
798 | 799 |

top↑

800 | 801 | 802 |

FLEX BASIS

803 | 804 |
SYNTAX
805 | 
# Base
 806 | 	fxbs = flex-basis
 807 | 
 808 | # Modifiers
 809 | 	--0 = 0%
 810 | 	--1 = 1px
 811 | 	--2 = 8px
 812 | 	--3 = 16px
 813 | 	--4 = 32px
 814 | 	--5 = 64px
 815 | 	--6 = 128px
 816 | 	--7 = 256px
 817 | 	--8 = 512px
 818 | 	--10p = 10%
 819 | 	--20p = 20%
 820 | 	--25p = 25%
 821 | 	--30p = 30%
 822 | 	--33p = 33.33333%
 823 | 	--40p = 40%
 824 | 	--50p = 50%
 825 | 	--60p = 60%
 826 | 	--66p = 66.66667%
 827 | 	--70p = 70%
 828 | 	--75p = 75%
 829 | 	--80p = 80%
 830 | 	--90p = 90%
 831 | 	--100p = 100%
 832 | 	--a = auto
 833 | 
 834 | # Note
 835 | 	See why "0%" at https://github.com/philipwalton/flexbugs#flexbug-4
836 | 837 |
CLASSES
838 | 
.fxbs--0 { flex-basis: 0% }
 839 | .fxbs--1 { flex-basis: 1px }
 840 | .fxbs--2 { flex-basis: 8px }
 841 | .fxbs--3 { flex-basis: 16px }
 842 | .fxbs--4 { flex-basis: 32px }
 843 | .fxbs--5 { flex-basis: 64px }
 844 | .fxbs--6 { flex-basis: 128px }
 845 | .fxbs--7 { flex-basis: 256px }
 846 | .fxbs--8 { flex-basis: 512px }
 847 | .fxbs--10p { flex-basis: 10% }
 848 | .fxbs--20p { flex-basis: 20% }
 849 | .fxbs--25p { flex-basis: 25% }
 850 | .fxbs--30p { flex-basis: 30% }
 851 | .fxbs--33p { flex-basis: 33.33333% }
 852 | .fxbs--40p { flex-basis: 40% }
 853 | .fxbs--50p { flex-basis: 50% }
 854 | .fxbs--60p { flex-basis: 60% }
 855 | .fxbs--66p { flex-basis: 66.66667% }
 856 | .fxbs--70p { flex-basis: 70% }
 857 | .fxbs--75p { flex-basis: 75% }
 858 | .fxbs--80p { flex-basis: 80% }
 859 | .fxbs--90p { flex-basis: 90% }
 860 | .fxbs--100p { flex-basis: 100% }
 861 | .fxbs--a { flex-basis: auto }
862 | 863 |

top↑

864 | 865 | 866 |

FLEX-DIRECTION

867 | 868 |
SYNTAX
869 | 
# Base
 870 | 	fxdn = flex-direction
 871 | 
 872 | # Modifiers
 873 | 	--rw = row
 874 | 	--rwrvs = row-reverse
 875 | 	--col = column
 876 | 	--colrvs = column-reverse
877 | 878 |
CLASSES
879 | 
.fxdn--rw { flex-direction: row }
 880 | .fxdn--rwrvs { flex-direction: row-reverse }
 881 | .fxdn--col { flex-direction: column }
 882 | .fxdn--colrvs { flex-direction: column-reverse }
883 | 884 |

top↑

885 | 886 | 887 |

FLEX-FLOW

888 | 889 |
SYNTAX
890 | 
# Base
 891 | 	fxfw = flex-flow (shorthand for flex-direction and flex-wrap properties)
 892 | 
 893 | # Modifiers
 894 | 	--rwwp = row wrap
 895 | 	--rwrvsn = row-reverse nowrap
 896 | 	--colwprvs = column wrap-reverse
 897 | 	--colwp = column wrap
898 | 899 |
CLASSES
900 | 
.fxfw--rwwp { flex-flow: row wrap }
 901 | .fxfw--rwrvsn { flex-flow: row-reverse nowrap }
 902 | .fxfw--colwprvs { flex-flow: column wrap-reverse }
 903 | .fxfw--colwp { flex-flow: column wrap }
904 | 905 |

top↑

906 | 907 | 908 |

FLEX-GROW

909 | 910 |
SYNTAX
911 | 
# Base
 912 | 	fxgw = flex-grow
 913 | 
 914 | # Modifiers
 915 | 	--0 = no grow
 916 | 	--1 = grow
917 | 918 |
CLASSES
919 | 
.fxgw--0 { flex-grow: 0 }
 920 | .fxgw--1 { flex-grow: 1 }
921 | 922 |

top↑

923 | 924 | 925 |

FLEX-SHRINK

926 | 927 |
SYNTAX
928 | 
# Base
 929 | 	fxsk = flex-shrink
 930 | 
 931 | # Modifiers
 932 | 	--0 = no shrink
 933 | 	--1 = shrink
934 | 935 |
CLASSES
936 | 
.fxsk--0 { flex-shrink: 0 }
 937 | .fxsk--1 { flex-shrink: 1 }
938 | 939 | 940 |

top↑

941 |

FLEX-WRAP

942 |
SYNTAX
943 | 
# Base
 944 | 	fxwp = flex-wrap
 945 | 
 946 | # Modifiers
 947 | 	--n = nowrap
 948 | 	--wp = wrap
 949 | 	--wprvs = wrap-reverse
950 | 951 |
CLASSES
952 | 
.fxwp--n { flex-wrap: nowrap }
 953 | .fxwp--wp { flex-wrap: wrap }
 954 | .fxwp--wprvs { flex-wrap: wrap-reverse }
955 | 956 |

top↑

957 | 958 |
959 | 960 |

TRANSITIONS

961 | 962 |

TRANSITION-PROPERTY

963 |
SYNTAX
964 | 
# Base
 965 | 	tnprop = transition-property
 966 | 
 967 | # Modifiers
 968 | 	--o = opacity
 969 | 	--mr = margin-right
 970 | 	--ml = margin-left
 971 | 	--bgc = background-color
 972 | 	--w = width
 973 | 	--h = height
 974 | 	--c = color
 975 | 
 976 | # Note
 977 | 	Just some common CSS animated properties here.
978 | 979 |
CLASSES
980 | 
.tnprop--o { transition-property: opacity }
 981 | .tnprop--mr { transition-property: margin-right }
 982 | .tnprop--ml { transition-property: margin-left }
 983 | .tnprop--bgc { transition-property: background-color }
 984 | .tnprop--w { transition-property: width }
 985 | .tnprop--h { transition-property: height }
 986 | .tnprop--c { transition-property: color }
987 | 988 |

top↑

989 | 990 | 991 |

TRANSITION-DURATION

992 |
SYNTAX
993 | 
# Base
 994 | 	tndu = transition-duration
 995 | 
 996 | # Modifiers
 997 | 	--0 = time value of 0s
 998 | 	--1 = time value of 100ms 
 999 | 	--2 = time value of 200ms 
1000 | 	--3 = time value of 400ms 
1001 | 	--4 = time value of 800ms 
1002 | 	--5 = time value of 1200ms
1003 | 	--6 = time value of 1600ms
1004 | 	--7 = time value of 2000ms
1005 | 	--8	= time value of 2400ms
1006 | 1007 |
CLASSES
1008 | 
.tndu--0 { transition-duration: 0s }
1009 | .tndu--1 { transition-duration: 100ms }
1010 | .tndu--2 { transition-duration: 200ms }
1011 | .tndu--3 { transition-duration: 400ms }
1012 | .tndu--4 { transition-duration: 800ms }
1013 | .tndu--5 { transition-duration: 1200ms }
1014 | .tndu--6 { transition-duration: 1600ms }
1015 | .tndu--7 { transition-duration: 2000ms }
1016 | .tndu--8 { transition-duration: 2400ms }
1017 | 1018 |

top↑

1019 | 1020 | 1021 |

TRANSITION-TIMING-FUNCTION

1022 |
SYNTAX
1023 | 
# Base
1024 | 	tntgfn = transition-timing-function
1025 | 
1026 | # Modifiers
1027 | 	--e = ease
1028 | 	--ein = ease-in
1029 | 	--eot = ease-out
1030 | 	--einot = ease-in-out
1031 | 	--lnr = linear
1032 | 1033 |
CLASSES
1034 | 
.tntgfn--e { transition-timing-function: ease }
1035 | .tntgfn--ein { transition-timing-function: ease-in }
1036 | .tntgfn--eot { transition-timing-function: ease-out }
1037 | .tntgfn--einot { transition-timing-function: ease-in-out }
1038 | .tntgfn--lnr { transition-timing-function: linear }
1039 | 1040 |

top↑

1041 | 1042 | 1043 | 1044 |

TRANSITION-DELAY

1045 |
SYNTAX
1046 | 
# Base
1047 | 	tndy = transition-delay
1048 | 
1049 | # Modifiers
1050 | 	--0 = time value of 0s
1051 | 	--1 = time value of 100ms 
1052 | 	--2 = time value of 200ms 
1053 | 	--3 = time value of 400ms 
1054 | 	--4 = time value of 800ms 
1055 | 	--5 = time value of 1200ms
1056 | 	--6 = time value of 1600ms
1057 | 	--7 = time value of 2000ms
1058 | 	--8	= time value of 2400ms
1059 | 1060 |
CLASSES
1061 | 
.tndy--0 { transition-delay: 0s }
1062 | .tndy--1 { transition-delay: 100ms }
1063 | .tndy--2 { transition-delay: 200ms }
1064 | .tndy--3 { transition-delay: 400ms }
1065 | .tndy--4 { transition-delay: 800ms }
1066 | .tndy--5 { transition-delay: 1200ms }
1067 | .tndy--6 { transition-delay: 1600ms }
1068 | .tndy--7 { transition-delay: 2000ms }
1069 | .tndy--8 { transition-delay: 2400ms }
1070 | 1071 |

top↑

1072 | 1073 | 1074 | 1075 |
1076 | 1077 |

ORDER

1078 | 1079 |

ORDER

1080 |
SYNTAX
1081 | 1082 | 
# Base
1083 | 	or = order
1084 | 
1085 | # Modifiers
1086 | 	--0 = ordinal value of 0
1087 | 	--1 = ordinal value of 1
1088 | 	--2 = ordinal value of 2
1089 | 	--3 = ordinal value of 3
1090 | 	--4 = ordinal value of 4
1091 | 	--5 = ordinal value of 5
1092 | 	--6 = ordinal value of 6
1093 | 	--7 = ordinal value of 7
1094 | 	--8	= ordinal value of 8
1095 | 
1096 | # Note
1097 | 	https://developer.mozilla.org/en-US/docs/Web/CSS/order#Accessibility_concerns
1098 | 1099 |
CLASSES
1100 | 
.or--0 { order: 0 }
1101 | .or--1 { order: 1 }
1102 | .or--2 { order: 2 }
1103 | .or--3 { order: 3 }
1104 | .or--4 { order: 4 }
1105 | .or--5 { order: 5 }
1106 | .or--6 { order: 6 }
1107 | .or--7 { order: 7 }
1108 | .or--8 { order: 8 }
1109 | 1110 |

top↑

1111 | 1112 |
1113 | 1114 | 1115 |

VISIBILITY

1116 | 1117 |

VISIBILITY

1118 |
SYNTAX
1119 | 1120 | 
# Base
1121 | 	v = visibility
1122 | 
1123 | # Modifiers
1124 | 
1125 | 	--hid = hidden
1126 | 	--v = visible
1127 | 	--i = inherit
1128 | 1129 |
CLASSES
1130 | 
.v--hid { visibility: hidden }
1131 | .v--v { visibility: visible }
1132 | .v--i { visibility: inherit }
1133 | 1134 | 1135 |

top↑

1136 | 1137 | 1138 |

OPACITY

1139 | 1140 |
SYNTAX
1141 | 
# Base
1142 | 	o = opacity
1143 | 
1144 | # Modifiers
1145 | 
1146 | 	--0 = cardinal value of 0
1147 | 	--1 = cardinal value of .1
1148 | 	--2 = cardinal value of .2
1149 | 	--3 = cardinal value of .3
1150 | 	--4 = cardinal value of .5
1151 | 	--5 = cardinal value of .7
1152 | 	--6 = cardinal value of .8
1153 | 	--7 = cardinal value of .9
1154 | 	--8	= cardinal value of 1
1155 | 1156 |
CLASSES
1157 | 
.o--0 { opacity: 0 }
1158 | .o--1 { opacity: .1 }
1159 | .o--2 { opacity: .2 }
1160 | .o--3 { opacity: .3 }
1161 | .o--4 { opacity: .5 }
1162 | .o--5 { opacity: .7 }
1163 | .o--6 { opacity: .8 }
1164 | .o--7 { opacity: .9 }
1165 | .o--8 { opacity: 1 }
1166 | 1167 |

top↑

1168 | 1169 |

Z-INDEX

1170 |
SYNTAX
1171 | 
# Base
1172 | 	z = z-index
1173 | 
1174 | # Modifiers
1175 | 	--1 = ordinal value of 1
1176 | 	--2 = ordinal value of 2
1177 | 	--3 = ordinal value of 3
1178 | 	--4 = ordinal value of 4
1179 | 	--5 = ordinal value of 5
1180 | 	--6 = ordinal value of 6
1181 | 	--7 = ordinal value of 7
1182 | 	--8 = ordinal value of 8
1183 | 	--a = auto
1184 | 
1185 | # Note
1186 | 	Any element with 'z-index: auto' can be treated as 'z-index: 0'.
1187 | 1188 |

top↑

1189 | 1190 |
CLASSES
1191 | 
.z--1 { z-index: 1 }
1192 | .z--2 { z-index: 2 }
1193 | .z--3 { z-index: 3 }
1194 | .z--4 { z-index: 4 }
1195 | .z--5 { z-index: 5 }
1196 | .z--6 { z-index: 6 }
1197 | .z--7 { z-index: 7 }
1198 | .z--8 { z-index: 8 }
1199 | .z--a { z-index: auto }
1200 | 1201 |

top↑

1202 | 1203 |
1204 | 1205 |

MARGIN

1206 | 1207 |

MARGIN

1208 |
SYNTAX
1209 | 1210 | 
# Base
1211 | 	m = margin (shorthand for all the margin-* properties)
1212 | 
1213 | # Modifiers
1214 | 	--0 = 0
1215 | 	--1 = 1px
1216 | 	--2 = 2px
1217 | 	--3 = 4px
1218 | 	--4 = 8px
1219 | 	--5 = 16px
1220 | 	--6 = 32px
1221 | 	--7 = 64px
1222 | 	--8 = 128px
1223 | 	--n1 = -1px
1224 | 	--n2 = -2px
1225 | 	--n3 = -4px
1226 | 	--n4 = -8px
1227 | 	--n5 = -16px
1228 | 	--n6 = -32px
1229 | 	--n7 = -64px
1230 | 	--n8 = -128px
1231 | 	--a = auto
1232 | 1233 |
CLASSES
1234 | 
.m--0 { margin: 0 }
1235 | .m--1 { margin: 1px }
1236 | .m--2 { margin: 2px }
1237 | .m--3 { margin: 4px }
1238 | .m--4 { margin: 8px }
1239 | .m--5 { margin: 16px }
1240 | .m--6 { margin: 32px }
1241 | .m--7 { margin: 64px }
1242 | .m--8 { margin: 128px }
1243 | .m--n1 { margin: -1px }
1244 | .m--n2 { margin: -2px }
1245 | .m--n3 { margin: -4px }
1246 | .m--n4 { margin: -8px }
1247 | .m--n5 { margin: -16px }
1248 | .m--n6 { margin: -32px }
1249 | .m--n7 { margin: -64px }
1250 | .m--n8 { margin: -128px }
1251 | .m--a { margin: auto }
1252 | 1253 |

top↑

1254 | 1255 |

MARGIN-TOP

1256 |
SYNTAX
1257 | 
# Base
1258 | 	mt = margin-top
1259 | 
1260 | # Modifiers
1261 | 	--0 = 0
1262 | 	--1 = 1px
1263 | 	--2 = 2px
1264 | 	--3 = 4px
1265 | 	--4 = 8px
1266 | 	--5 = 16px
1267 | 	--6 = 32px
1268 | 	--7 = 64px
1269 | 	--8 = 128px
1270 | 	--n1 = -1px
1271 | 	--n2 = -2px
1272 | 	--n3 = -4px
1273 | 	--n4 = -8px
1274 | 	--n5 = -16px
1275 | 	--n6 = -32px
1276 | 	--n7 = -64px
1277 | 	--n8 = -128px
1278 | 	--a = auto
1279 | 1280 |
CLASSES
1281 | 
.mt--0 { margin-top: 0 }
1282 | .mt--1 { margin-top: 1px }
1283 | .mt--2 { margin-top: 2px }
1284 | .mt--3 { margin-top: 4px }
1285 | .mt--4 { margin-top: 8px }
1286 | .mt--5 { margin-top: 16px }
1287 | .mt--6 { margin-top: 32px }
1288 | .mt--7 { margin-top: 64px }
1289 | .mt--8 { margin-top: 128px }
1290 | .mt--n1 { margin-top: -1px }
1291 | .mt--n2 { margin-top: -2px }
1292 | .mt--n3 { margin-top: -4px }
1293 | .mt--n4 { margin-top: -8px }
1294 | .mt--n5 { margin-top: -16px }
1295 | .mt--n6 { margin-top: -32px }
1296 | .mt--n7 { margin-top: -64px }
1297 | .mt--n8 { margin-top: -128px }
1298 | .mt--a { margin-top: auto }
1299 | 1300 |

top↑

1301 | 1302 |

MARGIN-RIGHT

1303 | 1304 |
SYNTAX
1305 | 
# Base
1306 | 	mr = margin-right
1307 | 
1308 | # Modifiers
1309 | 	--0 = 0
1310 | 	--1 = 1px
1311 | 	--2 = 2px
1312 | 	--3 = 4px
1313 | 	--4 = 8px
1314 | 	--5 = 16px
1315 | 	--6 = 32px
1316 | 	--7 = 64px
1317 | 	--8 = 128px
1318 | 	--n1 = -1px
1319 | 	--n2 = -2px
1320 | 	--n3 = -4px
1321 | 	--n4 = -8px
1322 | 	--n5 = -16px
1323 | 	--n6 = -32px
1324 | 	--n7 = -64px
1325 | 	--n8 = -128px	
1326 | 	--a = auto
1327 | 1328 |
CLASSES
1329 | 
.mr--0 { margin-right: 0 }
1330 | .mr--1 { margin-right: 1px }
1331 | .mr--2 { margin-right: 2px }
1332 | .mr--3 { margin-right: 4px }
1333 | .mr--4 { margin-right: 8px }
1334 | .mr--5 { margin-right: 16px }
1335 | .mr--6 { margin-right: 32px }
1336 | .mr--7 { margin-right: 64px }
1337 | .mr--8 { margin-right: 128px }
1338 | .mr--n1 { margin-right: -1px }
1339 | .mr--n2 { margin-right: -2px }
1340 | .mr--n3 { margin-right: -4px }
1341 | .mr--n4 { margin-right: -8px }
1342 | .mr--n5 { margin-right: -16px }
1343 | .mr--n6 { margin-right: -32px }
1344 | .mr--n7 { margin-right: -64px }
1345 | .mr--n8 { margin-right: -128px }
1346 | .mr--a { margin-right: auto }
1347 | 1348 |

top↑

1349 | 1350 |

MARGIN-BOTTOM

1351 |
SYNTAX
1352 | 
# Base
1353 | 	mb = margin-bottom
1354 | 
1355 | # Modifiers
1356 | 	--0 = 0
1357 | 	--1 = 1px
1358 | 	--2 = 2px
1359 | 	--3 = 4px
1360 | 	--4 = 8px
1361 | 	--5 = 16px
1362 | 	--6 = 32px
1363 | 	--7 = 64px
1364 | 	--8 = 128px
1365 | 	--n1 = -1px
1366 | 	--n2 = -2px
1367 | 	--n3 = -4px
1368 | 	--n4 = -8px
1369 | 	--n5 = -16px
1370 | 	--n6 = -32px
1371 | 	--n7 = -64px
1372 | 	--n8 = -128px
1373 | 	--a = auto
1374 | 1375 |
CLASSES
1376 | 
.mb--0 { margin-bottom: 0 }
1377 | .mb--1 { margin-bottom: 1px }
1378 | .mb--2 { margin-bottom: 2px }
1379 | .mb--3 { margin-bottom: 4px }
1380 | .mb--4 { margin-bottom: 8px }
1381 | .mb--5 { margin-bottom: 16px }
1382 | .mb--6 { margin-bottom: 32px }
1383 | .mb--7 { margin-bottom: 64px }
1384 | .mb--8 { margin-bottom: 128px }
1385 | .mb--n1 { margin-bottom: -1px }
1386 | .mb--n2 { margin-bottom: -2px }
1387 | .mb--n3 { margin-bottom: -4px }
1388 | .mb--n4 { margin-bottom: -8px }
1389 | .mb--n5 { margin-bottom: -16px }
1390 | .mb--n6 { margin-bottom: -32px }
1391 | .mb--n7 { margin-bottom: -64px }
1392 | .mb--n8 { margin-bottom: -128px }
1393 | .mb--a { margin-bottom: auto }
1394 | 1395 |

top↑

1396 | 1397 |

MARGIN-LEFT

1398 |
SYNTAX
1399 | 
# Base
1400 | 	ml = margin-left
1401 | 
1402 | # Modifiers
1403 | 	--0 = 0
1404 | 	--1 = 1px
1405 | 	--2 = 2px
1406 | 	--3 = 4px
1407 | 	--4 = 8px
1408 | 	--5 = 16px
1409 | 	--6 = 32px
1410 | 	--7 = 64px
1411 | 	--8 = 128px
1412 | 	--n1 = -1px
1413 | 	--n2 = -2px
1414 | 	--n3 = -4px
1415 | 	--n4 = -8px
1416 | 	--n5 = -16px
1417 | 	--n6 = -32px
1418 | 	--n7 = -64px
1419 | 	--n8 = -128px
1420 | 	--a = auto
1421 | 1422 |
CLASSES
1423 | 
.ml--0 { margin-left: 0 }
1424 | .ml--0 { margin-left: 0 }
1425 | .ml--1 { margin-left: 1px }
1426 | .ml--2 { margin-left: 2px }
1427 | .ml--3 { margin-left: 4px }
1428 | .ml--4 { margin-left: 8px }
1429 | .ml--5 { margin-left: 16px }
1430 | .ml--6 { margin-left: 32px }
1431 | .ml--7 { margin-left: 64px }
1432 | .ml--8 { margin-left: 128px }
1433 | .ml--n1 { margin-left: -1px }
1434 | .ml--n2 { margin-left: -2px }
1435 | .ml--n3 { margin-left: -4px }
1436 | .ml--n4 { margin-left: -8px }
1437 | .ml--n5 { margin-left: -16px }
1438 | .ml--n6 { margin-left: -32px }
1439 | .ml--n7 { margin-left: -64px }
1440 | .ml--n8 { margin-left: -128px }
1441 | .ml--a { margin-left: auto }
1442 | 1443 |

top↑

1444 |

MARGIN-Y

1445 |
SYNTAX
1446 | 
# Base
1447 | 	my = margin-top; margin-bottom
1448 | 
1449 | # Modifiers
1450 | 	--0 = 0
1451 | 	--1 = 1px
1452 | 	--2 = 2px
1453 | 	--3 = 4px
1454 | 	--4 = 8px
1455 | 	--5 = 16px
1456 | 	--6 = 32px
1457 | 	--7 = 64px
1458 | 	--8 = 128px
1459 | 	--n1 = -1px
1460 | 	--n2 = -2px
1461 | 	--n3 = -4px
1462 | 	--n4 = -8px
1463 | 	--n5 = -16px
1464 | 	--n6 = -32px
1465 | 	--n7 = -64px
1466 | 	--n8 = -128px
1467 | 1468 |
CLASSES
1469 | 
.my--0 { margin-top: 0; margin-bottom: 0 }
1470 | .my--1 { margin-top: 1px; margin-bottom: 1px }
1471 | .my--2 { margin-top: 2px; margin-bottom: 2px }
1472 | .my--3 { margin-top: 4px; margin-bottom: 4px }
1473 | .my--4 { margin-top: 8px; margin-bottom: 8px }
1474 | .my--5 { margin-top: 16px; margin-bottom: 16px }
1475 | .my--6 { margin-top: 32px; margin-bottom: 32px }
1476 | .my--7 { margin-top: 64px; margin-bottom: 64px }
1477 | .my--8 { margin-top: 128px; margin-bottom: 128px }
1478 | .my--n1 { margin-top: -1px; margin-bottom: -1px }
1479 | .my--n2 { margin-top: -2px; margin-bottom: -2px }
1480 | .my--n3 { margin-top: -4px; margin-bottom: -4px }
1481 | .my--n4 { margin-top: -8px; margin-bottom: -8px }
1482 | .my--n5 { margin-top: -16px; margin-bottom: -16px }
1483 | .my--n6 { margin-top: -32px; margin-bottom: -32px }
1484 | .my--n7 { margin-top: -64px; margin-bottom: -64px }
1485 | .my--n8 { margin-top: -128px; margin-bottom: -128px }
1486 | 1487 |

top↑

1488 | 1489 |

MARGIN-X

1490 |
SYNTAX
1491 | 
# Base
1492 | 	mx = margin-right; margin-left
1493 | 
1494 | # Modifiers
1495 | 	--0 = 0
1496 | 	--1 = 1px
1497 | 	--2 = 2px
1498 | 	--3 = 4px
1499 | 	--4 = 8px
1500 | 	--5 = 16px
1501 | 	--6 = 32px
1502 | 	--7 = 64px
1503 | 	--8 = 128px
1504 | 	--n1 = -1px
1505 | 	--n2 = -2px
1506 | 	--n3 = -4px
1507 | 	--n4 = -8px
1508 | 	--n5 = -16px
1509 | 	--n6 = -32px
1510 | 	--n7 = -64px
1511 | 	--n8 = -128px
1512 | 	--a = auto
1513 | 1514 |
CLASSES
1515 | 
.mx--0 { margin-right: 0; margin-left: 0 }
1516 | .mx--1 { margin-right: 1px; margin-left: 1px }
1517 | .mx--2 { margin-right: 2px; margin-left: 2px }
1518 | .mx--3 { margin-right: 4px; margin-left: 4px }
1519 | .mx--4 { margin-right: 8px; margin-left: 8px }
1520 | .mx--5 { margin-right: 16px; margin-left: 16px }
1521 | .mx--6 { margin-right: 32px; margin-left: 32px }
1522 | .mx--7 { margin-right: 64px; margin-left: 64px }
1523 | .mx--8 { margin-right: 128px; margin-left: 128px }
1524 | .mx--n1 { margin-right: -1px; margin-left: -1px }
1525 | .mx--n2 { margin-right: -2px; margin-left: -2px }
1526 | .mx--n3 { margin-right: -4px; margin-left: -4px }
1527 | .mx--n4 { margin-right: -8px; margin-left: -8px }
1528 | .mx--n5 { margin-right: -16px; margin-left: -16px }
1529 | .mx--n6 { margin-right: -32px; margin-left: -32px }
1530 | .mx--n7 { margin-right: -64px; margin-left: -64px }
1531 | .mx--n8 { margin-right: -128px; margin-left: -128px }
1532 | .mx--a { margin-right: auto; margin-left: auto }
1533 | 1534 |

top↑

1535 | 1536 |
1537 | 1538 |

OUTLINE

1539 | 1540 |

OUTLINE

1541 |
SYNTAX
1542 | 
# Base
1543 | 	oe = outline (shorthand for various outline-* properties)
1544 | 
1545 | # Modifiers
1546 | 	--0 = 0
1547 | 
1548 | # Note
1549 | 	Don't forget this, ok?
1550 | 	https://developer.mozilla.org/en-US/docs/Web/CSS/outline#Accessibility_concerns
1551 | 1552 |
CLASSES
1553 | 
.oe--0 { outline: 0 }
1554 | 1555 |

top↑

1556 | 1557 |
1558 | 1559 | 1560 |

BORDER

1561 |

BORDER

1562 |
SYNTAX
1563 | 
# Base
1564 | 	br = border (shorthand for the border-width:* and border-style:solid properties)
1565 | 
1566 | # Modifiers
1567 | 	--0 = 0
1568 | 	--1 = 1px
1569 | 	--2 = 2px
1570 | 	--3 = 4px
1571 | 	--4 = 8px
1572 | 	--5 = 16px
1573 | 	--6 = 32px
1574 | 	--7 = 64px
1575 | 	--8 = 128px
1576 |
CLASSES
1577 | 
.br--0 { border-width: 0; border-style: none }
1578 | .br--1 { border-width: 1px; border-style: solid }
1579 | .br--2 { border-width: 2px; border-style: solid }
1580 | .br--3 { border-width: 4px; border-style: solid }
1581 | .br--4 { border-width: 8px; border-style: solid }
1582 | .br--5 { border-width: 16px; border-style: solid }
1583 | .br--6 { border-width: 32px; border-style: solid }
1584 | .br--7 { border-width: 64px; border-style: solid }
1585 | .br--8 { border-width: 128px; border-style: solid }
1586 | 1587 |

top↑

1588 | 1589 | 1590 |

BORDER-WIDTH

1591 |
SYNTAX
1592 | 
# Base
1593 | 	brw = border-width (shorthand for the border-*-width properties)
1594 | 	brtw = border-top-width
1595 | 	brrw = border-right-width
1596 | 	brbw = border-bottom-width
1597 | 	brlw = border-left-width
1598 | 	bryw = border-top-width; border-bottom-width
1599 | 	brxw = border-right-width; border-left-width
1600 | 
1601 | # Modifiers
1602 | 	--0 = 0
1603 | 	--1 = 1px
1604 | 	--2 = 2px
1605 | 	--3 = 4px
1606 | 	--4 = 8px
1607 | 	--5 = 16px
1608 | 	--6 = 32px
1609 | 	--7 = 64px
1610 | 	--8 = 128px
1611 |
CLASSES
1612 | 
.brw--0 { border-width: 0 }
1613 | .brw--1 { border-width: 1px }
1614 | .brw--2 { border-width: 2px }
1615 | .brw--3 { border-width: 4px }
1616 | .brw--4 { border-width: 8px }
1617 | .brw--5 { border-width: 16px }
1618 | .brw--6 { border-width: 32px }
1619 | .brw--7 { border-width: 64px }
1620 | .brw--8 { border-width: 128px }
1621 | 
1622 | .brtw--0 { border-top-width: 0 }
1623 | .brtw--1 { border-top-width: 1px }
1624 | .brtw--2 { border-top-width: 2px }
1625 | .brtw--3 { border-top-width: 4px }
1626 | .brtw--4 { border-top-width: 8px }
1627 | .brtw--5 { border-top-width: 16px }
1628 | .brtw--6 { border-top-width: 32px }
1629 | .brtw--7 { border-top-width: 64px }
1630 | .brtw--8 { border-top-width: 128px }
1631 | 
1632 | .brrw--0 { border-right-width: 0 }
1633 | .brrw--1 { border-right-width: 1px }
1634 | .brrw--2 { border-right-width: 2px }
1635 | .brrw--3 { border-right-width: 4px }
1636 | .brrw--4 { border-right-width: 8px }
1637 | .brrw--5 { border-right-width: 16px }
1638 | .brrw--6 { border-right-width: 32px }
1639 | .brrw--7 { border-right-width: 64px }
1640 | .brrw--8 { border-right-width: 128px }
1641 | 
1642 | .brbw--0 { border-bottom-width: 0 }
1643 | .brbw--1 { border-bottom-width: 1px }
1644 | .brbw--2 { border-bottom-width: 2px }
1645 | .brbw--3 { border-bottom-width: 4px }
1646 | .brbw--4 { border-bottom-width: 8px }
1647 | .brbw--5 { border-bottom-width: 16px }
1648 | .brbw--6 { border-bottom-width: 32px }
1649 | .brbw--7 { border-bottom-width: 64px }
1650 | .brbw--8 { border-bottom-width: 128px }
1651 | 
1652 | .brlw--0 { border-left-width: 0 }
1653 | .brlw--1 { border-left-width: 1px }
1654 | .brlw--2 { border-left-width: 2px }
1655 | .brlw--3 { border-left-width: 4px }
1656 | .brlw--4 { border-left-width: 8px }
1657 | .brlw--5 { border-left-width: 16px }
1658 | .brlw--6 { border-left-width: 32px }
1659 | .brlw--7 { border-left-width: 64px }
1660 | .brlw--8 { border-left-width: 128px }
1661 | 
1662 | .bryw--0 { border-top-width: 0; border-bottom-width: 0 }
1663 | .bryw--1 { border-top-width: 1px; border-bottom-width: 1px }
1664 | .bryw--2 { border-top-width: 2px; border-bottom-width: 2px }
1665 | .bryw--3 { border-top-width: 4px; border-bottom-width: 4px }
1666 | .bryw--4 { border-top-width: 8px; border-bottom-width: 8px }
1667 | .bryw--5 { border-top-width: 16px; border-bottom-width: 16px }
1668 | .bryw--6 { border-top-width: 32px; border-bottom-width: 32px }
1669 | .bryw--7 { border-top-width: 64px; border-bottom-width: 64px }
1670 | .bryw--8 { border-top-width: 128px; border-bottom-width: 128px }
1671 | 
1672 | .brxw--0 { border-right-width: 0; border-left-width: 0 }
1673 | .brxw--1 { border-right-width: 1px; border-left-width: 1px }
1674 | .brxw--2 { border-right-width: 2px; border-left-width: 2px }
1675 | .brxw--3 { border-right-width: 4px; border-left-width: 4px }
1676 | .brxw--4 { border-right-width: 8px; border-left-width: 8px }
1677 | .brxw--5 { border-right-width: 16px; border-left-width: 16px }
1678 | .brxw--6 { border-right-width: 32px; border-left-width: 32px }
1679 | .brxw--7 { border-right-width: 64px; border-left-width: 64px }
1680 | .brxw--8 { border-right-width: 128px; border-left-width: 128px }
1681 | 1682 |

top↑

1683 | 1684 |

BORDER-STYLE

1685 |
SYNTAX
1686 | 
# Base
1687 | 	brst = border-style (shorthand for the border-*-style properties)
1688 | 	brtsty = border-top-style
1689 | 	brrsty = border-right-style
1690 | 	brbsty = border-bottom-style
1691 | 	brlsty = border-left-style
1692 | 
1693 | # Modifiers
1694 | 	--das = dashed
1695 | 	--dot = dotted
1696 | 	--n = none
1697 | 	--sol = solid
1698 | 1699 |
CLASSES
1700 | 
.brst--das { border-style: dashed }
1701 | .brst--dot { border-style: dotted }
1702 | .brst--n { border-style: none }
1703 | .brst--sol { border-style: solid }
1704 | 
1705 | .brtsty--das { border-top-style: dashed }
1706 | .brtsty--dot { border-top-style: dotted }
1707 | .brtsty--n { border-top-style: none }
1708 | .brtsty--sol { border-top-style: solid }
1709 | 
1710 | .brrsty--das { border-right-style: dashed }
1711 | .brrsty--dot { border-right-style: dotted }
1712 | .brrsty--n { border-right-style: none }
1713 | .brrsty--sol { border-right-style: solid }
1714 | 
1715 | .brbsty--das { border-bottom-style: dashed }
1716 | .brbsty--dot { border-bottom-style: dotted }
1717 | .brbsty--n { border-bottom-style: none }
1718 | .brbsty--sol { border-bottom-style: solid }
1719 | 
1720 | .brlsty--das { border-left-style: dashed }
1721 | .brlsty--dot { border-left-style: dotted }
1722 | .brlsty--n { border-left-style: none }
1723 | .brlsty--sol { border-left-style: solid }
1724 | 
1725 | .brysty--das { border-top-style: dashed; border-bottom-style: dashed }
1726 | .brysty--dot { border-top-style: dotted; border-bottom-style: dotted }
1727 | .brysty--n { border-top-style: none; border-bottom-style: none }
1728 | .brysty--sol { border-top-style: solid; border-bottom-style: solid }
1729 | 
1730 | .brxsty--das { border-right-style: dashed; border-left-style: dashed }
1731 | .brxsty--dot { border-right-style: dotted; border-left-style: dotted }
1732 | .brxsty--n { border-right-style: none; border-left-style: none }
1733 | .brxsty--sol { border-right-style: solid; border-left-style: solid }
1734 | 1735 |

top↑

1736 | 1737 |

BORDER-RADIUS

1738 | 1739 |
SYNTAX
1740 | 
# Base
1741 | 	brrad = border-radius (shorthand for the border-*-radius properties)
1742 | 	brtrrad = border-top-right-radius
1743 | 	brtlrad = border-top-left-radius
1744 | 	brbrrad = border-bottom-right-radius
1745 | 	brblrad = border-bottom-left-radius
1746 | 	bryrrad = border-top-right-radius, border-bottom-right-radius
1747 | 	brylrad = border-top-left-radius, border-bottom-left-radius
1748 | 
1749 | # Modifiers
1750 | 	--0 = 0
1751 | 	--1 = 1px
1752 | 	--2 = 2px
1753 | 	--3 = 4px
1754 | 	--4 = 8px
1755 | 	--5 = 16px
1756 | 	--6 = 32px
1757 | 	--7 = 64px
1758 | 	--8 = 128px
1759 | 	--100p = 100% (only for border-radius shorthand)
1760 | 1761 |
CLASSES
1762 | 
.brrad--0 { border-radius: 0 }
1763 | .brrad--1 { border-radius: 1px }
1764 | .brrad--2 { border-radius: 2px }
1765 | .brrad--3 { border-radius: 4px }
1766 | .brrad--4 { border-radius: 8px }
1767 | .brrad--5 { border-radius: 16px }
1768 | .brrad--6 { border-radius: 32px }
1769 | .brrad--7 { border-radius: 64px }
1770 | .brrad--8 { border-radius: 128px }
1771 | .brrad--100p { border-radius: 100% }
1772 | 
1773 | .brtrrad--0 { border-top-right-radius: 0 }
1774 | .brtlrad--0 { border-top-left-radius: 0 }
1775 | .brbrrad--0 { border-bottom-right-radius: 0 }
1776 | .brblrad--0 { border-bottom-left-radius: 0 }
1777 | .bryrrad--0 { border-top-right-radius: 0; border-bottom-right-radius: 0 }
1778 | .brylrad--0 { border-top-left-radius: 0; border-bottom-left-radius: 0 }
1779 | 
1780 | .brtrrad--1 { border-top-right-radius: 1px }
1781 | .brtlrad--1 { border-top-left-radius: 1px }
1782 | .brbrrad--1 { border-bottom-right-radius: 1px }
1783 | .brblrad--1 { border-bottom-left-radius: 1px }
1784 | .bryrrad--1 { border-top-right-radius: 1px; border-bottom-right-radius: 1px }
1785 | .brylrad--1 { border-top-left-radius: 1px; border-bottom-left-radius: 1px }
1786 | 
1787 | .brtrrad--2 { border-top-right-radius: 2px }
1788 | .brtlrad--2 { border-top-left-radius: 2px }
1789 | .brbrrad--2 { border-bottom-right-radius: 2px }
1790 | .brblrad--2 { border-bottom-left-radius: 2px }
1791 | .bryrrad--2 { border-top-right-radius: 2px; border-bottom-right-radius: 2px }
1792 | .brylrad--2 { border-top-left-radius: 2px; border-bottom-left-radius: 2px }
1793 | 
1794 | .brtrrad--3 { border-top-right-radius: 4px }
1795 | .brtlrad--3 { border-top-left-radius: 4px }
1796 | .brbrrad--3 { border-bottom-right-radius: 4px }
1797 | .brblrad--3 { border-bottom-left-radius: 4px }
1798 | .bryrrad--3 { border-top-right-radius: 4px; border-bottom-right-radius: 4px }
1799 | .brylrad--3 { border-top-left-radius: 4px; border-bottom-left-radius: 4px }
1800 | 
1801 | .brtrrad--4 { border-top-right-radius: 8px }
1802 | .brtlrad--4 { border-top-left-radius: 8px }
1803 | .brbrrad--4 { border-bottom-right-radius: 8px }
1804 | .brblrad--4 { border-bottom-left-radius: 8px }
1805 | .bryrrad--4 { border-top-right-radius: 8px; border-bottom-right-radius: 8px }
1806 | .brylrad--4 { border-top-left-radius: 8px; border-bottom-left-radius: 8px }
1807 | 
1808 | .brtrrad--5 { border-top-right-radius: 16px }
1809 | .brtlrad--5 { border-top-left-radius: 16px }
1810 | .brbrrad--5 { border-bottom-right-radius: 16px }
1811 | .brblrad--5 { border-bottom-left-radius: 16px }
1812 | .bryrrad--5 { border-top-right-radius: 16px; border-bottom-right-radius: 16px }
1813 | .brylrad--5 { border-top-left-radius: 16px; border-bottom-left-radius: 16px }
1814 | 
1815 | .brtrrad--6 { border-top-right-radius: 32px }
1816 | .brtlrad--6 { border-top-left-radius: 32px }
1817 | .brbrrad--6 { border-bottom-right-radius: 32px }
1818 | .brblrad--6 { border-bottom-left-radius: 32px }
1819 | .bryrrad--6 { border-top-right-radius: 32px; border-bottom-right-radius: 32px }
1820 | .brylrad--6 { border-top-left-radius: 32px; border-bottom-left-radius: 32px }
1821 | 
1822 | .brtrrad--7 { border-top-right-radius: 64px }
1823 | .brtlrad--7 { border-top-left-radius: 64px }
1824 | .brbrrad--7 { border-bottom-right-radius: 64px }
1825 | .brblrad--7 { border-bottom-left-radius: 64px }
1826 | .bryrrad--7 { border-top-right-radius: 64px; border-bottom-right-radius: 64px }
1827 | .brylrad--7 { border-top-left-radius: 64px; border-bottom-left-radius: 64px }
1828 | 
1829 | .brtrrad--8 { border-top-right-radius: 128px }
1830 | .brtlrad--8 { border-top-left-radius: 128px }
1831 | .brbrrad--8 { border-bottom-right-radius: 128px }
1832 | .brblrad--8 { border-bottom-left-radius: 128px }
1833 | .bryrrad--8 { border-top-right-radius: 128px; border-bottom-right-radius: 128px }
1834 | .brylrad--8 { border-top-left-radius: 128px; border-bottom-left-radius: 128px }
1835 | 1836 |

top↑

1837 | 1838 |

BORDER-COLOR

1839 |
SYNTAX
1840 | 
# Base
1841 | 	brc = border-color (shorthand for the border-*-color properties)
1842 | 	brtc = border-top-color
1843 | 	brrc = border-right-color
1844 | 	brbc = border-bottom-color
1845 | 	brlc = border-left-color
1846 | 
1847 | 	brchvr = border-color:hover
1848 | 	brtchvr = border-top-color:hover
1849 | 	brrchvr = border-right-color:hover
1850 | 	brbchvr = border-bottom-color:hover
1851 | 	brlchvr = border-left-color:hover
1852 | 
1853 | # Modifiers
1854 | 	--gy1 = #fafafa (grey)
1855 | 	--gy2 = #ededed (grey)
1856 | 	--gy3 = #dddddd (grey)
1857 | 	--gy4 = #b1b1b1 (grey)
1858 | 	--gy5 = #878787 (grey)
1859 | 	--gy6 = #6a6a6a (grey)
1860 | 	--gy7 = #4d4d4d (grey)
1861 | 	--gy8 = #303030 (grey)
1862 | 	--rd1 = #c6262e (red)
1863 | 	--gn1 = #68b723 (green)
1864 | 	--bl1 = #3689e6 (blue)
1865 | 	--yl1 = #f9c440 (yellow)
1866 | 	--bk1 = #000000 (black)
1867 | 	--wh1 = #ffffff (white)
1868 | 	--tp = transparent
1869 | 1870 |

top↑

1871 | 1872 |
CLASSES
1873 | 
.brc--gy1 { border-color: #fafafa }
1874 | .brc--gy2 { border-color: #ededed }
1875 | .brc--gy3 { border-color: #dddddd }
1876 | .brc--gy4 { border-color: #b1b1b1 }
1877 | .brc--gy5 { border-color: #878787 }
1878 | .brc--gy6 { border-color: #6a6a6a }
1879 | .brc--gy7 { border-color: #4d4d4d }
1880 | .brc--gy8 { border-color: #303030 }
1881 | .brc--rd1 { border-color: #c6262e }
1882 | .brc--gn1 { border-color: #68b723 }
1883 | .brc--bl1 { border-color: #3689e6 }
1884 | .brc--yl1 { border-color: #f9c440 }
1885 | .brc--bk1 { border-color: #000000 }
1886 | .brc--wh1 { border-color: #ffffff }
1887 | .brc--tp { border-color: transparent }
1888 | 
1889 | .brtc--gy1 { border-top-color: #fafafa }
1890 | .brtc--gy2 { border-top-color: #ededed }
1891 | .brtc--gy3 { border-top-color: #dddddd }
1892 | .brtc--gy4 { border-top-color: #b1b1b1 }
1893 | .brtc--gy5 { border-top-color: #878787 }
1894 | .brtc--gy6 { border-top-color: #6a6a6a }
1895 | .brtc--gy7 { border-top-color: #4d4d4d }
1896 | .brtc--gy8 { border-top-color: #303030 }
1897 | .brtc--rd1 { border-top-color: #c6262e }
1898 | .brtc--gn1 { border-top-color: #68b723 }
1899 | .brtc--bl1 { border-top-color: #3689e6 }
1900 | .brtc--yl1 { border-top-color: #f9c440 }
1901 | .brtc--bk1 { border-top-color: #000000 }
1902 | .brtc--wh1 { border-top-color: #ffffff }
1903 | .brtc--tp { border-top-color: transparent }
1904 | 
1905 | .brrc--gy1 { border-right-color: #fafafa }
1906 | .brrc--gy2 { border-right-color: #ededed }
1907 | .brrc--gy3 { border-right-color: #dddddd }
1908 | .brrc--gy4 { border-right-color: #b1b1b1 }
1909 | .brrc--gy5 { border-right-color: #878787 }
1910 | .brrc--gy6 { border-right-color: #6a6a6a }
1911 | .brrc--gy7 { border-right-color: #4d4d4d }
1912 | .brrc--gy8 { border-right-color: #303030 }
1913 | .brrc--rd1 { border-right-color: #c6262e }
1914 | .brrc--gn1 { border-right-color: #68b723 }
1915 | .brrc--bl1 { border-right-color: #3689e6 }
1916 | .brrc--yl1 { border-right-color: #f9c440 }
1917 | .brrc--bk1 { border-right-color: #000000 }
1918 | .brrc--wh1 { border-right-color: #ffffff }
1919 | .brrc--tp { border-right-color: transparent }
1920 | 
1921 | .brbc--gy1 { border-bottom-color: #fafafa }
1922 | .brbc--gy2 { border-bottom-color: #ededed }
1923 | .brbc--gy3 { border-bottom-color: #dddddd }
1924 | .brbc--gy4 { border-bottom-color: #b1b1b1 }
1925 | .brbc--gy5 { border-bottom-color: #878787 }
1926 | .brbc--gy6 { border-bottom-color: #6a6a6a }
1927 | .brbc--gy7 { border-bottom-color: #4d4d4d }
1928 | .brbc--gy8 { border-bottom-color: #303030 }
1929 | .brbc--rd1 { border-bottom-color: #c6262e }
1930 | .brbc--gn1 { border-bottom-color: #68b723 }
1931 | .brbc--bl1 { border-bottom-color: #3689e6 }
1932 | .brbc--yl1 { border-bottom-color: #f9c440 }
1933 | .brbc--bk1 { border-bottom-color: #000000 }
1934 | .brbc--wh1 { border-bottom-color: #ffffff }
1935 | .brbc--tp { border-bottom-color: transparent }
1936 | 
1937 | .brlc--gy1 { border-left-color: #fafafa }
1938 | .brlc--gy2 { border-left-color: #ededed }
1939 | .brlc--gy3 { border-left-color: #dddddd }
1940 | .brlc--gy4 { border-left-color: #b1b1b1 }
1941 | .brlc--gy5 { border-left-color: #878787 }
1942 | .brlc--gy6 { border-left-color: #6a6a6a }
1943 | .brlc--gy7 { border-left-color: #4d4d4d }
1944 | .brlc--gy8 { border-left-color: #303030 }
1945 | .brlc--rd1 { border-left-color: #c6262e }
1946 | .brlc--gn1 { border-left-color: #68b723 }
1947 | .brlc--bl1 { border-left-color: #3689e6 }
1948 | .brlc--yl1 { border-left-color: #f9c440 }
1949 | .brlc--bk1 { border-left-color: #000000 }
1950 | .brlc--wh1 { border-left-color: #ffffff }
1951 | .brlc--tp { border-left-color: transparent }
1952 | 
1953 | .brchvr--gy1:hover { border-color: #fafafa }
1954 | .brchvr--gy2:hover { border-color: #ededed }
1955 | .brchvr--gy3:hover { border-color: #dddddd }
1956 | .brchvr--gy4:hover { border-color: #b1b1b1 }
1957 | .brchvr--gy5:hover { border-color: #878787 }
1958 | .brchvr--gy6:hover { border-color: #6a6a6a }
1959 | .brchvr--gy7:hover { border-color: #4d4d4d }
1960 | .brchvr--gy8:hover { border-color: #303030 }
1961 | .brchvr--rd1:hover { border-color: #c6262e }
1962 | .brchvr--gn1:hover { border-color: #68b723 }
1963 | .brchvr--bl1:hover { border-color: #3689e6 }
1964 | .brchvr--yl1:hover { border-color: #f9c440 }
1965 | .brchvr--bk1:hover { border-color: #000000 }
1966 | .brchvr--wh1:hover { border-color: #ffffff }
1967 | .brchvr--tp:hover { border-color: transparent }
1968 | 
1969 | .brtchvr--gy1:hover { border-top-color: #fafafa }
1970 | .brtchvr--gy2:hover { border-top-color: #ededed }
1971 | .brtchvr--gy3:hover { border-top-color: #dddddd }
1972 | .brtchvr--gy4:hover { border-top-color: #b1b1b1 }
1973 | .brtchvr--gy5:hover { border-top-color: #878787 }
1974 | .brtchvr--gy6:hover { border-top-color: #6a6a6a }
1975 | .brtchvr--gy7:hover { border-top-color: #4d4d4d }
1976 | .brtchvr--gy8:hover { border-top-color: #303030 }
1977 | .brtchvr--rd1:hover { border-top-color: #c6262e }
1978 | .brtchvr--gn1:hover { border-top-color: #68b723 }
1979 | .brtchvr--bl1:hover { border-top-color: #3689e6 }
1980 | .brtchvr--yl1:hover { border-top-color: #f9c440 }
1981 | .brtchvr--bk1:hover { border-top-color: #000000 }
1982 | .brtchvr--wh1:hover { border-top-color: #ffffff }
1983 | .brtchvr--tp:hover{ border-top-color: transparent }
1984 | 
1985 | .brrchvr--gy1:hover { border-right-color: #fafafa }
1986 | .brrchvr--gy2:hover { border-right-color: #ededed }
1987 | .brrchvr--gy3:hover { border-right-color: #dddddd }
1988 | .brrchvr--gy4:hover { border-right-color: #b1b1b1 }
1989 | .brrchvr--gy5:hover { border-right-color: #878787 }
1990 | .brrchvr--gy6:hover { border-right-color: #6a6a6a }
1991 | .brrchvr--gy7:hover { border-right-color: #4d4d4d }
1992 | .brrchvr--gy8:hover { border-right-color: #303030 }
1993 | .brrchvr--rd1:hover { border-right-color: #c6262e }
1994 | .brrchvr--gn1:hover { border-right-color: #68b723 }
1995 | .brrchvr--bl1:hover { border-right-color: #3689e6 }
1996 | .brrchvr--yl1:hover { border-right-color: #f9c440 }
1997 | .brrchvr--bk1:hover { border-right-color: #000000 }
1998 | .brrchvr--wh1:hover { border-right-color: #ffffff }
1999 | .brrchvr--tp:hover { border-right-color: transparent }
2000 | 
2001 | .brbchvr--gy1:hover { border-bottom-color: #fafafa }
2002 | .brbchvr--gy2:hover { border-bottom-color: #ededed }
2003 | .brbchvr--gy3:hover { border-bottom-color: #dddddd }
2004 | .brbchvr--gy4:hover { border-bottom-color: #b1b1b1 }
2005 | .brbchvr--gy5:hover { border-bottom-color: #878787 }
2006 | .brbchvr--gy6:hover { border-bottom-color: #6a6a6a }
2007 | .brbchvr--gy7:hover { border-bottom-color: #4d4d4d }
2008 | .brbchvr--gy8:hover { border-bottom-color: #303030 }
2009 | .brbchvr--rd1:hover { border-bottom-color: #c6262e }
2010 | .brbchvr--gn1:hover { border-bottom-color: #68b723 }
2011 | .brbchvr--bl1:hover { border-bottom-color: #3689e6 }
2012 | .brbchvr--yl1:hover { border-bottom-color: #f9c440 }
2013 | .brbchvr--bk1:hover { border-bottom-color: #000000 }
2014 | .brbchvr--wh1:hover { border-bottom-color: #ffffff }
2015 | .brbchvr--tp:hover { border-bottom-color: transparent }
2016 | 
2017 | .brlchvr--gy1:hover { border-left-color: #fafafa }
2018 | .brlchvr--gy2:hover { border-left-color: #ededed }
2019 | .brlchvr--gy3:hover { border-left-color: #dddddd }
2020 | .brlchvr--gy4:hover { border-left-color: #b1b1b1 }
2021 | .brlchvr--gy5:hover { border-left-color: #878787 }
2022 | .brlchvr--gy6:hover { border-left-color: #6a6a6a }
2023 | .brlchvr--gy7:hover { border-left-color: #4d4d4d }
2024 | .brlchvr--gy8:hover { border-left-color: #303030 }
2025 | .brlchvr--rd1:hover { border-left-color: #c6262e }
2026 | .brlchvr--gn1:hover { border-left-color: #68b723 }
2027 | .brlchvr--bl1:hover { border-left-color: #3689e6 }
2028 | .brlchvr--yl1:hover { border-left-color: #f9c440 }
2029 | .brlchvr--bk1:hover { border-left-color: #000000 }
2030 | .brlchvr--wh1:hover { border-left-color: #ffffff }
2031 | .brlchvr--tp:hover { border-left-color: transparent }
2032 | 2033 |

top↑

2034 | 2035 |
2036 | 2037 |

BOX-SHADOW

2038 | 2039 |

BOX-SHADOW

2040 | 2041 |
SYNTAX
2042 | 
# Base
2043 | 	bxsw = box-shadow
2044 | 
2045 | # Modifiers
2046 | 	--0 = none
2047 | 	--1 = offset all 0 1px 2px
2048 | 	--2 = offset all 0 4px 8px
2049 | 	--3 = offset all 0 8px 16px 
2050 | 	--4 = offset all 0 16px 32px
2051 | 	
2052 | 	--t1 = offset top 0 -4px 4px -4px
2053 | 	--t2 = offset top 0 -8px 8px -8px
2054 | 	--t3 = offset top 0 -16px 16px -16px
2055 | 	--t4 = offset top 0 -32px 32px -32px
2056 | 	
2057 | 	--r1 = offset right 4px 0 4px -4px
2058 | 	--r2 = offset right 8px 0 8px -8px
2059 | 	--r3 = offset right 16px 0 16px -16px
2060 | 	--r4 = offset right 32px 0 32px -32px
2061 | 	
2062 | 	--b1 = offset bottom 0 4px 4px -4px
2063 | 	--b2 = offset bottom 0 8px 8px -8px
2064 | 	--b3 = offset bottom 0 16px 16px -16px
2065 | 	--b4 = offset bottom 0 32px 32px -32px
2066 | 	
2067 | 	--l1 = offset left -4px 0 4px -4px
2068 | 	--l2 = offset left -8px 0 8px -8px
2069 | 	--l3 = offset left -16px 0 16px -16px
2070 | 	--l4 = offset left -32px 0 32px -32px
2071 | 2072 |
CLASSES
2073 | 
.bxsw--0 { box-shadow: none }
2074 | .bxsw--1 { box-shadow: 0 1px 2px rgba( 0, 0, 0, .4 ) }
2075 | .bxsw--2 { box-shadow: 0 4px 8px rgba( 0, 0, 0, .4 ) }
2076 | .bxsw--3 { box-shadow: 0 8px 16px rgba( 0, 0, 0, .4 ) }
2077 | .bxsw--4 { box-shadow: 0 16px 32px rgba( 0, 0, 0, .4 ) }
2078 | 
2079 | .bxsw--t1 { box-shadow: 0 -4px 4px -4px rgba( 0, 0, 0, .4 ) }
2080 | .bxsw--t2 { box-shadow: 0 -8px 8px -8px rgba( 0, 0, 0, .4 ) }
2081 | .bxsw--t3 { box-shadow: 0 -16px 16px -16px rgba( 0, 0, 0, .4 ) }
2082 | .bxsw--t4 { box-shadow: 0 -32px 32px -32px rgba( 0, 0, 0, .4 ) }
2083 | 
2084 | .bxsw--r1 { box-shadow: 4px 0 4px -4px rgba( 0, 0, 0, .4 ) }
2085 | .bxsw--r2 { box-shadow: 8px 0 8px -8px rgba( 0, 0, 0, .4 ) }
2086 | .bxsw--r3 { box-shadow: 16px 0 16px -16px rgba( 0, 0, 0, .4 ) }
2087 | .bxsw--r4 { box-shadow: 32px 0 32px -32px rgba( 0, 0, 0, .4 ) }
2088 | 
2089 | .bxsw--b1 { box-shadow: 0 4px 4px -4px rgba( 0, 0, 0, .4 ) }
2090 | .bxsw--b2 { box-shadow: 0 8px 8px -8px rgba( 0, 0, 0, .4 ) }
2091 | .bxsw--b3 { box-shadow: 0 16px 16px -16px rgba( 0, 0, 0, .4 ) }
2092 | .bxsw--b4 { box-shadow: 0 32px 32px -32px rgba( 0, 0, 0, .4 ) }
2093 | 
2094 | .bxsw--l1 { box-shadow: -4px 0 4px -4px rgba( 0, 0, 0, .4 ) }
2095 | .bxsw--l2 { box-shadow: -8px 0 8px -8px rgba( 0, 0, 0, .4 ) }
2096 | .bxsw--l3 { box-shadow: -16px 0 16px -16px rgba( 0, 0, 0, .4 ) }
2097 | .bxsw--l4 { box-shadow: -32px 0 32px -32px rgba( 0, 0, 0, .4 ) }
2098 | 2099 |

top↑

2100 | 2101 |
2102 | 2103 |

BACKGROUND

2104 |

BACKGROUND-COLOR

2105 |
SYNTAX
2106 | 
# Base
2107 | 	bgc = background-color
2108 | 	bgchvr = background-color:hover
2109 | 
2110 | # Modifiers
2111 | 	--gy1 = #fafafa (grey)
2112 | 	--gy2 = #ededed (grey)
2113 | 	--gy3 = #dddddd (grey)
2114 | 	--gy4 = #b1b1b1 (grey)
2115 | 	--gy5 = #878787 (grey)
2116 | 	--gy6 = #6a6a6a (grey)
2117 | 	--gy7 = #4d4d4d (grey)
2118 | 	--gy8 = #303030 (grey)
2119 | 	--rd1 = #c6262e (red)
2120 | 	--gn1 = #68b723 (green)
2121 | 	--bl1 = #3689e6 (blue)
2122 | 	--yl1 = #f9c440 (yellow))
2123 | 	--bk1 = #000000 (black)
2124 | 	--wh1 = #ffffff (white)
2125 | 	--tp = transparent
2126 | 2127 |
CLASSES
2128 | 
.bgc--gy1 { background-color: #fafafa }
2129 | .bgc--gy2 { background-color: #ededed }
2130 | .bgc--gy3 { background-color: #dddddd }
2131 | .bgc--gy4 { background-color: #b1b1b1 }
2132 | .bgc--gy5 { background-color: #878787 }
2133 | .bgc--gy6 { background-color: #6a6a6a }
2134 | .bgc--gy7 { background-color: #4d4d4d }
2135 | .bgc--gy8 { background-color: #303030 }
2136 | .bgc--rd1 { background-color: #c6262e }
2137 | .bgc--gn1 { background-color: #68b723 }
2138 | .bgc--bl1 { background-color: #3689e6 }
2139 | .bgc--yl1 { background-color: #f9c440 }
2140 | .bgc--bk1 { background-color: #000000 }
2141 | .bgc--wh1 { background-color: #ffffff }
2142 | .bgc--tp { background-color: transparent }
2143 | 
2144 | .bgchvr--gy1:hover { background-color: #fafafa }
2145 | .bgchvr--gy2:hover { background-color: #ededed }
2146 | .bgchvr--gy3:hover { background-color: #dddddd }
2147 | .bgchvr--gy4:hover { background-color: #b1b1b1 }
2148 | .bgchvr--gy5:hover { background-color: #878787 }
2149 | .bgchvr--gy6:hover { background-color: #6a6a6a }
2150 | .bgchvr--gy7:hover { background-color: #4d4d4d }
2151 | .bgchvr--gy8:hover { background-color: #303030 }
2152 | .bgchvr--rd1:hover { background-color: #c6262e }
2153 | .bgchvr--gn1:hover { background-color: #68b723 }
2154 | .bgchvr--bl1:hover { background-color: #3689e6 }
2155 | .bgchvr--yl1:hover { background-color: #f9c440 }
2156 | .bgchvr--bk1:hover { background-color: #000000 }
2157 | .bgchvr--wh1:hover { background-color: #ffffff }
2158 | .bgchvr--tp:hover { background-color: transparent }
2159 | 2160 |

top↑

2161 |

BACKGROUND-POSITION

2162 |
SYNTAX
2163 | 
# Base
2164 | 	bgpos = background-position
2165 | 
2166 | # Modifiers
2167 | 	--t = top 
2168 | 	--r = right
2169 | 	--b = bottom
2170 | 	--l = left
2171 | 	--ctr = center
2172 | 2173 |
CLASSES
2174 | 
.bgpos--t { background-position: top center }
2175 | .bgpos--r { background-position: center right }
2176 | .bgpos--b { background-position: bottom center }
2177 | .bgpos--l { background-position: center left }
2178 | .bgpos--ctr { background-position: center center }
2179 | 2180 |

top↑

2181 |

BACKGROUND-REPEAT

2182 |
SYNTAX
2183 | 
# Base
2184 | 	bgrt = background-repeat
2185 | 
2186 | # Modifiers
2187 | 	--n = no-repeat
2188 | 	--y = repeat-y
2189 | 	--x = repeat-x
2190 | 2191 |
CLASSES
2192 | 
.bgrt--n { background-repeat: no-repeat }
2193 | .bgrt--x { background-repeat: repeat-x }
2194 | .bgrt--y { background-repeat: repeat-y }
2195 | 2196 |

top↑

2197 | 2198 |

BACKGROUND-SIZE

2199 |
SYNTAX
2200 | 
# Base
2201 | 	bgs = background-size 
2202 | 
2203 | # Modifiers
2204 | 	--cn = contain
2205 | 	--cr = cover
2206 | 2207 |
CLASSES
2208 | 
.bgs--cn { background-size: contain }
2209 | .bgs--cr { background-size: cover }
2210 | 2211 |

top↑

2212 |
2213 | 2214 |

CURSOR

2215 |

CURSOR

2216 |
SYNTAX
2217 | 2218 | 
# Base
2219 | 	cur = cursor
2220 | 
2221 | # Modifiers
2222 | 	--def = default
2223 | 	--ptr = pointer
2224 | 	--n = not-allowed
2225 | 	--i = inherit
2226 | 2227 |
CLASSES
2228 | 
.cur--def { cursor: default }
2229 | .cur--ptr { cursor: pointer }
2230 | .cur--n { cursor: not-allowed }
2231 | .cur--i { cursor: inherit }
2232 | 2233 |

top↑

2234 |
2235 |

PADDING

2236 |

PADDING

2237 |
SYNTAX
2238 | 
# Base
2239 | 	p = padding (shorthand for all the padding-* properties)
2240 | 
2241 | # Modifiers
2242 | 	--0 = 0
2243 | 	--1 = 1px
2244 | 	--2 = 2px
2245 | 	--3 = 4px
2246 | 	--4 = 8px
2247 | 	--5 = 16px
2248 | 	--6 = 32px
2249 | 	--7 = 64px
2250 | 	--8 = 128px
2251 | 2252 |
CLASSES
2253 | 
.p--0 { padding: 0 }
2254 | .p--1 { padding: 1px }
2255 | .p--2 { padding: 2px }
2256 | .p--3 { padding: 4px }
2257 | .p--4 { padding: 8px }
2258 | .p--5 { padding: 16px }
2259 | .p--6 { padding: 32px }
2260 | .p--7 { padding: 64px }
2261 | .p--8 { padding: 128px }
2262 | 2263 |

top↑

2264 | 2265 |

PADDING-TOP

2266 |
SYNTAX
2267 | 
# Base
2268 | 	pt = padding-top
2269 | 
2270 | # Modifiers
2271 | 	--0 = 0
2272 | 	--1 = 1px
2273 | 	--2 = 2px
2274 | 	--3 = 4px
2275 | 	--4 = 8px
2276 | 	--5 = 16px
2277 | 	--6 = 32px
2278 | 	--7 = 64px
2279 | 	--8 = 128px
2280 | 2281 |
CLASSES
2282 | 
.pt--0 { padding-top: 0 }
2283 | .pt--1 { padding-top: 1px }
2284 | .pt--2 { padding-top: 2px }
2285 | .pt--3 { padding-top: 4px }
2286 | .pt--4 { padding-top: 8px }
2287 | .pt--5 { padding-top: 16px }
2288 | .pt--6 { padding-top: 32px }
2289 | .pt--7 { padding-top: 64px }
2290 | .pt--8 { padding-top: 128px }
2291 | 2292 |

top↑

2293 |

PADDING-RIGHT

2294 |
SYNTAX
2295 | 
# Base
2296 | 	pr = padding-right
2297 | 
2298 | # Modifiers
2299 | 	--0 = 0
2300 | 	--1 = 1px
2301 | 	--2 = 2px
2302 | 	--3 = 4px
2303 | 	--4 = 8px
2304 | 	--5 = 16px
2305 | 	--6 = 32px
2306 | 	--7 = 64px
2307 | 	--8 = 128px
2308 | 2309 |
CLASSES
2310 | 
.pr--0 { padding-right: 0 }
2311 | .pr--1 { padding-right: 1px }
2312 | .pr--2 { padding-right: 2px }
2313 | .pr--3 { padding-right: 4px }
2314 | .pr--4 { padding-right: 8px }
2315 | .pr--5 { padding-right: 16px }
2316 | .pr--6 { padding-right: 32px }
2317 | .pr--7 { padding-right: 64px }
2318 | .pr--8 { padding-right: 128px }
2319 | 2320 |

top↑

2321 | 2322 |

PADDING-BOTTOM

2323 |
SYNTAX
2324 | 
# Base
2325 | 	pb = padding-bottom
2326 | 
2327 | # Modifiers
2328 | 	--0 = 0
2329 | 	--1 = 1px
2330 | 	--2 = 2px
2331 | 	--3 = 4px
2332 | 	--4 = 8px
2333 | 	--5 = 16px
2334 | 	--6 = 32px
2335 | 	--7 = 64px
2336 | 	--8 = 128px
2337 | 2338 |
CLASSES
2339 | 
.pb--0 { padding-bottom: 0 }
2340 | .pb--1 { padding-bottom: 1px }
2341 | .pb--2 { padding-bottom: 2px }
2342 | .pb--3 { padding-bottom: 4px }
2343 | .pb--4 { padding-bottom: 8px }
2344 | .pb--5 { padding-bottom: 16px }
2345 | .pb--6 { padding-bottom: 32px }
2346 | .pb--7 { padding-bottom: 64px }
2347 | .pb--8 { padding-bottom: 128px }
2348 | 2349 |

top↑

2350 |

PADDING-LEFT

2351 |
SYNTAX
2352 | 
# Base
2353 | 	pl = padding-left
2354 | 
2355 | # Modifiers
2356 | 	--0 = 0
2357 | 	--1 = 1px
2358 | 	--2 = 2px
2359 | 	--3 = 4px
2360 | 	--4 = 8px
2361 | 	--5 = 16px
2362 | 	--6 = 32px
2363 | 	--7 = 64px
2364 | 	--8 = 128px
2365 | 2366 |
CLASSES
2367 | 
.pl--0 { padding-left: 0 }
2368 | .pl--1 { padding-left: 1px }
2369 | .pl--2 { padding-left: 2px }
2370 | .pl--3 { padding-left: 4px }
2371 | .pl--4 { padding-left: 8px }
2372 | .pl--5 { padding-left: 16px }
2373 | .pl--6 { padding-left: 32px }
2374 | .pl--7 { padding-left: 64px }
2375 | .pl--8 { padding-left: 128px }
2376 | 2377 |

top↑

2378 |

PADDING-Y

2379 |
SYNTAX
2380 | 
# Base
2381 | 	py = padding-top; padding-bottom
2382 | 
2383 | # Modifiers
2384 | 	--0 = 0
2385 | 	--1 = 1px
2386 | 	--2 = 2px
2387 | 	--3 = 4px
2388 | 	--4 = 8px
2389 | 	--5 = 16px
2390 | 	--6 = 32px
2391 | 	--7 = 64px
2392 | 	--8 = 128px
2393 | 2394 |
CLASSES
2395 | 
.py--0 { padding-top: 0; padding-bottom: 0 }
2396 | .py--1 { padding-top: 1px; padding-bottom: 1px }
2397 | .py--2 { padding-top: 2px; padding-bottom: 2px }
2398 | .py--3 { padding-top: 4px; padding-bottom: 4px }
2399 | .py--4 { padding-top: 8px; padding-bottom: 8px }
2400 | .py--5 { padding-top: 16px; padding-bottom: 16px }
2401 | .py--6 { padding-top: 32px; padding-bottom: 32px }
2402 | .py--7 { padding-top: 64px; padding-bottom: 64px }
2403 | .py--8 { padding-top: 128px; padding-bottom: 128px }
2404 | 2405 |

top↑

2406 |

PADDING-X

2407 |
SYNTAX
2408 | 
# Base
2409 | 	px = padding-right; padding-left
2410 | 
2411 | # Modifiers
2412 | 	--0 = 0
2413 | 	--1 = 1px
2414 | 	--2 = 2px
2415 | 	--3 = 4px
2416 | 	--4 = 8px
2417 | 	--5 = 16px
2418 | 	--6 = 32px
2419 | 	--7 = 64px
2420 | 	--8 = 128px
2421 | 2422 |
CLASSES
2423 | 
.px--0 { padding-right: 0; padding-left: 0 }
2424 | .px--1 { padding-right: 1px; padding-left: 1px }
2425 | .px--2 { padding-right: 2px; padding-left: 2px }
2426 | .px--3 { padding-right: 4px; padding-left: 4px }
2427 | .px--4 { padding-right: 8px; padding-left: 8px }
2428 | .px--5 { padding-right: 16px; padding-left: 16px }
2429 | .px--6 { padding-right: 32px; padding-left: 32px }
2430 | .px--7 { padding-right: 64px; padding-left: 64px }
2431 | .px--8 { padding-right: 128px; padding-left: 128px }
2432 | 2433 |

top↑

2434 | 2435 |
2436 | 2437 |

WIDTH

2438 |

WIDTH

2439 |
SYNTAX
2440 | 
# Base
2441 | 	w = width
2442 | 
2443 | # Modifiers
2444 | 	--1 = 1px
2445 | 	--2 = 8px
2446 | 	--3 = 16px
2447 | 	--4 = 32px
2448 | 	--5 = 64px
2449 | 	--6 = 128px
2450 | 	--7 = 256px
2451 | 	--8 = 512px
2452 | 	--10p = 10%
2453 | 	--20p = 20%
2454 | 	--25p = 25%
2455 | 	--30p = 30%
2456 | 	--33p = 33.33333%
2457 | 	--40p = 40%
2458 | 	--50p = 50%
2459 | 	--60p = 60%
2460 | 	--66p = 66.66667%
2461 | 	--70p = 70%
2462 | 	--75p = 75%
2463 | 	--80p = 80%
2464 | 	--90p = 90%
2465 | 	--100p = 100%
2466 | 	--a = auto
2467 | 	--i = inherit
2468 | 2469 |
CLASSES
2470 | 
.w--1 { width: 1px }
2471 | .w--2 { width: 8px }
2472 | .w--3 { width: 16px }
2473 | .w--4 { width: 32px }
2474 | .w--5 { width: 64px }
2475 | .w--6 { width: 128px }
2476 | .w--7 { width: 256px }
2477 | .w--8 { width: 512px }
2478 | .w--10p { width: 10% }
2479 | .w--20p { width: 20% }
2480 | .w--25p { width: 25% }
2481 | .w--30p { width: 30% }
2482 | .w--33p { width: 33.33333% }
2483 | .w--40p { width: 40% }
2484 | .w--50p { width: 50% }
2485 | .w--60p { width: 60% }
2486 | .w--66p { width: 66.66667% }
2487 | .w--70p { width: 70% }
2488 | .w--75p { width: 75% }
2489 | .w--80p { width: 80% }
2490 | .w--90p { width: 90% }
2491 | .w--100p { width: 100% }
2492 | .w--a { width: auto }
2493 | .w--i { width: inherit }
2494 | 2495 |

top↑

2496 |

MIN-WIDTH

2497 |
SYNTAX
2498 | 
# Base
2499 | 	miw = min-width
2500 | 
2501 | # Modifiers
2502 | 	--1 = 1px
2503 | 	--2 = 8px
2504 | 	--3 = 16px
2505 | 	--4 = 32px
2506 | 	--5 = 64px
2507 | 	--6 = 128px
2508 | 	--7 = 256px
2509 | 	--8 = 512px
2510 | 	--10p = 10%
2511 | 	--20p = 20%
2512 | 	--25p = 25%
2513 | 	--30p = 30%
2514 | 	--33p = 33.33333%
2515 | 	--40p = 40%
2516 | 	--50p = 50%
2517 | 	--60p = 60%
2518 | 	--66p = 66.66667% 
2519 | 	--70p = 70%
2520 | 	--75p = 75%
2521 | 	--80p = 80%
2522 | 	--90p = 90%
2523 | 	--100p = 100%
2524 | 	--a = auto
2525 | 	--i = inherit
2526 | 2527 |
CLASSES
2528 | 
.miw--1 { min-width: 1px }
2529 | .miw--2 { min-width: 8px }
2530 | .miw--3 { min-width: 16px }
2531 | .miw--4 { min-width: 32px }
2532 | .miw--5 { min-width: 64px }
2533 | .miw--6 { min-width: 128px }
2534 | .miw--7 { min-width: 256px }
2535 | .miw--8 { min-width: 512px }
2536 | .miw--10p { min-width: 10% }
2537 | .miw--20p { min-width: 20% }
2538 | .miw--25p { min-width: 25% }
2539 | .miw--30p { min-width: 30% }
2540 | .miw--33p { min-width: 33.33333% }
2541 | .miw--40p { min-width: 40% }
2542 | .miw--50p { min-width: 50% }
2543 | .miw--60p { min-width: 60% }
2544 | .miw--66p { min-width: 66.66667% }
2545 | .miw--70p { min-width: 70% }
2546 | .miw--75p { min-width: 75% }
2547 | .miw--80p { min-width: 80% }
2548 | .miw--90p { min-width: 90% }
2549 | .miw--100p { min-width: 100% }
2550 | .miw--a { min-width: auto }
2551 | .miw--i { min-width: inherit }
2552 | 2553 |

top↑

2554 |

MAX-WIDTH

2555 |
SYNTAX
2556 | 
# Base
2557 | 	maw = max-width
2558 | 
2559 | # Modifiers
2560 | 	--1 = 1px
2561 | 	--2 = 8px
2562 | 	--3 = 16px
2563 | 	--4 = 32px
2564 | 	--5 = 64px
2565 | 	--6 = 128px
2566 | 	--7 = 256px
2567 | 	--8 = 512px
2568 | 	--10p = 10%
2569 | 	--20p = 20%
2570 | 	--25p = 25%
2571 | 	--30p = 30%
2572 | 	--33p = 33.333333%
2573 | 	--40p = 40%
2574 | 	--50p = 50%
2575 | 	--60p = 60%
2576 | 	--66p = 66.666667% 
2577 | 	--70p = 70%
2578 | 	--75p = 75%
2579 | 	--80p = 80%
2580 | 	--90p = 90%
2581 | 	--100p = 100%
2582 | 	--n = none
2583 | 	--i = inherit
2584 | 2585 |
CLASSES
2586 | 
.maw--1 { max-width: 1px }
2587 | .maw--2 { max-width: 8px }
2588 | .maw--3 { max-width: 16px }
2589 | .maw--4 { max-width: 32px }
2590 | .maw--5 { max-width: 64px }
2591 | .maw--6 { max-width: 128px }
2592 | .maw--7 { max-width: 256px }
2593 | .maw--8 { max-width: 512px }
2594 | .maw--10p { max-width: 10% }
2595 | .maw--20p { max-width: 20% }
2596 | .maw--25p { max-width: 25% }
2597 | .maw--30p { max-width: 30% }
2598 | .maw--33p { max-width: 33.33333% }
2599 | .maw--40p { max-width: 40% }
2600 | .maw--50p { max-width: 50% }
2601 | .maw--60p { max-width: 60% }
2602 | .maw--66p { max-width: 66.66667% }
2603 | .maw--70p { max-width: 70% }
2604 | .maw--75p { max-width: 75% }
2605 | .maw--80p { max-width: 80% }
2606 | .maw--90p { max-width: 90% }
2607 | .maw--100p { max-width: 100% }
2608 | .maw--n { max-width: none }
2609 | .maw--i { max-width: inherit }
2610 | 2611 |

top↑

2612 |
2613 |

HEIGHT

2614 |

HEIGHT

2615 |
SYNTAX
2616 | 
# Base
2617 | 	h = height
2618 | 
2619 | # Modifiers
2620 | 	--0 = 0
2621 | 	--1 = 1px
2622 | 	--2 = 8px
2623 | 	--3 = 16px
2624 | 	--4 = 32px
2625 | 	--5 = 64px
2626 | 	--6 = 128px
2627 | 	--7 = 256px
2628 | 	--8 = 512px
2629 | 	--25p = 25%
2630 | 	--50p = 50%
2631 | 	--75p = 75%
2632 | 	--100p = 100%
2633 | 	--25vh = a quarter of viewport height
2634 | 	--50vh = half of viewport height
2635 | 	--75vh = three-quarter of viewport height
2636 | 	--100vh = full viewport height
2637 | 	--a = auto
2638 | 	--i = inherit
2639 | 2640 |
CLASSES
2641 | 
.h--0 { height: 0 }
2642 | .h--1 { height: 1px }
2643 | .h--2 { height: 8px }
2644 | .h--3 { height: 16px }
2645 | .h--4 { height: 32px }
2646 | .h--5 { height: 64px }
2647 | .h--6 { height: 128px }
2648 | .h--7 { height: 256px }
2649 | .h--8 { height: 512px }
2650 | .h--25p { height: 25% }
2651 | .h--50p { height: 50% }
2652 | .h--75p { height: 75% }
2653 | .h--100p { height: 100% }
2654 | .h--25vh { height: 25vh }
2655 | .h--50vh { height: 50vh }
2656 | .h--75vh { height: 75vh }
2657 | .h--100vh { height: 100vh }
2658 | .h--a { height: auto }
2659 | .h--i { height: inherit }
2660 | 2661 |

top↑

2662 |

MIN-HEIGHT

2663 |
SYNTAX
2664 | 
# Base
2665 | 	mih = min-height
2666 | 
2667 | # Modifiers
2668 | 	--0 = 0
2669 | 	--1 = 1px
2670 | 	--2 = 8px
2671 | 	--3 = 16px
2672 | 	--4 = 32px
2673 | 	--5 = 64px
2674 | 	--6 = 128px
2675 | 	--7 = 256px
2676 | 	--8 = 512px
2677 | 	--25p = 25%
2678 | 	--50p = 50%
2679 | 	--75p = 75%
2680 | 	--100p = 100%
2681 | 	--25vh = a quarter of viewport height
2682 | 	--50vh = half of viewport height
2683 | 	--75vh = three-quarter of viewport height
2684 | 	--100vh = full viewport height
2685 | 	--a = auto
2686 | 	--i = inherit
2687 | 2688 |
CLASSES
2689 | 
.mih--0 { min-height: 0 }
2690 | .mih--1 { min-height: 1px }
2691 | .mih--2 { min-height: 8px }
2692 | .mih--3 { min-height: 16px }
2693 | .mih--4 { min-height: 32px }
2694 | .mih--5 { min-height: 64px }
2695 | .mih--6 { min-height: 128px }
2696 | .mih--7 { min-height: 256px }
2697 | .mih--8 { min-height: 512px }
2698 | .mih--25p { min-height: 25% }
2699 | .mih--50p { min-height: 50% }
2700 | .mih--75p { min-height: 75% }
2701 | .mih--100p { min-height: 100% }
2702 | .mih--25vh { min-height: 25vh }
2703 | .mih--50vh { min-height: 50vh }
2704 | .mih--75vh { min-height: 75vh }
2705 | .mih--100vh { min-height: 100vh }
2706 | .mih--a { min-height: auto }
2707 | .mih--i { min-height: inherit }
2708 | 2709 |

top↑

2710 |

MAX-HEIGHT

2711 |
SYNTAX
2712 | 
# Base
2713 | 	mah = max-height
2714 | 
2715 | # Modifiers
2716 | 	--1 = 1px
2717 | 	--2 = 8px
2718 | 	--3 = 16px
2719 | 	--4 = 32px
2720 | 	--5 = 64px
2721 | 	--6 = 128px
2722 | 	--7 = 256px
2723 | 	--8 = 512px
2724 | 	--25p = 25%
2725 | 	--50p = 50%
2726 | 	--75p = 75%
2727 | 	--100p = 100%
2728 | 	--25vh = a quarter of viewport height
2729 | 	--50vh = half of viewport height
2730 | 	--75vh = three-quarter of viewport height
2731 | 	--100vh = full viewport height
2732 | 	--n = none
2733 | 	--i = inherit
2734 | 2735 |
CLASSES
2736 | 
.mah--1 { max-height: 1px }
2737 | .mah--2 { max-height: 8px }
2738 | .mah--3 { max-height: 16px }
2739 | .mah--4 { max-height: 32px }
2740 | .mah--5 { max-height: 64px }
2741 | .mah--6 { max-height: 128px }
2742 | .mah--7 { max-height: 256px }
2743 | .mah--8 { max-height: 512px }
2744 | .mah--25p { max-height: 25% }
2745 | .mah--50p { max-height: 50% }
2746 | .mah--75p { max-height: 75% }
2747 | .mah--100p { max-height: 100% }
2748 | .mah--25vh { max-height: 25vh }
2749 | .mah--50vh { max-height: 50vh }
2750 | .mah--75vh { max-height: 75vh }
2751 | .mah--100vh { max-height: 100vh }
2752 | .mah--n { max-height: none }
2753 | .mah--i { max-height: inherit }
2754 | 2755 |

top↑

2756 |
2757 |

OVERFLOW

2758 |

OVERFLOW

2759 |
SYNTAX
2760 | 
# Base
2761 | 	of = overflow
2762 | 	ofx = overflow-x
2763 | 	ofy = overflow-y
2764 | 
2765 | # Modifiers
2766 | 	--a = auto
2767 | 	--hid = hidden
2768 | 	--sl = scrolll
2769 | 	--v = visible
2770 | 
2771 | # Note
2772 | 	You can use 'of--a' as a clearfix.
2773 | 	https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use
2774 | 2775 |
CLASSES
2776 | 
.of--a { overflow: auto }
2777 | .of--hid { overflow: hidden }
2778 | .of--sl { overflow: scroll }
2779 | .of--v { overflow: visible }
2780 | 
2781 | .ofx--a { overflow-x: auto }
2782 | .ofx--hid { overflow-x: hidden }
2783 | .ofx--sl { overflow-x: scroll }
2784 | .ofx--v { overflow-x: visible }
2785 | 
2786 | .ofy--a { overflow-y: auto }
2787 | .ofy--hid { overflow-y: hidden }
2788 | .ofy--sl { overflow-y: scroll }
2789 | .ofy--v { overflow-y: visible }
2790 | 2791 |

top↑

2792 |

RESIZE

2793 |
SYNTAX
2794 | 
# Base
2795 | 	re = resize
2796 | 
2797 | # Modifiers
2798 | 	--bh = both
2799 | 	--n = none
2800 | 	--x = horizontal
2801 | 	--y = vertical
2802 |
CLASSES
2803 | 
.re--bh { resize: both }
2804 | .re--n { resize: none }
2805 | .re--x { resize: horizontal }
2806 | .re--y { resize: vertical }
2807 |

top↑

2808 |
2809 |

LIST-STYLE

2810 |

LIST-STYLE

2811 |
SYNTAX
2812 | 
# Base
2813 | 	lsst = list-style
2814 | 
2815 | # Modifiers
2816 | 	--ins = inside
2817 | 	--n = none
2818 | 	--sq = square
2819 | 	--i = inherit
2820 |
CLASSES
2821 | 
.lsst--ins { list-style: inside }
2822 | .lsst--n { list-style: none }
2823 | .lsst--sq { list-style: square }
2824 | .lsst--i { list-style: inherit }
2825 | 2826 |

top↑

2827 |
2828 |

TABLE

2829 |

TABLE-LAYOUT

2830 |
SYNTAX
2831 | 
# Base
2832 | 	tbllt = table-layout
2833 | 
2834 | # Modifiers
2835 | 	--a = auto
2836 | 	--fix = fixed
2837 |
CLASSES
2838 | 
.tbllt--a { table-layout: auto }
2839 | .tbllt--fix { table-layout: fixed }
2840 |

top↑

2841 |

BORDER-COLLAPSE

2842 |
SYNTAX
2843 | 
# Base
2844 | 	brcoll = border-collapse
2845 | 
2846 | # Modifiers
2847 | 	--coll = collapse
2848 | 	--sep = separate
2849 | 	--i = inherit
2850 |
CLASSES
2851 | 
.brcoll--coll { border-collapse: collapse }
2852 | .brcoll--sep { border-collapse: separate }
2853 | .brcoll--i { border-collapse: inherit }
2854 | 2855 |

top↑

2856 |

BORDER-SPACING

2857 |
SYNTAX
2858 | 
# Base
2859 | 	brsp = border-spacing
2860 | 
2861 | # Modifiers
2862 | 	--0 = 0
2863 | 	--1 = 1px
2864 | 	--2 = 2px
2865 | 	--3 = 4px
2866 | 	--4 = 8px
2867 | 	--5 = 16px
2868 | 	--6 = 32px
2869 | 	--7 = 64px
2870 | 	--8 = 128px
2871 | 	--i = inherit
2872 | 2873 |
CLASSES
2874 | 
.brsp--0 { border-spacing: 0 }
2875 | .brsp--1 { border-spacing: 1px }
2876 | .brsp--2 { border-spacing: 2px }
2877 | .brsp--3 { border-spacing: 4px }
2878 | .brsp--4 { border-spacing: 8px }
2879 | .brsp--5 { border-spacing: 16px }
2880 | .brsp--6 { border-spacing: 32px }
2881 | .brsp--7 { border-spacing: 64px }
2882 | .brsp--8 { border-spacing: 128px }
2883 | .brsp--i { border-spacing: inherit }
2884 | 2885 |

top↑

2886 |
2887 |

VERTICAL-ALIGN

2888 |

VERTICAL-ALIGN

2889 |
SYNTAX
2890 | 
# Base
2891 | 	vlan = vertical-align
2892 | 
2893 | # Modifiers
2894 | 	--t = top
2895 | 	--b = bottom    
2896 | 	--bln = baseline
2897 | 	--mid = middle
2898 |
CLASSES
2899 | 
.vlan--t { vertical-align: top }
2900 | .vlan--b { vertical-align: bottom }
2901 | .vlan--bln { vertical-align: baseline }
2902 | .vlan--mid { vertical-align: middle }
2903 | 2904 |

top↑

2905 |
2906 |

TEXT-ALIGNMENT & DECORATION

2907 |

DIRECTION

2908 |
SYNTAX
2909 | 
# Base
2910 | 	dn = direction
2911 | 
2912 | # Modifiers
2913 | 	--ltr = ltr (left to right)
2914 | 	--rtl = rtl (right to left)
2915 | 	--i = inherit
2916 | 2917 |
CLASSES
2918 | 
.dn--ltr { direction: ltr }
2919 | .dn--rtl { direction: rtl }
2920 | .dn--i { direction: inherit }
2921 | 2922 | 2923 |

top↑

2924 |

TEXT-ALIGN

2925 |
SYNTAX
2926 | 
# Base
2927 | 	txtan = text-align
2928 | 
2929 | # Modifiers
2930 | 	--r = right
2931 | 	--l = left
2932 | 	--ctr = center
2933 | 	--j = justify
2934 | 	--i = inherit
2935 | 2936 | 2937 |
CLASSES
2938 | 
.txtan--r { text-align: right }
2939 | .txtan--l { text-align: left }
2940 | .txtan--ctr { text-align: center }
2941 | .txtan--j { text-align: justify }
2942 | .txtan--i { text-align: inherit }
2943 | 2944 |

top↑

2945 | 2946 |

TEXT-INDENT

2947 |
SYNTAX
2948 | 
# Base
2949 | 	txtit = text-indent
2950 | 
2951 | # Modifiers
2952 | 	--1 = 1px
2953 | 	--2 = 2px
2954 | 	--3 = 4px
2955 | 	--4 = 8px
2956 | 	--5 = 16px
2957 | 	--6 = 32px
2958 | 	--7 = 64px
2959 | 	--8 = 128px
2960 | 2961 |
CLASSES
2962 | 
.txtit--1 { text-indent: 1px }
2963 | .txtit--2 { text-indent: 2px }
2964 | .txtit--3 { text-indent: 4px }
2965 | .txtit--4 { text-indent: 8px }
2966 | .txtit--5 { text-indent: 16px }
2967 | .txtit--6 { text-indent: 32px }
2968 | .txtit--7 { text-indent: 64px }
2969 | .txtit--8 { text-indent: 128px }
2970 | 2971 |

top↑

2972 | 2973 | 2974 |

TEXT-TRANSFORM

2975 |
SYNTAX
2976 | 
# Base
2977 | 	txttm = text-transform
2978 | 
2979 | # Modifiers
2980 | 	--cap = capitalize
2981 | 	--lc = lowercase
2982 | 	--n = none
2983 | 	--uc = uppercase
2984 | 	--i = inherit
2985 | 2986 | 2987 |
CLASSES
2988 | 
.txttm--cap { text-transform: capitalize }
2989 | .txttm--lc { text-transform: lowercase }
2990 | .txttm--n { text-transform: none }
2991 | .txttm--uc { text-transform: uppercase }
2992 | .txttm--i { text-transform: inherit }
2993 | 2994 |

top↑

2995 | 2996 | 2997 |

TEXT-DECORATION

2998 |
SYNTAX
2999 | 
# Base
3000 | 	txtdec = text-decoration
3001 | 	txtdechvr = text-decoration:hover
3002 | 
3003 | # Modifiers
3004 | 	--n = none
3005 | 	--u = underline
3006 |
CLASSES
3007 | 
.txtdec--n { text-decoration: none }
3008 | .txtdec--u { text-decoration: underline }
3009 | .txtdechvr--n:hover { text-decoration: none }
3010 | .txtdechvr--u:hover { text-decoration: underline }
3011 |

top↑

3012 |
3013 |

TEXT-SPACING & COLOR

3014 |

LINE-HEIGHT

3015 |
SYNTAX
3016 | 
# Base
3017 | 	lnh = line-height
3018 | 
3019 | # Modifiers
3020 | 	--1 = 15px | related to .fts--1 { font-size: 10px }
3021 | 	--2 = 19.5px | related to .fts--2 { font-size: 13px }
3022 | 	--3 = 24px | related to .fts--3 { font-size: 16px }
3023 | 	--4	= 30px | related to .fts--4 { font-size: 20px }
3024 | 	--5 = 37.5px | related to .fts--5 { font-size: 25px }
3025 | 	--6 = 46.5px | related to .fts--6 { font-size: 31px }
3026 | 	--7 = 58.5px | related to .fts--7 { font-size: 39px }
3027 | 	--8	= 73.5px | related to .fts--8 { font-size: 49px }
3028 | 	--nl = normal
3029 | 	--i = inherit
3030 |
CLASSES
3031 | 
.lnh--1 { line-height: 15px }
3032 | .lnh--2 { line-height: 19.5px }
3033 | .lnh--3 { line-height: 24px }
3034 | .lnh--4 { line-height: 30px }
3035 | .lnh--5 { line-height: 37.5px }
3036 | .lnh--6 { line-height: 46.5px }
3037 | .lnh--7 { line-height: 58.5px }
3038 | .lnh--8 { line-height: 73.5px }
3039 | .lnh--nl { line-height: normal }
3040 | .lnh--i { line-height: inherit }
3041 |

top↑

3042 |

WORD-SPACING

3043 |
SYNTAX
3044 | 
# Base
3045 | 	wdsp = word-spacing
3046 | 
3047 | # Modifiers
3048 | 	--1 = 1px
3049 | 	--2 = 2px
3050 | 	--3 = 4px
3051 | 	--4 = 8px
3052 | 	--5 = 16px
3053 | 	--6 = 32px
3054 | 	--7 = 64px
3055 | 	--8 = 128px
3056 | 	--i = inherit
3057 | 	--nl = normal
3058 | 3059 |
CLASSES
3060 | 
.wdsp--1 { word-spacing: 1px }
3061 | .wdsp--2 { word-spacing: 2px }
3062 | .wdsp--3 { word-spacing: 4px }
3063 | .wdsp--4 { word-spacing: 8px }
3064 | .wdsp--5 { word-spacing: 16px }
3065 | .wdsp--6 { word-spacing: 32px }
3066 | .wdsp--7 { word-spacing: 64px }
3067 | .wdsp--8 { word-spacing: 128px }
3068 | .wdsp--i { word-spacing: inherit }
3069 | .wdsp--nl { word-spacing: normal }
3070 | 3071 |

top↑

3072 |

LETTER-SPACING

3073 |
SYNTAX
3074 | 
# Base
3075 | 	lrsp = letter-spacing
3076 | 
3077 | # Modifiers
3078 | 	--1 = .25px
3079 | 	--2 = .5px
3080 | 	--3 = .75px
3081 | 	--4	= 1px
3082 | 	--5 = 1.25px
3083 | 	--6 = 1.5px
3084 | 	--7 = 1.75px
3085 | 	--8	= 2px
3086 | 	--n1 = -.25px
3087 | 	--n2 = -.5px
3088 | 	--n3 = -.75px
3089 | 	--n4 = -1px
3090 | 	--n5 = -1.25px
3091 | 	--n6 = -1.5px
3092 | 	--n7 = -1.75px
3093 | 	--n8 = -2px
3094 | 	--i = inherit
3095 | 	--nl = normal
3096 |
CLASSES
3097 | 
.lrsp--1 { letter-spacing: .25px }
3098 | .lrsp--2 { letter-spacing: .5px }
3099 | .lrsp--3 { letter-spacing: .75px }
3100 | .lrsp--4 { letter-spacing: 1px }
3101 | .lrsp--5 { letter-spacing: 1.25px }
3102 | .lrsp--6 { letter-spacing: 1.5px }
3103 | .lrsp--7 { letter-spacing: 1.75px }
3104 | .lrsp--8 { letter-spacing: 2px }
3105 | .lrsp--n1 { letter-spacing: -.25px }
3106 | .lrsp--n2 { letter-spacing: -.5px }
3107 | .lrsp--n3 { letter-spacing: -.75px }
3108 | .lrsp--n4 { letter-spacing: -1px }
3109 | .lrsp--n5 { letter-spacing: -1.25px }
3110 | .lrsp--n6 { letter-spacing: -1.5px }
3111 | .lrsp--n7 { letter-spacing: -1.75px }
3112 | .lrsp--n8 { letter-spacing: -2px }
3113 | .lrsp--i { letter-spacing: inherit }
3114 | .lrsp--nl { letter-spacing: normal }
3115 | 3116 |

top↑

3117 |

WHITE-SPACE

3118 |
SYNTAX
3119 | 
# Base
3120 | 	whsp = white-space
3121 | 
3122 | # Modifiers
3123 | 	--nl = normal
3124 | 	--n = nowrap
3125 | 	--pre = pre
3126 | 	--prewp = pre-wrap
3127 | 	--i = inherit
3128 | 3129 |
CLASSES
3130 | 
.whsp--nl { white-space: normal }
3131 | .whsp--n { white-space: nowrap }
3132 | .whsp--pre { white-space: pre }
3133 | .whsp--prewp { white-space: pre-wrap }
3134 | .whsp--i { white-space: inherit }
3135 | 3136 |

top↑

3137 |

WORD-BREAK

3138 |
SYNTAX
3139 | 
# Base
3140 | 	wdbrk = word-break
3141 | 
3142 | # Modifiers
3143 | 	--nl = normal
3144 | 	--kpal = keep-all
3145 | 	--brkal = break-all
3146 | 3147 |
CLASSES
3148 | 
.wdbrk--nl { word-break: normal }
3149 | .wdbrk--kpal { word-break: keep-all }
3150 | .wdbrk--brkal { word-break: break-all }
3151 | 3152 | 3153 | 3154 |

top↑

3155 |

WORD-WRAP

3156 |
SYNTAX
3157 | 
# Base
3158 | 	wdwp = word-wrap
3159 | 
3160 | # Modifiers
3161 | 	--brkwd = break-wordd
3162 | 	--i = inherit
3163 | 	--nl = normal
3164 | 3165 |
CLASSES
3166 | 
.wdwp--brkwd { word-wrap: break-word }
3167 | .wdwp--i { word-wrap: inherit }
3168 | .wdwp--nl { word-wrap: normal }
3169 | 3170 |

top↑

3171 |

COLOR

3172 |
SYNTAX
3173 | 
# Base
3174 | 	c = color
3175 | 	chvr = color:hover
3176 | 
3177 | # Modifiers
3178 | 	--gy1 = #fafafa (grey)
3179 | 	--gy2 = #ededed (grey)
3180 | 	--gy3 = #dddddd (grey)
3181 | 	--gy4 = #b1b1b1 (grey)
3182 | 	--gy5 = #878787 (grey)
3183 | 	--gy6 = #6a6a6a (grey)
3184 | 	--gy7 = #4d4d4d (grey)
3185 | 	--gy8 = #303030 (grey)
3186 | 	--rd1 = #c6262e (red)
3187 | 	--gn1 = #68b723 (green)
3188 | 	--bl1 = #3689e6 (blue)
3189 | 	--yl1 = #f9c440 (yellow)
3190 | 	--bk1 = #000000 (black)
3191 | 	--wh1 = #ffffff (white)
3192 | 	--tp = transparent
3193 | 	--i = inherit
3194 |
CLASSES
3195 | 
.c--gy1 { color: #fafafa }
3196 | .c--gy2 { color: #ededed }
3197 | .c--gy3 { color: #dddddd }
3198 | .c--gy4 { color: #b1b1b1 }
3199 | .c--gy5 { color: #878787 }
3200 | .c--gy6 { color: #6a6a6a }
3201 | .c--gy7 { color: #4d4d4d }
3202 | .c--gy8 { color: #303030 }
3203 | .c--rd1 { color: #c6262e }
3204 | .c--gn1 { color: #68b723 }
3205 | .c--bl1 { color: #3689e6 }
3206 | .c--yl1 { color: #f9c440 }
3207 | .c--bk1 { color: #000000 }
3208 | .c--wh1 { color: #ffffff }
3209 | .c--tp { color: transparent }
3210 | .c--i { color: inherit }
3211 | 
3212 | .chvr--gy1:hover { color: #fafafa }
3213 | .chvr--gy2:hover { color: #ededed }
3214 | .chvr--gy3:hover { color: #dddddd }
3215 | .chvr--gy4:hover { color: #b1b1b1 }
3216 | .chvr--gy5:hover { color: #878787 }
3217 | .chvr--gy6:hover { color: #6a6a6a }
3218 | .chvr--gy7:hover { color: #4d4d4d }
3219 | .chvr--gy8:hover { color: #303030 }
3220 | .chvr--rd1:hover { color: #c6262e }
3221 | .chvr--gn1:hover { color: #68b723 }
3222 | .chvr--bl1:hover { color: #3689e6 }
3223 | .chvr--yl1:hover { color: #f9c440 }
3224 | .chvr--bk1:hover { color: #000000 }
3225 | .chvr--wh1:hover { color: #ffffff }
3226 | .chvr--tp:hover { color: transparent }
3227 | .chvr--i:hover { color: inherit }
3228 |
3229 | 3230 | 3231 |

top↑

3232 |
3233 |

FONT

3234 |

FONT-FAMILY

3235 |
SYNTAX
3236 | 
# Base
3237 | 	ftfam = font-family
3238 | 
3239 | # Modifiers
3240 | 	--sssrf =  sans-serif
3241 | 	--mosp =  monospace
3242 | 	--i = inherit
3243 | 
3244 | # Note
3245 | 	Are you sure about changing the typeface using media queries?
3246 |
CLASSES
3247 | 3248 | 
.ftfam--sssrf { font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif }
3249 | .ftfam--mosp { font-family: "SFMono-Regular",Menlo,Consolas,"Lucida Console","Liberation Mono","Courier New",monospace }
3250 | .ftfam--i { font-family: inherit }
3251 | 3252 |

top↑

3253 |

FONT-SIZE

3254 |
SYNTAX
3255 | 
# Base
3256 | 	fts = font-size
3257 | 
3258 | # Modifiers
3259 | 	--1 = 10px
3260 | 	--2 = 13px
3261 | 	--3 = 16px
3262 | 	--4 = 20px
3263 | 	--5 = 25px
3264 | 	--6 = 31px
3265 | 	--7 = 39px
3266 | 	--8 = 49px
3267 | 	--i = inherit
3268 | 
3269 | # Note
3270 | 	Based on https://type-scale.com/?size=16&scale=1.250&text=The%20Awesome%20Brevis&font=Open%20Sans
3271 | 3272 |
CLASSES
3273 | 
.fts--1 { font-size: 13px }
3274 | .fts--2 { font-size: 16px }
3275 | .fts--3 { font-size: 20px }
3276 | .fts--4 { font-size: 25px }
3277 | .fts--5 { font-size: 31px }
3278 | .fts--6 { font-size: 39px }
3279 | .fts--7 { font-size: 49px }
3280 | .fts--8 { font-size: 61px }
3281 | fts--i { font-size: inherit }
3282 |

top↑

3283 |

FONT-WEIGHT

3284 |
SYNTAX
3285 | 
# Base
3286 | 	ftwt = font-weight
3287 | 
3288 | # Modifiers
3289 | 	--1 =  100
3290 | 	--2 =  200
3291 | 	--3 =  300
3292 | 	--4 =  400 (normal)
3293 | 	--5 =  500
3294 | 	--6 =  600
3295 | 	--7 =  700 (bold)
3296 | 	--8 =  800
3297 | 	--i = inherit
3298 |
CLASSES
3299 | 
.ftwt--1 { font-weight: 100 }
3300 | .ftwt--2 { font-weight: 200 }
3301 | .ftwt--3 { font-weight: 300 }
3302 | .ftwt--4 { font-weight: 400 }
3303 | .ftwt--5 { font-weight: 500 }
3304 | .ftwt--6 { font-weight: 600 }
3305 | .ftwt--7 { font-weight: 700 } 
3306 | .ftwt--8 { font-weight: 800 }
3307 | .ftwt--i { font-weight: inherit }
3308 | 3309 |

top↑

3310 |

FONT-STYLE

3311 |
SYNTAX
3312 | 
# Base
3313 | 	ftst = font-style
3314 | 
3315 | # Modifiers
3316 | 	--ic = italic
3317 | 	--nl = normal
3318 | 	--i = inherit
3319 |
CLASSES
3320 | 
.ftst--ic { font-style: italic }
3321 | .ftst--nl { font-style: normal }
3322 | .ftst--i { font-style: inherit }
3323 |

top↑

3324 | 3325 | 3326 |
3327 | 3328 |

POINTER EVENTS

3329 |

POINTER EVENTS

3330 |
SYNTAX
3331 | 
# Base
3332 | 	ptres = pointer-events
3333 | 
3334 | # Modifiers
3335 | 	--a = auto
3336 | 	--n = none
3337 |
CLASSES
3338 | 
.ptres--a { pointer-events: auto }
3339 | .ptres--n { pointer-events: none }
3340 |

top↑

3341 | 3342 | 3343 |
3344 | 3345 | 3346 |

Naming Convention

3347 | 3348 | 3349 |

The CSS selector syntax is made of two or three parts: base--modifier-media. The last part - media - is optional, since it controls the media query extension. The naming convention used by Brevis for its base and modifier is short, simple and logical. It follows just two rules.

3350 | 3351 |
    3352 |
  1. 3353 |

    If the CSS property name is made of one word, Brevis uses its first letter. Like display becomes d. If the first letter is taken, Brevis uses the first and last letter of the word, or the first few letters of it. Like flex becomes fx and position becomes pos. 3354 | 3355 | If the first and last letters are taken, Brevis adds one or more letters from the middle of the word. Like break becomes brk.

    3356 |
    2. 3357 |
  2. 3358 |

    If the CSS property name is made of two or more words, Brevis uses the existing abbreviation from each word and join them. Like margin-top becomes mt. If there's no abbreviation or it's missing for a word, Brevis applies rules #1 and join them. Like flex-basis becomes fxbs.

    3359 |
    3. 3360 |
3361 | 3362 |

Exceptions exist when there's a well known/better abbreviation. Like:

3363 | 
absolute = abs
3364 | background = bg
3365 | center = ctr
3366 | clear = clr
3367 | z-index = z (the exception here is z-index being treated as one word)
3368 | 3369 | 3370 |

MODIFIERS

3371 | 3372 |

A modifier is the value of a property, and it's identified by double hyphens -- followed by the abbreviation. For example:

3373 | 3374 | 
.txtdec--n = { text-decoration: none }
3375 | 3376 |

The above property has the modifier --n with a respectively value of none.

3377 | 3378 |

The modifiers follow the same naming convention stated for the base, with two additions.

3379 | 3380 |
    3381 |
  1. 3382 |

    A modifier can have the same abbreviation as the base, as long as the meaning of the abbreviation is the same or very similar. For example --t, --fx and --v are respectively top, flex and visibility|visible for both base and modifier.

    3383 |
    2. 3384 |
  2. 3385 |

    A modifier can group values within similar context or meaning. For example, the modifier --n represents no, none, nowrap or no-repeat as value.

    3386 |
    3. 3387 |
3388 | 3389 |

Most properties with numerical values have modifiers scaling from 1 to 8. For example:

3390 | 3391 | 
.h--0 { height: 0 }
3392 | .h--1 { height: 1px }
3393 | .h--2 { height: 8px }
3394 | .h--3 { height: 16px }
3395 | .h--4 { height: 32px }
3396 | .h--5 { height: 64px }
3397 | .h--6 { height: 128px }
3398 | .h--7 { height: 256px }
3399 | .h--8 { height: 512px }
3400 | 3401 |

The 0 is not part of any scale, but it's presented when appropriate.

3402 | 3403 |

MEDIA QUERIES

3404 | 3405 |

You can create responsive websites using the media queries extension. The media extension is identified by a single hyphen -, followed by s, m or l. Respectively targeting small, medium or large devices. The extensions are available for all classes. And that's why we call selector-first design, where each selector is responsive. This approach allows you to have a very granular responsive control. The breakpoints are:

3406 | 3407 | 
-l = @media (max-width: 1280px)
3408 | -m = @media (max-width: 840px)
3409 | -s = @media (max-width: 400px)
3410 | 3411 |

For exmaple .maw--6-l, .w--50p-m and .brrad--0-s are translated into:

3412 | 3413 | 
@media (max-width: 1280px) {
3414 | 	.maw--6-l { max-width: 256px }
3415 | }
3416 | 
3417 | @media (max-width: 840px) {
3418 | 	.w--50p-m { width: 50% }
3419 | }
3420 | 
3421 | @media (max-width: 400px) {
3422 | 	.brrad--0-s { border-radius: 0 }
3423 | }
3424 | 3425 |

The media queries don't follow the naming convention above, because there are only three extensions -s, -m and -l, which are universally recognised as a representation of the breakpoints. So, we stick with them.

3426 | 3427 |

If you want to learn more about it, take a look at brevis.css source file and see how the naming convention comes to live.

3428 | 3429 |

top↑

3430 | 3431 |
3432 | 3433 | 3434 |

Scale Pattern

3435 |

Brevis uses three 8pt scales for properties with numerical values:

3436 | 3437 | 8px,16px,24px,32px,40px,48px,56px,64px 3438 | 3439 |

Is used by top, right, bottom, left, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom and padding-left.

3440 | 3441 | 1px,2px,4px,8px,16px,32px,64px,128px 3442 | 3443 |

Is used by z-index, border-spacing, border-width, border-radius, text-indent and word-spacing.

3444 | 3445 | 1px,8px,16px,32px,64px,128px,256px,512px 3446 | 3447 |

Is used by flex-basis, width, min-width, max-width, height, min-height and max-height.

3448 | 3449 | 3450 | 3451 |

Order, opacity, z-index, line-height, letter-spacing, font-size and font-weight properties use their own custom scale.

3452 | 3453 |

Note that some the scales can have negative values when the numerical modifier is preceded by --n. For example:

3454 | 3455 | .mt--n2 { margin-top: -16px } 3456 | 3457 |

top↑

3458 | 3459 | 3460 |
3461 | 3462 |

Colour Palette

3463 | 3464 |

Colour is a very opinionated subject, and because of that, Brevis has a minimal palette. The current palettes are for grey and contextual colours.

3465 | 3466 | 3467 | 3468 | 3469 | 3470 | 3471 | 3472 | 3473 | 3474 | 3475 | 3476 | 3477 | 3478 | 3479 | 3480 | 3481 | 3482 | 3483 | 3484 | 3485 | 3486 | 3487 | 3488 | 3489 | 3490 | 3491 | 3492 | 3493 | 3494 | 3495 | 3496 | 3497 | 3498 | 3499 | 3500 | 3501 | 3502 | 3503 | 3504 | 3505 | 3506 | 3507 |
Grey ScaleContextual Colours
#fafafa gy1 = #fafafa#c8102e rd1 = #c8102e
#ededed gy2 = #ededed#006eb6 bl1 = #006eb6
#dddddd gy3 = #dddddd#009f4d gn1 = #009f4d
#b1b1b1 gy4 = #b1b1b1#ffc428 yl1 = #ffc428
#878787 gy5 = #878787#000000 bk1 = #000000
#6a6a6a gy6 = #6a6a6a#ffffff wh1 = #ffffff
#4d4d4d gy7 = #4d4d4d
#303030 gy8 = #303030
3508 | 3509 | 3510 |

The colours also follow the naming convention. However, the contextual colours have a plus. Note that their names end with the number one. So that, any additional colour can use the naming convention. Example, if you want to extend the red colour, you start creating rd2, rd3 and so on.

3511 | 3512 | 3513 |

top↑

3514 | 3515 | 3516 |
3517 | 3518 | 3537 | 3538 | 3539 | -------------------------------------------------------------------------------- /docs/examples.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Examples | Brevis CSS 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 | 30 |
31 |
32 |
33 |

Examples

34 |

A growing collection of snippets that are ready to use as is.

35 |
36 |
37 | 38 | starter page screenshot 39 |

Starter

40 | 41 |

Simple one-page responsive template to help you quickly get started with Brevis.

42 |
43 |
44 | 45 | holy grail template screenshot 46 |

Holy Grail

47 | 48 |

A responsive semantic W3C valid holy grail template.

49 |
50 |
51 | 52 | landing page screenshot 53 |

Landing

54 | 55 |

A responsive landing page with multiple use capabilities.

56 |
57 |
58 | 59 | login form screenshot 60 |

Login

61 | 62 |

A simple login form.

63 |
64 |
65 | 66 | 67 | 68 |

Hello Buttons

69 | 70 | 71 |

How to build buttons the Brevis way.

72 | 73 |
74 |
75 |
76 | 77 | 95 | 96 | -------------------------------------------------------------------------------- /docs/examples/hello_button/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello Button! | Brevis Examples 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

Hello Button!

17 | 18 |

While the majority of CSS toolkits use buttons to show off their styles, we will show you how to build them from scratch.

19 | 20 |

Let's start our button with sizing. First we will give it a vertical padding.

21 | HTML 22 | 
<button class="py--1">Hello Button!</button>
23 | 24 | Preview 25 |

26 | 27 |

We could give it some horizontal padding, but it's ok for now. Next, let's colour it up!

28 | 29 | HTML 30 | 
<button class="py--1 bgc--bl1">Hello Button!</button>
31 | 32 | Preview 33 |

34 | 35 |

We need to remove the border width.

36 | 37 | HTML 38 | 
<button class="py--1 bgc--bl1 brw--0">Hello Button!</button>
39 | 40 | Preview 41 |

42 | 43 |

A bit of rounded corners would be nice:

44 | 45 | HTML 46 | 
<button class="py--1 bgc--bl1 brw--0 brrad--3">Hello Button!</button>
47 | 48 | Preview 49 |

50 | 51 |

Let's change the background colour on hover:

52 | 53 | HTML 54 | 
<button class="py--1 bgc--bl1 brw--0 brrad--3 bgchvr--yl1">Hello Button!</button>
55 | 56 | Preview 57 |

58 | 59 |

Adding a cursor pointer:

60 | 61 | HTML 62 | 
<button class="py--1 bgc--bl1 brw--0 brrad--3 bgchvr--yl1 cur--ptr">Hello Button!</button>
63 | 64 | Preview 65 |

66 | 67 | 68 |

A bigger font size and line height:

69 | 70 | HTML 71 | 
<button class="py--1 bgc--bl1 brw--0 brrad--3 bgchvr--yl1 cur--ptr fts--4 lnh--4">Hello Button!</button>
72 | 73 | Preview 74 |

75 | 76 |

And finally, the horizontal padding now. Our button is done!

77 | 78 | HTML 79 | 
<button class="py--1 bgc--bl1 brw--0 brrad--3 bgchvr--yl1 cur--ptr fts--4 lnh--4 px--2">Hello Button!</button>
80 | 81 | Preview 82 |

83 | 84 | 85 |

More? Check out how easy is to change colour, shape and size without overwriting CSS.

86 | HTML 87 | 
<button class="py--1 bgc--rd1 c--wh1 brw--0 brrad--3 bgchvr--yl1 cur--ptr fts--4 lnh--4 px--2">Hello Button!</button>
 88 | <button class="py--1 bgc--bk1 c--wh1 brw--0 brrad--6 bgchvr--yl1 cur--ptr fts--4 lnh--4 px--2">Hello Button!</button>
 89 | <button class="brw--1 brrad--3 bgchvr--yl1 cur--ptr fts--2 lnh--2">Hello Button!</button>
90 | 91 | Preview 92 |

93 | 94 |

95 | 96 |

97 |
98 |
99 | 100 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /docs/examples/holy_grail/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Holy Grail template | Brevis Example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
Header
14 | 15 |
16 |
Main Content
17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/examples/landing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Landing page | Brevis Example 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 |
17 | 27 |
28 |
29 | 30 | 31 |
32 |
33 |

Hero example

34 |

Lorem ipsum exercitation et ex incididunt officia cupidatat dolor proident do.

35 | Add Call to Action 36 |
37 |
38 | 39 | 40 |
41 | 42 | 43 |

Beautifully crafted piece of texts are always insteresting to read, specially when them are made to server the user's needs.

44 | 45 |
46 | 47 |
48 |
49 |
A Cool Winter
50 |

51 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. 52 |

53 |
54 |
55 | #photography 56 | #travel 57 | #winter 58 |
59 |
60 | 61 |
62 |
63 |
The Warm Summer
64 |

65 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. 66 |

67 |
68 |
69 | #photography 70 | #travel 71 |
72 |
73 | 74 |
75 |
76 |
Temperature Normalized
77 |

78 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil. 79 |

80 |
81 |
82 | #photography 83 | #travel 84 | #winter 85 |
86 |
87 |
88 | 89 | 90 |
91 |

Another amazing crafted piece of texts are always insteresting to read, specially when them are made to server the user's needs.

92 |
93 | 94 |
95 | 96 | 97 |
98 |
99 |
100 |

A very nice centred tagline

101 |

You really should buy this product. We've put a lot of thoughts and effort in our persuasive marketing campaign.

102 |
103 | Strong Call to Action 104 |
105 |
106 |
107 |
108 | 109 |
110 |
111 |
112 |
113 |

This website doesn't use Google Anayltics and Facebook, because respect for your privacy is the way we function.

114 |
115 |
116 |

© 2020 Your Name - Code Licensed MIT, Docs CC BY 3.0

117 |
118 |
119 |
120 |
121 | 122 | -------------------------------------------------------------------------------- /docs/examples/login/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Login | Brevis Example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 |
19 |
20 | Log In 21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 | 30 |
31 |
32 | 33 |
34 | 35 | Sign up
36 | Forgot your password? 37 |
38 |
39 | 40 |
41 | 42 |
43 | HTML 44 | 45 | 
<section class="my--8">
46 |     <form class="maw--7 mx--a bgc--wh1 p--3 bxsw--4 brrad--3">
47 |         <fieldset id="login" class="brw--0 m--0 p--0">
48 |             <legend class="fts--4 lnh--4 ftwt--6 px--0 mb--2">Log In</legend>
49 |             <div class="mb--2">
50 |                 <label class="d--blk c--gy6 ftwt--3" for="email">Email</label>
51 |                 <input class="bxs--brbx p--1 w--100p" type="email" name="email"  id="email">
52 |             </div>
53 |             <div class="mb--2">
54 |                 <label class="d--blk c--gy6 ftwt--3"  for="password">Password</label>
55 |                 <input class="bxs--brbx p--1 w--100p" type="password" name="password" id="password">
56 |             </div>
57 |             <label class="cur--ptr lnh--2 fts--2"><input type="checkbox">Remember me</label>
58 |         </fieldset>
59 |         <div class="my--2">
60 |             <input class="d--ieblk py--1 px--2 bgc--tp brw--1 brst--sol brc--gy8 cur--ptr bgchvr--bk1 chvr--wh1 brrad--3 fts--3 lnh--3 w--100p" type="submit" value="Log in">
61 |         </div>
62 | 
63 |         <a href="#" class="c--gy8 txtdec--n fts--2 lnh--2 bgchvr--yl1">Sign up</a> <br>
64 |         <a href="#" class="c--gy8 txtdec--n fts--2 lnh--2 bgchvr--yl1">Forgot your password?</a>
65 |     </form>
66 | </section>
67 | 68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |
    76 |
    • 77 |
    • 78 |
    • 79 |
    • 80 |
81 |

This website doesn't use Google Anayltics and Facebook, because respect for your privacy is the way we function.

82 |
83 | 84 |
85 |

© 2020 Daniel Zilli - Code Licensed MIT, Docs CC BY 3.0

86 |
87 |
88 |
89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /docs/examples/starter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Starter template | Brevis Example 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 |
19 | 29 |
30 |
31 | 32 | 33 |
34 |
35 |

Brevis starter template
for web applications

36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 |

This website doesn't use Google Anayltics and Facebook, because respect for your privacy is the way we function.

45 |
46 | 47 |
48 |

© 2020 Your Name - Code Licensed MIT, Docs CC BY 3.0

49 |
50 |
51 |
52 |
53 | 54 | -------------------------------------------------------------------------------- /docs/faq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Frequently Asked Questions | Brevis answers made clear 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 33 |
34 |
35 | 36 |
37 | 38 |

Frequently Asked Questions

39 | 40 | 41 | 59 | 60 | 61 |

What does Brevis mean?

62 |

Brevis means short in Latin.

63 | 64 |

What is the idea behind Brevis?

65 |

Brevis was built on top of four pillars:

66 | 67 |
    68 |
  • A class should do one thing only
    • 69 |
  • A class should be composable
    • 70 |
  • A class should behave exactly as expect
    • 71 |
  • A class once declared cannot be changed
    • 72 |
73 |

74 | To get your head around it, think of classes that do only one thing. With Brevis, classes no longer represent objects - like buttons -, but single a function. Those classes once defined, cannot be changed. It's like Lego© blocks. Combine a bunch of those classes together and you can create just about any UI you want.

75 | 76 |

How do you call this CSS approach?

77 |

There's no standard definition for this approach. You may find terms like functional, atomic, utility-first, low-level, toolkit, immutable and so on. Just pick one. It really doesn't matter, as long as you understand the concept.

78 | 79 |

How different is Brevis from others utility-first toolkits?

80 |

While Brevis and others utility-first toolkits share the same philosophy, under the hood we can be quite different. Brevis has a quite logical and easier naming convention, based on abbreviations and two simple rules. A consistent numerical scale and an improved specificity control, without a single !important rule. We also focus on being as neutral as possible, like our minimal colour palette. There are also differences in the way we handle responsiveness.

81 | 82 |

Why should I use Brevis?

83 |

Let's enumerate a few things that set us apart:

84 |
    85 |
  1. 86 |

    Brevis DOES NOT use a single !important rule.

    87 |

    Per se, !important is not evil, it's just a bad practice that breaks the natural cascading of the style sheet. That's why a !important declaration should be treated as the last resort. Unfortunately, most frameworks like to use it a lot:

    88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 |
    CSSVERSION!IMPORTANT RULE
    Brevis0.7.20
    Bulma0.8.0286
    Bootstrap4.4.11031
    Tailwind1.2.01813
    120 | 121 |

    The use of !important is not prohibited. Yet, the abundant use of it may be a sign of a flaw HTML/CSS structure. What Brevis does, is to have ZERO !important rule by default. That way, the developer has full control of where and when to use !important or not.

    122 |
    2. 123 |
  2. Selector-first design. Each class selector is responsive, allowing you to have a very granular control.
    3. 124 | 125 |
  3. 126 |

    There's no pre-defined style. Brevis believes that the design should come from you, and not from the framework.

    127 |
    4. 128 |
  4. 129 |

    Because of its utility-first approach, Brevis is DRY by default.

    130 |
    5. 131 |
  5. 132 |

    Brevis is a CSS only toolkit, which is a major benefit for its high performance and scalability nature. For a website where every byte and second counts, a CSS framework with built-in JavaScript components is more trouble than it's worth. Simply, because you may use your own customised JavaScript code that is compatible with your unique website's requirements.

    133 |
    6. 134 |
  6. 135 |

    Naming things is hard. But with Brevis, you don't ever have to think about naming your classes, thanks to our naming convention.

    136 |
    7. 137 |
  7. 138 |

    Brevis makes easier to visualize what something looks like just by reading the markup.

    139 |
    8. 140 |
  8. 141 |

    It's simple to erase a style by just removing the class; as opposed to component-first frameworks where you usually have to override it. Meaning, you end up writing more CSS.

    142 |
    9. 143 |
  9. 144 |

    Brevis is teamwork friendly.

    145 |
    10. 146 |
147 | 148 | 149 |

Where is the JavaScript?

150 |

Brevis is a CSS only framework.

151 | 152 |

How is the browser support?

153 |

Brevis is compatible with modern versions of:

154 |
    155 |
  • Firefox
    • 156 |
  • Chrome
    • 157 |
  • Safari
    • 158 |
  • Edge
    • 159 |
  • Opera
    • 160 |
  • Internet Explorer 10+
    • 161 |
162 | 163 |

What’s the difference between Brevis and inline styles?

164 |

Same as comparing apples and oranges.

165 | 166 |
    167 |
  1. Inline styles directly affect the tag they are written in, without the use of selectors.
    2. 168 |
  2. Inline styles need the style attribute.
    3. 169 |
170 | 171 |

Inline style:

172 | 
<body style="font-weight:bold;">
173 | 174 |

Brevis:

175 | 
<body class="ftwt--7">
176 | 177 |

They are completely two different things.

178 | 179 |

How do I memorize all those weird class names?

180 |

You don't. Our naming convention is based on word's abbreviations and it follows simple and logical rules. No need to memorize names, just learn the rules and you are good to go.

181 | 182 |

What about the separation of concerns?

183 |

The concerns are still separated. The HTML gives you the structure, and it should work without the CSS. The styling is still applied via CSS.

184 | 185 |

Will all those classes bloat the size of my HTML?

186 |

The bloated stuff is already there, just take a look at yours CSS file(s). What most of CSS frameworks do is to transfer the complexity of UIs to the style sheet. Thus, because larger and similar components reuse the same CSS properties as others, you inevitably end up with duplicate code. So, to answer the question. On the one hand it may increase the HTML size, but on the other hand your CSS file can be incredibly smaller.

187 | 188 |

Does Brevis have a class for each CSS property?

189 |

It doesn't, and it may never will. Like other frameworks, Brevis doesn't try to cover all the CSS spectrum. We are focusing on best practices and real-world usage, to bring the best experience for the users and developers. However, you can always extend Brevis with custom classes for properties that are absent.

190 | 191 | 192 |

Does the CSS declaration order matter?

193 |

In the CSS file, it does. Brevis ordering its classes starts from outside the box model and moves inward. Check out brevis.css to see how we did.

194 | 195 |

Does Brevis enforce any CSS declaration order style?

196 |

No, it doesn’t. But you should have a methodology to order your classes. It will be helpful to you and whom you share your code. Remember the order of classes within the HTML class attribute is irrelevant. The order only matters in the CSS file.

197 | 198 | 199 |

How do I extend Brevis modifiers?

200 | 201 |

We recommend you to create a special modifier called extN. It can work as a complement to some missing property values. So, whatever property you want to extend by adding custom values; the ext is the way to go (with an exception for the colour palette). You can create as many ext modifier as you want. For example:

202 | 203 | 
.lsst--ext1 { list-style: circle }
204 | .w--ext1 { width: 768px }
205 | .w--ext2 { width: 1024px }
206 | .w--ext3 { width: 2048px }
207 | .fts--ext1 { font-size: 128px }
208 | 209 |

This is not a rule, it's just a suggestion of how to do it. The key to keep consistency. However way you choose to extend Brevis, just sticky with it.

210 | 211 | PS: it's OK to have more than one declaration per class, as long as you keep the class immutable.
212 | PPS: it's highly recommended to follow the naming convention. If you don't do it, you may end up with a second naming convention system to remember. 213 | 214 | 215 |

Are there autocomplete plugins?

216 | 219 | 220 | 221 | 222 |
223 | 224 | 225 | 226 | 227 | 246 | 247 | 248 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlzi/brevis/99317ffd5a7b9c70ffc343b10d0577da3248d425/docs/favicon.ico -------------------------------------------------------------------------------- /docs/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlzi/brevis/99317ffd5a7b9c70ffc343b10d0577da3248d425/docs/favicon.png -------------------------------------------------------------------------------- /docs/img/analytics.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/img/facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/img/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/img/holygrail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlzi/brevis/99317ffd5a7b9c70ffc343b10d0577da3248d425/docs/img/holygrail.png -------------------------------------------------------------------------------- /docs/img/landing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlzi/brevis/99317ffd5a7b9c70ffc343b10d0577da3248d425/docs/img/landing.png -------------------------------------------------------------------------------- /docs/img/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlzi/brevis/99317ffd5a7b9c70ffc343b10d0577da3248d425/docs/img/login.png -------------------------------------------------------------------------------- /docs/img/logo-brevis-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/img/logo-brevis.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/img/starter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dlzi/brevis/99317ffd5a7b9c70ffc343b10d0577da3248d425/docs/img/starter.png -------------------------------------------------------------------------------- /docs/img/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Brevis | CSS toolkit for scale 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 |
23 | 33 |
34 |
35 | 36 | 37 |
38 |
39 |
    40 |
  • NOT a single !important rule 🎉
    • 41 |
  • Logical and easy naming convention
    • 42 |
  • FDFD (fast development faster deployment)
    • 43 |
44 | 45 |

Engineered for
high performance and scalable web applications

46 |
47 |
48 | 49 | 50 |
51 |
52 | Installing 53 |

There are only two steps to get Brevis up and running:

54 | Step 1. Download Brevis
55 | https://github.com/dlzi/brevis

56 | Step 2. Include the style sheet on your document's head

57 | 
 58 | <head>
 59 | 	<link href="brevis.min.css" rel="stylesheet">
 60 | </head>
61 |
62 | 63 |
64 | Zero Dependency 65 |

66 | NO preprocessors
67 | NO javascript
68 | NO npm
69 | NO grunt
70 | NO yarn
71 | NO bower
72 | NO travis
73 | NO cdn

74 | 75 |

Just a SINGLE CSS file.

76 |
77 | 78 |
79 | Open Source 80 |

81 | Have a question? Want to help? Feel free to open an issue or create a pull request on Github. 82 |

83 | 84 | DOWNLOAD v0.7.2 85 |
86 |
87 | 88 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /docs/js/prism.js: -------------------------------------------------------------------------------- 1 | /* PrismJS 1.19.0 2 | https://prismjs.com/download.html#themes=prism&languages=markup+css */ 3 | var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,r=0,C={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(r){return r instanceof _?new _(r.type,e(r.content),r.alias):Array.isArray(r)?r.map(e):r.replace(/&/g,"&").replace(/e.length)return;if(!(k instanceof _)){if(h&&y!=r.length-1){if(c.lastIndex=v,!(S=c.exec(e)))break;for(var b=S.index+(f&&S[1]?S[1].length:0),w=S.index+S[0].length,A=y,P=v,x=r.length;A"+a.content+""},!u.document)return u.addEventListener&&(C.disableWorkerMessageHandler||u.addEventListener("message",function(e){var r=JSON.parse(e.data),n=r.language,t=r.code,a=r.immediateClose;u.postMessage(C.highlight(t,C.languages[n],n)),a&&u.close()},!1)),C;var e=C.util.currentScript();function n(){C.manual||C.highlightAll()}if(e&&(C.filename=e.src,e.hasAttribute("data-manual")&&(C.manual=!0)),!C.manual){var t=document.readyState;"loading"===t||"interactive"===t&&e&&e.defer?document.addEventListener("DOMContentLoaded",n):window.requestAnimationFrame?window.requestAnimationFrame(n):window.setTimeout(n,16)}return C}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); 4 | Prism.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:(?!)*\]\s*)?>/i,greedy:!0},cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/i,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var n={"included-cdata":{pattern://i,inside:s}};n["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var t={};t[a]={pattern:RegExp("(<__[\\s\\S]*?>)(?:\\s*|[\\s\\S])*?(?=<\\/__>)".replace(/__/g,a),"i"),lookbehind:!0,greedy:!0,inside:n},Prism.languages.insertBefore("markup","cdata",t)}}),Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup; 5 | !function(s){var e=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+[\s\S]*?(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\((?!\s*\))\s*)(?:[^()]|\((?:[^()]|\([^()]*\))*\))+?(?=\s*\))/,lookbehind:!0,alias:"selector"}}},url:{pattern:RegExp("url\\((?:"+e.source+"|[^\n\r()]*)\\)","i"),inside:{function:/^url/i,punctuation:/^\(|\)$/}},selector:RegExp("[^{}\\s](?:[^{};\"']|"+e.source+")*?(?=\\s*\\{)"),string:{pattern:e,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),s.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:t.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:s.languages.css}},alias:"language-css"}},t.tag))}(Prism); 6 | --------------------------------------------------------------------------------