atomic.css

atomic.css

/*
====================================================================
	ATOMIC.CSS
--------------------------------------------------------------------	
	(NOTE: Load this LAST- should be last word)
	
	Inspired by Thierry Koblentz in "Challenging CSS Best Practices"
	(http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/)
	
	- Creates classes for individual styles, letting you position elements with classes in the HTML
	(e.g. set a left margin with `class="ml-12"`).
	
	DESCRIPTION:
	Creating new classes for each hyper-contextual variation leads to CSS bloat.
	Thierry Koblentz makes the case that this best practice is really an anti-pattern, 
	and advocates a re-usable, atomic CSS approach where common styles (especially positional/layout styles)
	should be assigned their own classes, which can then be applied directly in the markup.
	
	REASONING:
	- One-off or contextual layout positioning is often easier and more cleanly done in markup than a separate CSS file.
	(would rather pollute the HTML than the CSS)
	- Indeed, many layout rules *belong* in the markup, as they are by definition only valid relative to the current [layout] context.
	- We're supposed to be separating skin and structure anyway.
	
	BENEFITS:
	- Atomic stylesheets never change, grow, or break things
	- Perfect for prototyping- much faster to whip things up by positioning within the HTML 
	instead of constantly switching between HTML and CSS to build your layouts. 
	(You can always extract into a proper component class later if the style should be re-usable)
	- Your other CSS files will be smaller, less convoluted, less brittle
	- Your HTML will be more understandable and easier to build/change
		- No cascade calculations and specificity wars
		- No inadvertent breaking of layout through careless CSS changes
	- Plays well with others/easy to integrate- use as little (just for overrides) or as much (as primary layout method) as you want

====================================================================
*/

/* MARGINS */
.ml-0 {margin-left:0px !important;}
.ml-1 {margin-left:1px !important;}
.ml-2 {margin-left:2px !important;}
.ml-3 {margin-left:3px !important;}
.ml-4 {margin-left:4px !important;}
.ml-5 {margin-left:5px !important;}
.ml-6 {margin-left:6px !important;}
.ml-7 {margin-left:7px !important;}
.ml-8 {margin-left:8px !important;}
.ml-9 {margin-left:9px !important;}
.ml-10 {margin-left:10px !important;}
.ml-12 {margin-left:12px !important;}
.ml-14 {margin-left:14px !important;}
.ml-15 {margin-left:15px !important;}
.ml-16 {margin-left:16px !important;}
.ml-18 {margin-left:18px !important;}
.ml-20 {margin-left:20px !important;}
.ml-25 {margin-left:25px !important;}
.mr-0 {margin-right:0px !important;}
.mr-1 {margin-right:1px !important;}
.mr-2 {margin-right:2px !important;}
.mr-3 {margin-right:3px !important;}
.mr-4 {margin-right:4px !important;}
.mr-5 {margin-right:5px !important;}
.mr-6 {margin-right:6px !important;}
.mr-7 {margin-right:7px !important;}
.mr-8 {margin-right:8px !important;}
.mr-9 {margin-right:9px !important;}
.mr-10 {margin-right:10px !important;}
.mr-12 {margin-right:12px !important;}
.mr-14 {margin-right:14px !important;}
.mr-15 {margin-right:15px !important;}
.mr-16 {margin-right:16px !important;}
.mr-18 {margin-right:18px !important;}
.mr-20 {margin-right:20px !important;}
.mr-25 {margin-left:25px !important;}
.mt-0 {margin-top:0px !important;}
.mt-1 {margin-top:1px !important;}
.mt-2 {margin-top:2px !important;}
.mt-3 {margin-top:3px !important;}
.mt-4 {margin-top:4px !important;}
.mt-5 {margin-top:5px !important;}
.mt-6 {margin-top:6px !important;}
.mt-7 {margin-top:7px !important;}
.mt-8 {margin-top:8px !important;}
.mt-9 {margin-top:9px !important;}
.mt-10 {margin-top:10px !important;}
.mt-12 {margin-top:12px !important;}
.mt-14 {margin-top:14px !important;}
.mt-15 {margin-top:15px !important;}
.mt-16 {margin-top:16px !important;}
.mt-18 {margin-top:18px !important;}
.mt-20 {margin-top:20px !important;}
.mt-25 {margin-top:25px !important;}
.mb-0 {margin-bottom:0px !important;}
.mb-1 {margin-bottom:1px !important;}
.mb-2 {margin-bottom:2px !important;}
.mb-3 {margin-bottom:3px !important;}
.mb-4 {margin-bottom:4px !important;}
.mb-5 {margin-bottom:5px !important;}
.mb-6 {margin-bottom:6px !important;}
.mb-7 {margin-bottom:7px !important;}
.mb-8 {margin-bottom:8px !important;}
.mb-9 {margin-bottom:9px !important;}
.mb-10 {margin-bottom:10px !important;}
.mb-12 {margin-bottom:12px !important;}
.mb-14 {margin-bottom:14px !important;}
.mb-15 {margin-bottom:15px !important;}
.mb-16 {margin-bottom:16px !important;}
.mb-18 {margin-bottom:18px !important;}
.mb-20 {margin-bottom:20px !important;}
.mb-25 {margin-bottom:25px !important;}
.mlr-0 {margin-left:0px !important;margin-right:0px !important;}
.mlr-1 {margin-left:1px !important;margin-right:1px !important;}
.mlr-2 {margin-left:2px !important;margin-right:2px !important;}
.mlr-3 {margin-left:3px !important;margin-right:3px !important;}
.mlr-4 {margin-left:4px !important;margin-right:4px !important;}
.mlr-5 {margin-left:5px !important;margin-right:5px !important;}
.mlr-6 {margin-left:6px !important;margin-right:6px !important;}
.mlr-7 {margin-left:7px !important;margin-right:7px !important;}
.mlr-8 {margin-left:8px !important;margin-right:8px !important;}
.mlr-9 {margin-left:9px !important;margin-right:9px !important;}
.mlr-10 {margin-left:10px !important;margin-right:10px !important;}
.mlr-12 {margin-left:12px !important;margin-right:12px !important;}
.mlr-14 {margin-left:14px !important;margin-right:14px !important;}
.mlr-15 {margin-left:15px !important;margin-right:15px !important;}
.mlr-16 {margin-left:16px !important;margin-right:16px !important;}
.mlr-18 {margin-left:18px !important;margin-right:18px !important;}
.mlr-20 {margin-left:20px !important;margin-right:20px !important;}
.mlr-25 {margin-left:25px !important;margin-right:25px !important;}
.mlr-auto {margin-left:25px !important;margin-right:25px !important;}
.mtb-1 {margin-top:0px !important;margin-bottom:0px !important;}
.mtb-1 {margin-top:1px !important;margin-bottom:1px !important;}
.mtb-2 {margin-top:2px !important;margin-bottom:2px !important;}
.mtb-3 {margin-top:3px !important;margin-bottom:3px !important;}
.mtb-4 {margin-top:4px !important;margin-bottom:4px !important;}
.mtb-5 {margin-top:5px !important;margin-bottom:5px !important;}
.mtb-6 {margin-top:6px !important;margin-bottom:6px !important;}
.mtb-7 {margin-top:7px !important;margin-bottom:7px !important;}
.mtb-8 {margin-top:8px !important;margin-bottom:8px !important;}
.mtb-9 {margin-top:9px !important;margin-bottom:9px !important;}
.mtb-10 {margin-top:10px !important;margin-bottom:10px !important;}
.mtb-12 {margin-top:12px !important;margin-bottom:12px !important}
.mtb-14 {margin-top:14px !important;margin-bottom:14px !important;}
.mtb-15 {margin-top:15px !important;margin-bottom:15px !important;}
.mtb-16 {margin-top:16px !important;margin-bottom:16px !important;}
.mtb-18 {margin-top:18px !important;margin-bottom:18px !important;}
.mtb-20 {margin-top:20px !important;margin-bottom:20px !important;}
.mtb-25 {margin-top:25px !important;margin-bottom:25px !important;}
.m-0 {margin:0px !important;}
.m-1 {margin:1px !important;}
.m-2 {margin:2px !important;}
.m-3 {margin:3px !important;}
.m-4 {margin:4px !important;}
.m-5 {margin:5px !important;}
.m-6 {margin:6px !important;}
.m-7 {margin:7px !important;}
.m-8 {margin:8px !important;}
.m-9 {margin:9px !important;}
.m-10 {margin:10px !important;}
.m-12 {margin:12px !important;}
.m-14 {margin:14px !important;}
.m-15 {margin:15px !important;}
.m-16 {margin:16px !important;}
.m-18 {margin:18px !important;}
.m-20 {margin:20px !important;}
.m-25 {margin:25px !important;}

/* PADDING */
.pl-0 {padding-left:0px !important;}
.pl-1 {padding-left:1px !important;}
.pl-2 {padding-left:2px !important;}
.pl-3 {padding-left:3px !important;}
.pl-4 {padding-left:4px !important;}
.pl-5 {padding-left:5px !important;}
.pl-6 {padding-left:6px !important;}
.pl-7 {padding-left:7px !important;}
.pl-8 {padding-left:8px !important;}
.pl-9 {padding-left:9px !important;}
.pl-10 {padding-left:10px !important;}
.pl-12 {padding-left:12px !important;}
.pl-14 {padding-left:14px !important;}
.pl-15 {padding-left:15px !important;}
.pl-16 {padding-left:16px !important;}
.pl-18 {padding-left:18px !important;}
.pl-20 {padding-left:20px !important;}
.pl-25 {padding-left:25px !important;}
.pr-0 {padding-right:0px !important;}
.pr-1 {padding-right:1px !important;}
.pr-2 {padding-right:2px !important;}
.pr-3 {padding-right:3px !important;}
.pr-4 {padding-right:4px !important;}
.pr-5 {padding-right:5px !important;}
.pr-6 {padding-right:6px !important;}
.pr-7 {padding-right:7px !important;}
.pr-8 {padding-right:8px !important;}
.pr-9 {padding-right:9px !important;}
.pr-10 {padding-right:10px !important;}
.pr-12 {padding-right:12px !important;}
.pr-14 {padding-right:14px !important;}
.pr-15 {padding-right:15px !important;}
.pr-16 {padding-right:16px !important;}
.pr-18 {padding-right:18px !important;}
.pr-20 {padding-right:20px !important;}
.pr-25 {padding-left:25px !important;}
.pt-0 {padding-top:0px !important;}
.pt-1 {padding-top:1px !important;}
.pt-2 {padding-top:2px !important;}
.pt-3 {padding-top:3px !important;}
.pt-4 {padding-top:4px !important;}
.pt-5 {padding-top:5px !important;}
.pt-6 {padding-top:6px !important;}
.pt-7 {padding-top:7px !important;}
.pt-8 {padding-top:8px !important;}
.pt-9 {padding-top:9px !important;}
.pt-10 {padding-top:10px !important;}
.pt-12 {padding-top:12px !important;}
.pt-14 {padding-top:14px !important;}
.pt-15 {padding-top:15px !important;}
.pt-16 {padding-top:16px !important;}
.pt-18 {padding-top:18px !important;}
.pt-20 {padding-top:20px !important;}
.pt-25 {padding-top:25px !important;}
.pb-0 {padding-bottom:0px !important;}
.pb-1 {padding-bottom:1px !important;}
.pb-2 {padding-bottom:2px !important;}
.pb-3 {padding-bottom:3px !important;}
.pb-4 {padding-bottom:4px !important;}
.pb-5 {padding-bottom:5px !important;}
.pb-6 {padding-bottom:6px !important;}
.pb-7 {padding-bottom:7px !important;}
.pb-8 {padding-bottom:8px !important;}
.pb-9 {padding-bottom:9px !important;}
.pb-10 {padding-bottom:10px !important;}
.pb-12 {padding-bottom:12px !important;}
.pb-14 {padding-bottom:14px !important;}
.pb-15 {padding-bottom:15px !important;}
.pb-16 {padding-bottom:16px !important;}
.pb-18 {padding-bottom:18px !important;}
.pb-20 {padding-bottom:20px !important;}
.pb-25 {padding-bottom:25px !important;}
.plr-0 {padding-left:0px !important;padding-right:0px !important;}
.plr-1 {padding-left:1px !important;padding-right:1px !important;}
.plr-2 {padding-left:2px !important;padding-right:2px !important;}
.plr-3 {padding-left:3px !important;padding-right:3px !important;}
.plr-4 {padding-left:4px !important;padding-right:4px !important;}
.plr-5 {padding-left:5px !important;padding-right:5px !important;}
.plr-6 {padding-left:6px !important;padding-right:6px !important;}
.plr-7 {padding-left:7px !important;padding-right:7px !important;}
.plr-8 {padding-left:8px !important;padding-right:8px !important;}
.plr-9 {padding-left:9px !important;padding-right:9px !important;}
.plr-10 {padding-left:10px !important;padding-right:10px !important;}
.plr-12 {padding-left:12px !important;padding-right:12px !important;}
.plr-14 {padding-left:14px !important;padding-right:14px !important;}
.plr-15 {padding-left:15px !important;padding-right:15px !important;}
.plr-16 {padding-left:16px !important;padding-right:16px !important;}
.plr-18 {padding-left:18px !important;padding-right:18px !important;}
.plr-20 {padding-left:20px !important;padding-right:20px !important;}
.plr-25 {padding-left:25px !important;padding-right:25px !important;}
.ptb-1 {padding-top:0px !important;padding-bottom:0px !important;}
.ptb-1 {padding-top:1px !important;padding-bottom:1px !important;}
.ptb-2 {padding-top:2px !important;padding-bottom:2px !important;}
.ptb-3 {padding-top:3px !important;padding-bottom:3px !important;}
.ptb-4 {padding-top:4px !important;padding-bottom:4px !important;}
.ptb-5 {padding-top:5px !important;padding-bottom:5px !important;}
.ptb-6 {padding-top:6px !important;padding-bottom:6px !important;}
.ptb-7 {padding-top:7px !important;padding-bottom:7px !important;}
.ptb-8 {padding-top:8px !important;padding-bottom:8px !important;}
.ptb-9 {padding-top:9px !important;padding-bottom:9px !important;}
.ptb-10 {padding-top:10px !important;padding-bottom:10px !important;}
.ptb-12 {padding-top:12px !important;padding-bottom:12px !important;}
.ptb-14 {padding-top:14px !important;padding-bottom:14px !important;}
.ptb-15 {padding-top:15px !important;padding-bottom:15px !important;}
.ptb-16 {padding-top:16px !important;padding-bottom:16px !important;}
.ptb-18 {padding-top:18px !important;padding-bottom:18px !important;}
.ptb-20 {padding-top:20px !important;padding-bottom:20px !important;}
.ptb-25 {padding-top:25px !important;padding-bottom:25px !important;}
.p-0 {padding:0px !important;}
.p-1 {padding:1px !important;}
.p-2 {padding:2px !important;}
.p-3 {padding:3px !important;}
.p-4 {padding:4px !important;}
.p-5 {padding:5px !important;}
.p-6 {padding:6px !important;}
.p-7 {padding:7px !important;}
.p-8 {padding:8px !important;}
.p-9 {padding:9px !important;}
.p-10 {padding:10px !important;}
.p-12 {padding:12px !important;}
.p-14 {padding:14px !important;}
.p-15 {padding:15px !important;}
.p-16 {padding:16px !important;}
.p-18 {padding:18px !important;}
.p-20 {padding:20px !important;}
.p-25 {padding:25px !important;}

/* DISPLAY */
.block {display:block !important;}
.inline-block {display:inline-block !important;}
.inline {display:inline !important;}
.none {display:none !important;}

/* VISIBILITY */
.visible {visibility:visible !important;}
.invisible {visibility:hidden !important;}

/* POSITION */
.static {position:static !important;}
.relative {position:relative !important;}
.absolute {position:absolute !important;}
.fixed {position:fixed !important;}

/* FLOAT */
.left {float:left !important;}
.right {float:right !important;}
.clear {clear:both !important;}

/* ALIGN */
.align-left {text-align:left !important;}
.align-center {text-align:center !important;}
.align-right {text-align:right !important;}
.align-top {vertical-align:top !important;}
.align-middle {vertical-align:middle !important;}
.align-bottom {vertical-align:bottom !important;}

/* FONT STYLE */
.normal {font-style:normal !important; font-weight:normal !important;}
.italic {font-style:italic !important;}
.bold {font-weight:bold !important;}

/* FONT WEIGHT */
.fw-100 {font-weight:100 !important;}
.fw-200 {font-weight:200 !important;}
.fw-300 {font-weight:300 !important;}
.fw-400 {font-weight:400 !important;}
.fw-500 {font-weight:500 !important;}

/* FONT SIZE */
.fs-8 {font-size:8px !important;}
.fs-9 {font-size:9px !important;}
.fs-10 {font-size:10px !important;}
.fs-11 {font-size:11px !important;}
.fs-12 {font-size:12px !important;}
.fs-13 {font-size:13px !important;}
.fs-14 {font-size:14px !important;}
.fs-15 {font-size:15px !important;}
.fs-16 {font-size:16px !important;}
.fs-17 {font-size:17px !important;}
.fs-18 {font-size:18px !important;}
.fs-19 {font-size:19px !important;}
.fs-20 {font-size:20px !important;}
.fs-21 {font-size:21px !important;}
.fs-22 {font-size:22px !important;}
.fs-23 {font-size:23px !important;}
.fs-24 {font-size:24px !important;}
.fs-25 {font-size:25px !important;}
.fs-26 {font-size:26px !important;}
.fs-27 {font-size:27px !important;}
.fs-28 {font-size:28px !important;}
.fs-29 {font-size:29px !important;}
.fs-30 {font-size:30px !important;}
.fs-32 {font-size:32px !important;}
.fs-34 {font-size:34px !important;}
.fs-36 {font-size:36px !important;}
.fs-38 {font-size:38px !important;}
.fs-40 {font-size:40px !important;}
.fs-42 {font-size:42px !important;}
.fs-44 {font-size:44px !important;}
.fs-46 {font-size:46px !important;}
.fs-48 {font-size:48px !important;}