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.