About ezspaceCSS, bootstrap 3 utility
ezspaceCSS is a powerful spacing utility designed to simplify the process of adding extra margin and padding to your Bootstrap 3 projects. This set of helper classes, built with SASS, is easy to integrate into your project, whether through a Bower package or a CSS file.
One of the unique features of ezspaceCSS is its use of 5px increments, making it easy to quickly add margin and padding space to your layout. This feature is particularly useful for Bootstrap 3 media queries, such as xs-, sm-, md-, and lg-. With ezspaceCSS, you can ensure consistent and precise spacing throughout your project, making it easier to create polished and professional-looking websites.
Additionally, ezspaceCSS offers a wide range of classes that can be used to add margin and padding to different elements and breakpoints, giving you greater control over the layout of your website. It is a great tool for developers who are looking to enhance their Bootstrap 3 projects with more precise and consistent spacing.
In summary, ezspaceCSS is a powerful and versatile spacing utility designed specifically for Bootstrap 3 projects. With its easy integration and intuitive 5px increment system, it offers a simple and effective solution for adding extra margin and padding to your website, making it easy to achieve the desired spacing and layout.
Simple usage for ezspaceCSS helper classes
Getting started with Bootstrap is a breeze as it offers a wide range of customization options. You can choose to use only specific elements or take advantage of the full kit to ensure your project has everything it needs from the start. Additionally, Bootstrap provides a "build your own" feature, allowing you to tailor the download to your specific project needs.
One of the great things about Bootstrap is that it embraces industry best practices, such as pre-processing CSS with LESS and utilizing the familiar jQuery library for minor site behaviors. The framework also includes a solid grid system that is easy to understand due to its simple column class naming conventions. Additionally, the framework comes equipped with a robust set of jQuery features, giving your site a unique touch on a basic level.
However, Bootstrap version 3 did have some shortcomings. It lacked support for flexbox, sizing classes, and native SASS styles. These features have since been added in Bootstrap 4. One of the most significant missing features in version 3 was the lack of a responsive spacing utility, making it difficult to ensure consistent spacing and flexibility for on-the-fly adjustments. This is where ezspacecss comes in.
Ezspacecss is a custom SASS library that can be easily integrated into your project and provides classes for adding extra margin and padding. It follows a simple convention that blends well with the existing Bootstrap class system. For example, the "sm-pl-20" class will add 20 pixels of padding to the left. To add margin, simply change the "p" to "m." Installation is simple, you can use Bower or directly download the zip from the repo. With ezspacecss, you can easily achieve the desired spacing for your project without the limitations of Bootstrap 3.
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