About ezspaceCSS, bootstrap 3 utility
ezspaceCSS is a bootstrap 3 spacing utility adding extra margin and padding spacing quickly and easily. This set of bootstrap 3 helper classes are built with SASS and delivered by a bower package or CSS. ezspaceCSS is pre calculated using increments of 5px which allow you to quickly add margin and padding space to your structure. Ideal for Bootstrap 3. media queries like xs-, sm-, md-, and lg-.
Simple usage for ezspaceCSS helper classes
It's easy to get started with bootstrap because it gives you the ability to customize for your project, using as little or as much as you want from bootstrap. Or create a base with the entire kit to ensure you have everything from the start. They also provide a "build your own bootstrap" feature that's built right into the bootstrap site that enables you to customize the download for your project. Another great thing is that they embrace industry best practices with features such as pre-processing css with LESS and uses a familiar javascript library, jQuery for minor site behaviors. It includes a solid grid framework that you can easily get familiar with because of the simple naming convention of their column classes. A robust set jquery features gives your site the extra uniqueness it needs on a basic level. With all of that said, they did leave out some much needed and desired features. In version 3, we miss flex box, sizing classes, and native SASS styles. This has since been added to Bootstrap 4. One of the most important features missing for most, is a responsive spacing utility for adding extra margin and padding. This is important because you want to keep web spacing consistent throughout, yet you still need the flexibility for on-the-fly adjustments when you needed it. This is why I created ezspacecss. With ezspacecss, you can simply integrate this custom SASS library into your project and start using the classes. Install with bower or directly by downloading the zip from the repo. I used a simple convention that blends nicely with the existing bootstrap class system. Such as, sm-pl-20 class will add 20 pixels of padding to the left. For margin, simply change the p to m.
Choose a screen size (based on Bootstrap 3)
Extra Small: xs
Small: sm
Medium: md
Large: lg
Choose padding, margin + side(s)
padding: p
margin: m
Choose Side(s)
top, bottom, topbottom: t, b, tb
left, right, leftright: l, r, lr
Choose pixel size
Increments of 5: 5px - 100px
For example
This css class applies 20px padding to the left of an element on a tablet: .sm-pl-20