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-.
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.
Extra Small: xs
Small: sm
Medium: md
Large: lg
padding: p
margin: m
top, bottom, topbottom: t, b, tb
left, right, leftright: l, r, lr
Increments of 5: 5px - 100px
This css class applies 20px padding to the left of an element on a tablet: .sm-pl-20
You can download the collection of ezspaceCSS helper classes or install directly in to your project with bower.
$ bower install ez-space-css-repo
Visit Github RepoHere's a few hand-picked books to learn more about CSS.
Here's how you establish a good starting point, then add ezspaceCSS bootstrap 3 spacing utility to your project.
Collaborators Welcome! Please feel free to submit a pull request for review or contact me with any questions.