ezspaceCSS
spacing utility & helper classes
for Bootstrap 3
Quickly adjust padding and margins with ezspaceCSS—a powerful utility package designed for seamless integration with Bootstrap 3
About
Why would I need ezspaceCSS?
Tired of fiddling with inconsistent margins and padding in your Bootstrap 3 layouts? Meet ezspaceCSS—a lightweight, developer-friendly spacing utility designed to make your life easier. Built with SASS, ezspaceCSS integrates seamlessly into your project, whether you prefer to use a npm package or a plain old CSS file.
What makes ezspaceCSS stand out? Its clever use of 5px increments. Need to quickly tweak margins or padding? Just drop in one of the helper classes, and you're good to go. It's a perfect match for Bootstrap 3's responsive breakpoints (xs-, sm-, md-, and lg-), ensuring your layout looks clean and consistent at every screen size.
With a wide range of spacing classes, ezspaceCSS gives you pinpoint control over your design—no more guesswork, no more uneven spacing. Whether you're fine-tuning a button's padding or aligning content across breakpoints, it's all about keeping your workflow efficient and your designs polished.
In a nutshell, ezspaceCSS is a powerful yet simple tool that's tailor-made for Bootstrap 3 developers. Its intuitive 5px spacing system makes achieving a professional, well-structured layout a breeze. Say goodbye to frustration and hello to a smarter way to style your projects.
Getting Started with Bootstrap: Customization Made Easy
Getting started with Bootstrap is straightforward, thanks to its extensive customization options. Whether you want to use only the specific components you need or load up the full kit to get everything in one go, Bootstrap has you covered. And if you want to go the extra mile, you can take advantage of its "build your own" feature, which lets you fine-tune the download to suit your exact project needs.
What makes Bootstrap so developer-friendly is its focus on industry best practices. It integrates LESS for pre-processing CSS and uses the familiar jQuery library for small interactive behaviors. On top of that, Bootstrap comes with an intuitive grid system that's easy to use, thanks to its simple column class naming conventions. Plus, the robust jQuery components allow you to add subtle but impactful touches to your site's functionality.
That said, Bootstrap 3 did have some limitations. It didn't support flexbox, lacked sizing classes, and didn't natively include SASS support—issues that were addressed in Bootstrap 4. One of the biggest gaps in Bootstrap 3 was its lack of a responsive spacing utility. This made it challenging to maintain consistent and flexible spacing, especially when making quick adjustments. Enter ezspaceCSS.
ezspaceCSS is a custom SASS library that seamlessly integrates with Bootstrap. It provides a set of simple classes to easily add margin and padding to your elements. Its naming conventions align well with Bootstrap's, so it feels like a natural extension of the framework. For instance, using the class sm-pl-20 will add 20px of padding to the left side of an element. Want to add margin instead? Just swap the "p" for an "m." Installation is a breeze—you can install it with npm or download the zip directly from the repo.
First choose a screen size (based on Bootstrap 3)
Extra Small: xs
Small: sm
Medium: md
Large: lg
Then choose a property (margin or padding)
padding: p
margin: m
Then choose sides (right, left, top, bottom)
top, bottom, topbottom: t, b, tb
left, right, leftright: l, r, lr
Finally, add a value (in increments of 5px-100px)
Example: sm-pl-20 adds 20px of padding to the left side of an element at the small screen size
Example: md-plr-15 adds 15px of padding to the left and right side of an element at the medium screen size
Example: lg-mb-35 adds 35px of margin to the bottom an element at the large screen size
With ezspaceCSS, you'll no longer be limited by the spacing restrictions of Bootstrap 3, and you'll have full control over your project's layout and responsiveness. It's the perfect solution for developers looking to add clean, consistent spacing without a hassle.