frequent-styles - Streamlined CSS Classes for Enhanced Styling
Introduction
Dive into the world of streamlined styling with my latest project, "frequent-styles" - a comprehensive package of commonly used CSS classes. As a frontend developer, I've crafted this library to simplify and enhance the styling process, offering a range of versatile and intuitive classes for various design elements.
Project Features
📦 Set of Frequently Used CSS Classes
Npm
npm i frequent-styles
Yarn
yarn add frequent-styles
Abbreviations:
left => lright => rtop => tbottom => bmargin => mpadding => p
Values: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100;
Examples:
| Class | Value |
|---|
| mr-10 mb-50 | margin-right: 10px; margin-bottom: 50px; |
| m-25 | margin: 25px; |
| p-50 | padding: 50px; |
| pr-35 pl-100 | padding-right: 35px; padding-left: 100px; |
| Class | Value |
|---|
| text-center | text-align: center; |
| text-capitalize | text-transform: capitalize; |
| text-uppercase | text-transform: uppercase; |
| text-lowercase | text-transform: lowercase; |
| text-truncate | white-space: nowrap; overflow: hidden; text-overflow: ellipsis; |
| fw-normal | font-weight: normal; |
| fw-bold | font-weight: bold; |
| Class | Value |
|---|
| opacity-1 | opacity: 0.1; |
| opacity-2 | opacity: 0.2; |
| opacity-3 | opacity: 0.3; |
| opacity-4 | opacity: 0.4; |
| opacity-5 | opacity: 0.5; |
| opacity-6 | opacity: 0.6; |
| opacity-7 | opacity: 0.7; |
| opacity-8 | opacity: 0.8; |
| opacity-9 | opacity: 0.9; |
| opacity-10 | opacity: 1; |
| Class | Value |
|---|
| h100 | height: 100%; |
| w100 | width: 100%; |
| d-ib | display: inline-block; |
| d-if | display: inline-flex; |
| d-flex | display: flex; |
| d-block | display: block; |
| justify-between | justify-content: space-between; |
| justify-around | justify-content: space-around; |
| justify-center | justify-content: center; |
| justify-end | justify-content: flex-end; |
| align-center | align-items: center; |
| align-end | align-items: flex-end; |
| align-start | display: inline-block; |
| flex-column | flex-direction: column; |
| flex-row | flex-direction: row; |
| m-auto | margin: auto; |
| ml-auto | margin-left: auto; |
| mr-auto | margin-right: auto; |
| pos-r | position: relative; |
| pos-a | position: absolute; |
| Class | Value |
|---|
| cu-p | cursor: pointer; |
Explore frequent-styles on NPM
Visit the NPM page to install and integrate the frequent-styles package into your projects: frequent-styles on NPM
Links