mini-style v0.1.1
mini-style
A bunch of shortened CSS class for element styling.
THIS PROJECT IS PARTIALLY IMPLEMENTED. USE AT YOUR OWN RISK.
BE WARNED : It may have some conflict naming in the future. Please consider create an issue if you find one.
Shortcuts
| Shorthand | Properties | Example | Result |
|---|---|---|---|
| w# | width | w20 | width: 20px; |
| h# | height | h20 | height: 20px; |
| m | margin | m#mt#mb#ml#mr#mx#my# | margin: #px;margin-top: #px;margin-bottom: #px;margin-left: #px;margin-right: #px;margin-left: #px; margin-right: #px;margin-top: #px; margin-bottom: #px; |
| p | padding | p#pt#pb#pl#pr#px#py# | padding: #px;padding-top: #px;padding-bottom: #px;padding-left: #px;padding-right: #px;padding-left: #px; padding-right: #px;padding-top: #px; padding-bottom: #px; |
| b,i,u | font-style | biu | font-width: bold;font-style: italic;text-decoration: underline |
| f | float | flfrfn | float: left;float: right;float: none; |
| c | clear | clcrcbcn | clear: left;clear: right;clear: both;clear: none; |
| cf | clear fix | cf | .cf:after { context: ""; display: block; clear:both } |
| f | font-size | fssfsfbfbb | font-size: smaller;font-size: smallfont-size: large;font-size: larger; |
| d | display | dndbdidibdtdit | display: none;display: block;display: inline;display: inline-block;display: table;display: inline-table; |
| c,l,r | text-align | clr | text-align: center;text-align: left;text-align: right; |
| v | vertical-align | vtvmvbvttvtb | vertical-align: top;vertical-align: middle;vertical-align: bottom;vertical-align: text-top;vertical-align: text-bottom; } |
| v | visibility | vvvhvc | visibility: visible;visibility: hidden;visibility: collapse; |
| bs | box-sizing | bsbbsc | box-sizing: border-box;box-sizing: content-box; |
| p | position | pspaprpf | position: static;position: absolute;position: relative;position: fixed; |
| t,b,l,r | positioning | t#b#l#r# | top: #px;bottom: #px;left: #px;right: #px; |
| o | overflow | osohovoa | overflow: scroll;overflow: hidden;overflow: visible;overflow: auto; |
| ox | overflow-x | oxsoxhoxvoxa | overflow-x: scroll;overflow-x: hidden;overflow-x: visible;overflow-x: auto; |
| oy | overflow-y | oysoyhoyvoya | overflow-y: scroll;overflow-y: hidden;overflow-y: visible;overflow-y: auto; |
| ww | word-wrap | wwnwwb | word-wrap: normal;word-wrap: break-word; |
| wb | word-break | wbnwbbwbk | word-break: normal;word-break: break-all;word-break: keep-all |
| ls | letter-spacing | ||
| c | cursor | ||
| c | color | cRGBcRRGGBBcRRGGBBAA | color: #RRGGBB;color: #RRGGBB;color: rgba(RR, GG, BB, AA); |
| r | resize | rxryrbrn | resize: horizontal;resize: vertical;resize: both;resize: none; |
| to | text-overflow | toctoe | text-overflow: clip;text-overflow: ellipsis; |
| tl | table-layout | tlatlf | table-layout: auto; table-layout:fixed |
| z | z-index | z1000 | z-index: 1000; |
Modifiers
Change the condition
Selector/Property modifers
| Modifier | Effect | Example | Result |
|---|---|---|---|
| ! | !important | w20! | .w20! { width: 20px !important; } |
| ( | min | (w20 | .(w20 { min-width: 20px; } |
| ) | max | w20) | .w20) { max-width: 20px; } |
| : | media query | lg:w20 | @media lg(min-width: 1120px) { .lg:w20 { max-width: 20px; } } |
| . | if | c.w20 | .c.w20 { width: 20px; } |
| @ | event selector | c@hover | .c@hover:hover { text-align: center; } |
| | | Modernizr feature condition | w20|canvas | .canvas .w20 { width: 20px; } |
| ? | Developer helper | w?w?1 | .w? { width: 20px !important; }.w?1 { width: 20px !important; } |
Unit Modifiers
| Modifier | Effect | Example | Result |
|---|---|---|---|
| / | fraction | gd1/2 | .gd1/2 { width: 50%; } |
| p | percent | w20p | .w20p { width: 20%; } |
| . | literal fraction | ls1.3 | .ls1.3 { letter-spacing: 1.3px; } |
| a | auto | mxa | .mxa { margin-left: auto; margin-right: auto; } |
Color digits
Use 3, 4, 6, 8 digit to specific the color code in hex based. and alpha channel in dex based.
Use h suffix to use hsl color space.
Remark : no 1, 2 digits because there are conflict with other class ( cb, cf ) | Digits | Example | Result | | 3 | c999 | color: #999; | | 3 | c999h | color: hsl( 9/16, 90%, 90% ); | | 4 | c9999 | color: rgba( 144, 144, 144, 0.9 ); | | 4 | c9999h | color: hlsa( 9/16, 90%, 90%, 0.9 ); | | 6 | c999999 | color: #999999; | | 6 | c999999h | color: hsl( 99/255, 99%, 99% ); | | 8 | c99999999 | color: rgba( 144, 144, 144, 0.99 ); | | 8 | c99999999h | color: hsla( 99/255, 99%, 99%, 0.99 ); |
TO-DO
- Implement all the selector matching.
- Write gulp script to generate CSS class that found or included in script.
- Add warning when there are too many mini-style on one element.
- Add lab color space.