By Peter Chon
Most CSS frameworks are absolutely beautiful and simple to use. However, it takes a lot of work to make it your own. It's hard enough to be creative, but to override and re-work other craftsman's design is quite the challenge. This is probably why we see so many "like-minded" websites.
I work with a lot legacy codes. Most are written with the best of intentions (initially.) This means that most of my day is spent hunting down that one rogue class or inherited styles.
I'm guilty of it myself - starting the project with carefully thought-out SASS structure with sensible, modular approach to writing beautifully-orchestrated symphony of classes and inheritance. It's CSS nirvana. After submitting for review and QA, you start to find holes. Ugly, one-of-a-kind holes that needs to be patched with an equally ugly, non-sensical, duplicating work-arounds and hacks that will ultimately end with the humiliating !important declaration(s).
After going through the same insanity over and over again, I started to think "Why not use CSS property name as my class name?" Sure it's little more work, but I'll always be able to control the style by just adding or removing a class name. Plus, I don't have to keep coming up with class names that makes sense.
Example:
This would be a usual paragraph with a defined class that specifies a padding-bottom of 50px.
This would be the same paragraph but with a class of "padding-bottom:0".
One of the advantages of using a system like Mimic is that you can always tell how the element is going to look without having to render it. If you see this code:
<p class="margin-top:20 padding:10 bg-color:black border-radius:5 color:white align:right">Can you guess how I would render?</p>
show
Yey!
Would you have any question as to how that paragraph would render?
Maybe. But from my experience, most time I write CSS to over-write existing styles. And all of the CSS-classes are written with just one property. If it needs to be extended, then you can always write a custom CSS class.
Again, this is just how I started to write my css. If you don't like it, I recommend you checkout bootstrap.
Still reading? awesome. So, let's get to it.
How to use Mimic.
Since mimic tries override as a class-level style, I would put it after your custom css file.
<link rel="stylesheet" href="mimic.css">
Mimic is easy.
Here's what you get with mimic.
Use case: <p class="font-size:13">same as font-size:13px</p>
Use case: <p class="margin:20">same as margin:20px</p>
Use case: <p class="margin:20 margin-top:40">same as margin:40px 20px 20px</p>
Use case: <p class="margin-bottom:20">same as margin-bottom:20px</p>
Use case: <p class="ajust-center:20">same as margin-left:auto; margin-right:auto;</p>
Use case: <p class="padding:20">same as padding:20px</p>
Use case: <p class="padding:20 margin-top:40">same as padding:40px 20px 20px</p>
Use case: <p class="padding-bottom:20">same as padding-bottom:20px</p>
Use case: <p class="display:inline">same as display:inline</p>
Use case: <p class="display:block">same as display:block</p>
Use case: <p class="display:inline-block:20">same as display:inline-block</p>
Use case: <p class="float:left">same as float:left</p>
Use case: <p class="float:right">same as float:right</p>
Use case: <p class="width:20">same as width:20%</p>
Use case: <p class="width:3-col">same as width:33.3333334%</p>
Use case: <p class="width:6-col">same as width:16.6666667%</p>
Use case: <p class="width:7-col">same as width:14.2857143%</p>
Use case: <p class="width:8-col">same as width:12.5%</p>
Use case: <p class="width:9-col">same as width:11.1111111%</p>
Use case: <p class="border-radius:10">same as border-radius:10px</p>
Use case: <p class="border-radius:360">same as border-radius:100%</p>
Use case: <p class="border-top-right-radius:10">same as border-top-right-radius:10</p>
Use case: <p class="position:fixed">same as position:fixed</p>
Use case: <p class="position:absolute">same as position:absolute</p>
Use case: <p class="position:relative">same as position:relative</p>
Use case: <p class="top:10">same as top:10px</p>
Use case: <p class="right:10">same as right:10px</p>
Use case: <p class="bottom:10">same as bottom:10px</p>
Use case: <p class="left:10">same as left:10px</p>
Use case: <p class="z-index:10">same as z-index:10</p>
Use case: <p class="align:left">same as text-align:left</p>
Use case: <p class="align:center">same as text-align:center</p>
Use case: <p class="align:right">same as text-align:right</p>
Use case: <p class="align:justify">same as text-align:justify</p>
In case you need it, I have grids. Mimic gives you a choice of 12/10/7 grid system with an 2% left-margin between the columns. Why so many? Because I like choices.
<div class="row:12">
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
</div>
<div class="row:10">
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
</div>
<div class="row:7">
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
<div class="col:1">1</div>
</div>
<div class="row:12">
<div class="col:2">2</div>
<div class="col:2">2</div>
<div class="col:2">2</div>
<div class="col:2">2</div>
<div class="col:2">2</div>
<div class="col:2">2</div>
</div>
<div class="row:10">
<div class="col:2">2</div>
<div class="col:2">2</div>
<div class="col:2">2</div>
<div class="col:2">2</div>
<div class="col:2">2</div>
</div>
<div class="row:12">
<div class="col:3">3</div>
<div class="col:3">3</div>
<div class="col:3">3</div>
<div class="col:3">3</div>
</div>
<div class="row:12">
<div class="col:4">4</div>
<div class="col:4">4</div>
<div class="col:4">4</div>
</div>
<div class="row:12">
<div class="col:6">6</div>
<div class="col:6">6</div>
</div>
<div class="row:12">
<div class="col:7">7</div>
<div class="col:5">5</div>
</div>
<div class="row:12">
<div class="col:8">8</div>
<div class="col:4">4</div>
</div>
<div class="row:12">
<div class="col:9">9</div>
<div class="col:3">3</div>
</div>
<div class="row:12">
<div class="col:10">10</div>
<div class="col:2">2</div>
</div>
<div class="row:12">
<div class="col:11">11</div>
<div class="col:1">1</div>
</div>
<div class="row:12">
<div class="col:12">12</div>
</div>
offset12s — Trailing ':#' is the offset12 amount, i.e. 1:10 would be col:1 offset:10
<div class="row:12">
<div class="col:2 offset:9">…</div>
<div class="col:1">…</div>
</div>
<div class="row:12">
<div class="col:10 offset:1">…</div>
<div class="col:1">…</div>
</div>
<div class="row:12">
<div class="col:4 offset:1">…</div>
<div class="col:2 offset:3">…</div>
<div class="col:2">…</div>
</div>
Nested
<div class="row:12">
<div class="col:9 row:12">
<div class="col:5">…</div>
<div class="col:7 row:12">
<div class="col:4 offset:5">…</div>
<div class="col:3">…</div>
</div>
</div>
<div class="col:3 row:12">
<div class="col:6">…</div>
<div class="col:6">…</div>
</div>
</div>
Continuing row:12s — When building HTML lists
<div class="row:12">
<div class="col:8">…</div>
<div class="col:4">…</div>
<div class="col:4 restart-row:12">…</div>
<div class="col:8">…</div>
</div>
More to come, including jQuery-less js components. Please stay tuned!