mullet-css v0.1.3
Mullet CSS
What the heck is this?
Mullet is not a UI framework (but can work together with one), it's just a tiny set of very useful CSS utilities. It can help you speed up some of the styling process with some basic layout, typography, transfoms, performance and accesibility helpers.
As an extra it has a small basic CSS reset, it's not a subsitute for nomalize, if not an extra layer you can use on top of it.
Inspired by the mullet, 80's hottest hairstyle.
Installation
With Bower:
$ bower install mullet-css --save
With npm:
$ npm install mullet-css --save
How to use
The CSS way:
If you want the complete set of utilities you can just grab the compiled css file in the dist folder.
The SASS way:
With sass you can import the mullet-utilities.scss
file within the src/sass
folder. This way you can customize which modules you want by setting the config variables to true
or false
within your project variables.
You can also override the namespace mullet-
for a shorter one for your comfort.
Utilities Available
Hide and Show
ClassNames:
mullet-show
for showing element.
mullet-hide
for hiding element
mullet-hide--sm
For hiding elements in < 768px screens (visible in tablets and desktop).
mullet-hide--md
For hiding elements in > 768px screens (visible in mobile, hidden in tablets and desktops).
mullet-hide--lg
For hiding elements in > 1024px screens (visible in mobile and tablets, hidden in desktops).
Layout
ClassNames:
mullet-display-b
for "display: block"
mullet-display-ib
for "display: inline-block"
mullet-display-i
for "display: inline"
mullet-float-right
You know...
mullet-float-left
And so on...
mullet-clear-right
mullet-clear-left
mullet-clear-both
mullet-clearfix
the typical clearfix snippet with support for ie8
Typography
ClassNames:
For font-weight:
mullet-text--100
mullet-text--300
mullet-text--400
mullet-text--600
mullet-text--700
mullet-text--800
mullet-text--900
For font italic styles:
mullet-text--italic
Truncate text with ellipsis:
mullet-text--truncate
Accesibility
ClassName:
mullet-accesibility-hidden
It hides text from the UI but not from screen readers. Useful for icons for example.
Media Object
ClassNames:
mullet-mo
apply to media object wrapper
mullet-mo__fit
apply to the fixed width element
mullet-mo__fill
apply to the flexible element that fills the remaining space
mullet-mo__fit--inverse
the fixed element takes position on the right instead of left. WARNING: in the markup its necessary that this element comes first in order than the fill element.
Transforms
ClassNames:
mullet-reflect
Mirror element.
mullet-rotate--90
mullet-rotate--180
mullet-rotate--270
UI performance hacks
ClassNames:
mullet-fixed
apply to fixed positioned elements to avoid repaints on scroll.
mullet-animated
apply to animated elements for hardware acceleration. Don't abuse.
mullet-animated--size
You shouldn't animate width or height, never. But if you do use this reliver.
mullet-animated--position
Same as above, but for top right bottom left.
Button reset
ClassName:
mullet-btn-reset
for a button to look and behave much like a link.
Collaboration
Bugs? Improvements? Suggestions? Leave me an issue! Also pull requests are very appreciated.
Credits
Juan Vanni
Github: jvnni
License
You can do whatever you like with this.