minions
Evil micro-classes.
WIP
This project is undergoing a pretty big transition. I've removed the aspirational documentation to prevent confusion.
If for some reason your using this, you're likely on v0.0.3 and it's very different.
I recommend looking at the documentation for that tag.
What is This?
This library is the practice of a naming convention I've been working out for human readable, low-conlfict micro-class.
I think that the naming conventions are solid. They're intended to be very literal. So, the practice is repeatable, library on not.
The library exists mostly to suss out shortcomings and areas of conflict.
A Simple Example
<div class="p-1r bw-1p bc-cC mx-2r ff-sans">
This element has 1rem of padding, a 1px border (set to currentColor), a top/bottom margin of 2rem, and the font-family is sans.
</div>Prior Art
- tachyons - This is the first library I'd seen that went completely down the rabbit-hole of micro-classes with media-queries.
- gravitons - Brent's projects are some of my favorite on the internet. Gravitons and basscss make an elegant and minimal framework.
Experimentation
There are a few guiding principles that I find absent from those other libraries. This isn't a problem; they're not omissions. But I find in my work, with my team, I wanted a more literal translation between classname and rule.
Guiding Principles
"Guessable," highly Literal Class Names
I want class names that are internally consistent and very literal. I want virtually 0 abstraction between a rule I'd type in CSS and a micro-class selector.
Whatever-first: mobile, wearable, mega-widescreen, appliance, who cares?
Support for legacy apps - "Mobile first" isn't possible in 10-year old app. It's already been "firsted." I want media-query classes that aren't opinionated about the starting line.
Why?
That's a great question.
I've come to believe that the biggest problem with CSS is that you have to name selectors to do anything. People suck at naming things and only the best people go back to reconsider.
This approach allows you to defer naming thing…maybe indefinitely.
Syntax
{property-shortand}-{value-shorthand}
Property shorthand
In the majority of cases, properties get shortened to a single character per word.
display = d
overflow = o
margin = m
padding = p
Properties with two words (separated by a dash) will have two characters.
border-color = bc
border-width = bw
Likewise specific properties get a character for each dash-delimited word.
border-top-width = btw
border-right-width = brw
border-bottom-width = bbw
border-left-width = blw
x and y have been added as aliases for right & left and top & bottom, respectively, for box-model properties.
border-top-width && border-bottom-width = byw
border-right-width && border-left-width = bxw
Value shorthand
Value shorthand follows the same rules as Property shortand. Values get shortened to a single character per word. This includes measurement values.
4px = 4p
1rem = 1r
hidden = h
inline-block = ib
measurements
There is no additional abstraction between measurement values and class selectors:
1em = 1e
.5em = .5e
.25em = .25e
1rem = 1r
.5rem = .5r
.25rem = .25r
Conflicts
There will be conflicts; I have two methods for resolving them.
Verbosity
Where two classes share the same selector, but one is less likely to be used, I attempt to make a more verbose version available.
.o-1 is a problematic selector.
It can mean {opacity: 1} or {order: 1}.
I use opacity more than order and therefor use the verbose version of order to resolve the conflict:
.order-1
Alternate
Where two classes share might share the same selector and they are both popular, I chose a second character.
This isn't very common but the conflict exists in a pretty big way: background-color and border-color.
I've used gc for background-color.
bc = border-color
gc = background-color
Sadly, this exceptions is one that needs to be memorized and internalized.
Negative
There is only one number prefix.
n may be used to prefix a number as negative.
I'm avoiding the use of - to prevent confusion with OOCSS-style classes that use the -- (double-dash) delimiter as a modifier.
.order-1 { order: 1 }
.order-n1 { order: -1 }Theming
The ability to theme minions is important.
There's a simple convention for theme-able values.
If the value side of the - isn't abbreviated, it's theme-able.
Everything else is static.
Here's an example:
.c-r /* static, don't touch this */
.c-red /* variable. theme the shit out of it */Property lexicon
ac = align-content
ai = align-items
as = align-self
ad = animation-delay *
animation-direction
animation-duration *
aic = animation-iteration-count
aps = animation-play-state
atf = animation-timing-function
ba = background-attachment
bbw = border-bottom-width
b = bottom
bc = background-clip
border-collapse
blw = border-left-width
bo = background-origin
bp = background-position
br = background-repeat
brw = border-right-width
bs = background-size
border-style
btw = border-top-width
bw = border-width
bxw = border-x-width
byw = border-y-width
bs = box-sizing
c = clear
cursor
cc = column-count
d = display
f = flex
float
fb = flex-basis
fd = flex-direction
ff = flex-flow
font-family
fg = flex-grow
fs = flex-shrink
flex-size
font-style
fv = font-variant
fw = flex-wrap
font-weight
h = height
jc = justify-content
l = left
lh = line-height
ls = letter-spacing
lsp = list-style-position
lst = list-style-type
nh = min-height *
nw = min-width *
m = margin
mb = margin-bottom
ml = margin-left
mr = margin-right
mt = margin-top
mx = margin-x
my = margin-y
mbm = mix-blend-mode
o = opacity
order
overflow
os = outline-style
ow = outline-width
outline-wrap
ox = outline-x
oy = outline-y
p = padding
position
pe = pointer-events
r = resize
right
t = top
ta = text-align
td = text-decoration
transition-duration *
transition-delay *
ti = text-indent
to = text-overflow
tp = transition-property
tt = text-transform
ttf = transition-timing-function
v = visibility
va = vertical-align
w = width
wb = word-break
wc = will-change
ws = white-space
word-spacing
xh = max-height *
xw = max-width *
zi = z-index
* indicates alternative naming do to conflict
Measurement
In cases of measurements, 0, 1, 2, 3, and 4 are available.
There em and rem and additional values for 1/2 and 1/4.
/* 0 */
p-0 { padding: 0 }
/* px */
p-1p { padding: 1px }
p-2p { padding: 2px }
p-3p { padding: 3px }
p-4p { padding: 4px }
/* em */
p-\.25e { padding: .25em }
p-\.5e { padding: .5em }
p-1e { padding: 1em }
p-2e { padding: 2em }
p-3e { padding: 3em }
/* rem */
p-\.25r { padding: .25rem }
p-\.5r { padding: .5rem }
p-1r { padding: 1rem }
p-2r { padding: 2rem }
p-3r { padding: 3rem }Coming Eventually
THIS SECTION IS THE EXPERIMENTAL BIT THAT IS ONLY PARTIALLY IMPLEMENTED
_ Delimiter
The _ delimiter indicates that the selector enacts on all direct children, not the element the selector is on.
<div class="p-1r">This element has 1rem padding.</div>
<div class="p_1r">
<div>These elements</div>
<div>have 1rem padding.</div>
</div>
! Suffix
The ! suffix forces a rule by appending !important.
<ul class="p_1">
<li>all direct children have 1em padding</li>
<li>this one two</li>
<li class="p-0!">this one has reset to 0</li>
</ul>
:h, :a Suffixes and Others
The :h and :a suffix can be applied to classes to apply their styles on browser events.
<a href="#" class="bw-1p bw-2p:h bw-3p:a">hover me</a>Any other pseudo classes and elements can be written this way as well, e.g.,
:fc, :lc, :b, :a, :n(even) etc.
^ Selector
The ^ is a way for denoting an ancestor as the event target.
It's like a look-back selector.
<div class="^">
<div>
<div>
<div class="bw-2p:^h">This element will get hover-effect on great-grandparent hover</div>
</div>
</div>
</div>Media Queries
The primary advantage that these classes provide over inline-styles is there ability to leverage media-queries.
Breakpoint-specific classes are suffixed with an @-symbol, followed by the two-character shorthand for the breakpoint (i.e., mn, sm, md, lg, xl).
<p class="w-10%@mn w-20%@xs w-40%@sm w-60%@md w-80%@lg w-100%@xl">
The wider the screen gets, the wider I get.
</p>Matching Logic
With the right matching logic, this library can support legacy apps with a "whatever-first" approach.
Overriding (up)
@media (min-width: 768px) {
.p-1r\@md {}
}Overriding (down)
@media (max-width: 767px) {
.p-1r\@\!md {}
}
/*
* alternatively,
* not could be used to use the same value and be measurement agnostic
*/
@media not all and (max-width: 768px) {}Exact Match (and)
@media (min-width: 768px) and (max-width: 991px) {
.p-1r\@\=md {}
}
/*
* alternatively,
* not could be used to use the same value and be measurement agnostic
*/Exact Exclude (or)
@media (max-width: 767px), (min-width: 992px){
.p-1r@!=sm {}
}