DESCRIPTION AND IMPORT

mini-css-library is a (indeed) small CSS library that provides the developer with some basic classes for managing the application's style. It is inspired by Bootstrap and follows its syntax. Once installed in the project, it needs to be imported:

import 'mini-css-library/mini-css-library.min.css'

and a variables file must be added, giving the developer the ability to modify the style. You can copy the file from here:

/*_variables.css*/

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root{

    /* SPACING */
    --ma-1-tb: 1rem;
    --ma-1-lr: 1rem;
    --ma-2-tb: 2rem;
    --ma-2-lr: 2rem;
    --ma-3-tb: 3rem;
    --ma-3-lr: 3rem;
    --ma-4-tb: 4rem;
    --ma-4-lr: 4rem;
    --ma-5-tb: 5rem;
    --ma-5-lr: 5rem;
    --mx-1: 1rem;
    --mx-2: 2rem;
    --mx-3: 3rem;
    --mx-4: 4rem;
    --mx-5: 5rem;
    --my-1: 1rem;
    --my-2: 2rem;
    --my-3: 3rem;
    --my-4: 4rem;
    --my-5: 5rem;
    --ml-1: 1rem;
    --ml-2: 2rem;
    --ml-3: 3rem;
    --ml-4: 4rem;
    --ml-5: 5rem;
    --mr-1: 1rem;
    --mr-2: 2rem;
    --mr-3: 3rem;
    --mr-4: 4rem;
    --mr-5: 5rem;
    --mt-1: 1rem;
    --mt-2: 2rem;
    --mt-3: 3rem;
    --mt-4: 4rem;
    --mt-5: 5rem;
    --mb-1: 1rem;
    --mb-2: 2rem;
    --mb-3: 3rem;
    --mb-4: 4rem;
    --mb-5: 5rem;
    --pa-1-tb: 1rem;
    --pa-1-lr: 1rem;
    --pa-2-tb: 2rem;
    --pa-2-lr: 2rem;
    --pa-3-tb: 3rem;
    --pa-3-lr: 3rem;
    --pa-4-tb: 4rem;
    --pa-4-lr: 4rem;
    --pa-5-tb: 5rem;
    --pa-5-lr: 5rem;
    --px-1: 1rem;
    --px-2: 2rem;
    --px-3: 3rem;
    --px-4: 4rem;
    --px-5: 5rem;
    --py-1: 1rem;
    --py-2: 2rem;
    --py-3: 3rem;
    --py-4: 4rem;
    --py-5: 5rem;
    --pl-1: 1rem;
    --pl-2: 2rem;
    --pl-3: 3rem;
    --pl-4: 4rem;
    --pl-5: 5rem;
    --pr-1: 1rem;
    --pr-2: 2rem;
    --pr-3: 3rem;
    --pr-4: 4rem;
    --pr-5: 5rem;
    --pt-1: 1rem;
    --pt-2: 2rem;
    --pt-3: 3rem;
    --pt-4: 4rem;
    --pt-5: 5rem;
    --pb-1: 1rem;
    --pb-2: 2rem;
    --pb-3: 3rem;
    --pb-4: 4rem;
    --pb-5: 5rem;

    /* BORDER RADIUS */
    --radius-1: .5rem;
    --radius-2: 1rem;
    --radius-3: 1.5rem;
    --radius-4: 2rem;
    --radius-5: 2.5rem;
    --radius-round: 50%;

    /* FONT FAMILY */
    --font-family-primary: 'Poppins', sans-serif;
    --font-family-secondary: "Roboto", sans-serif;
    --font-family-tertiary : "Inter", sans-serif;

    /* FONT SIZE */ 
    --size-default: 14px;
    --size-default-medium: 15px;
    --size-default-large: 16px;
    --size-h1: 3.5rem;
    --size-h2: 2.5rem;
    --size-h3: 2.1rem;
    --size-h4: 1.6rem;
    --size-h5: 1.3rem;
    --size-h6: 1.1rem;
    --size-small: .85rem;
    --size-extra-small: .7rem;
    --size-medium: 1.2rem;
    --size-large: 1.4rem;

    /* COLORS */
    --color-default: #000;
    --bg-color-default: #fff;
    --color-white: #fff;
    --color-black: #000;
    --color-theme-1: #f44336;
    --color-theme-1-1: #e57373;
    --color-theme-1-2: #d32f2f;
    --color-theme-2: #e91e63;
    --color-theme-2-1: #f06292;
    --color-theme-2-2: #c2185b;
    --color-theme-3: #9c27b0;
    --color-theme-3-1: #ba68c8;
    --color-theme-3-2: #7b1fa2;
    --color-theme-4: #673ab7;
    --color-theme-4-1: #9575cd;
    --color-theme-4-2: #512da8;
    --color-theme-5: #3f51b5;
    --color-theme-5-1: #7986cb;
    --color-theme-5-2: #303f9f;
    --color-theme-6: #2196f3;
    --color-theme-6-1: #64b5f6;
    --color-theme-6-2: #1976d2;
    --color-theme-7: #03a9f4;
    --color-theme-7-1: #4fc3f7;
    --color-theme-7-2: #0288d1;
    --color-theme-8: #00bcd4;
    --color-theme-8-1: #4dd0e1;
    --color-theme-8-2: #0097a7;
    --color-theme-9: #009688;
    --color-theme-9-1: #4db6ac;
    --color-theme-9-2: #00796b;
    --color-theme-10: #4caf50;
    --color-theme-10-1: #81c784;
    --color-theme-10-2: #388e3c;
    --color-theme-11: #8bc34a;
    --color-theme-11-1: #aed581;
    --color-theme-11-2: #689f38;
    --color-theme-12: #cddc39;
    --color-theme-12-1: #dce775;
    --color-theme-12-2: #afb42b;
    --color-theme-13: #ffeb3b;
    --color-theme-13-1: #fff176;
    --color-theme-13-2: #fbc02d;
    --color-theme-14: #ffc107;
    --color-theme-14-1: #ffd54f;
    --color-theme-14-2: #ffa000;
    --color-theme-15: #ff9800;
    --color-theme-15-1: #ffb74d;
    --color-theme-15-2: #f57c00;
    --color-theme-16: #ff5722;
    --color-theme-16-1: #ff8a65;
    --color-theme-16-2: #e64a19;
    --color-theme-17: #795548;
    --color-theme-17-1: #a1887f;
    --color-theme-17-2: #5d4037;
    --color-theme-18: #9e9e9e;
    --color-theme-18-1: #e0e0e0;
    --color-theme-18-2: #616161;
    --color-theme-19: #607d8b;
    --color-theme-19-1: #90a4ae;
    --color-theme-19-2: #455a64;

}

You are free to modify the variables to adapt the library to your project.

BREACKPOINT

The library uses the following breakpoints:

/*xs*/
@media (min-width: 576px) { ... }

/*sm*/
@media (min-width: 768px) { ... }

/*md*/ 
@media (min-width: 992px) { ... }

/*lg*/ 
@media (min-width: 1200px) { ... }

/*xl*/ 
@media (min-width: 1400px) { ... }

IMPORTANT

The classes use the following syntax:

what-{breakpoint}-how

For example:

.flex-align-center{
    align-items: center;
}
.flex-lg-align-center{
    align-items: center;
}

GRID SYSTEM

We can use Bootstrap-like classes to define the grid. We have .container, which will be responsive for various breakpoints whith margin: 0 auto; pre-setting, and .container-fluid, which will always have a width of 100%.

Then we have .row, which introduces the display: flex and flex-wrap properties to accommodate our columns.

And finally, we have the columns distributed in a 12-column grid, as in the example:

.col-2
.col-xs-3
.col-lg-5

We can also define an offset from 0 to 12 for each breakpoint:

.offset-0
.offset-xs-6

SPACING

Spaces are defined by prefixes p (padding) & m (margin), combined with sevens abbreviations that identify the position:

• a(all): top, right, bottom, left
• x: right, left
• y: top, bottom
• t: top
• r: right
• b: bottom
• l: left

And numbers from 1 to 5 to define the quantity, you can define them in the _variables.css file. For example:

.mt-2
.py-5

Padding and margins can also be added for the various breakpoints:

.mt-lg-2
.py-sm-5

FLEX

The available flex classes are as follows and are also available for each breakpoint:

.flex-column{
    flex-direction: column;
}
.flex-row{
    flex-direction: row;
}
.flex-wrap{
    flex-wrap: wrap;
}
.flex-no-wrap{
    flex-wrap: nowrap;
}
.justify-between {
    justify-content: space-between;
}
.justify-start{
    justify-content: flex-start;
}
.justify-end{
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.align-center {
    align-items: center;
}
.align-start{
    align-items: flex-start;
}
.align-end{
    align-items: flex-end;
}

/*example for breackpoint*/
.justify-xs-center {
    justify-content: center;
}

DISPLAY

There are 5 display classes available for every breakpoint, with the prefix d-:

.d-none
.d-block
.d-flex 
.d-inline-block
.d-inline-flex

/*example for breackpoint*/
.d-sm-flex

POSITION

For positioning, we use classes with the prefix pos-. The available types of positions are:

• relative
• absolute
• fixed
• sticky

For example:

.pos-absolute

There are also additional classes that allow us to position an element according to certain parameters. In addition to "expande," which you will have an example of here, the others are easily understandable:

.pos-expande{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.pos-center
.posX-center
.posY-center
.pos-top-left
.pos-top-right
.pos-bottom-left
.pos-bottom-right

/*example for breackpoint*/
.posY-md-center

TEXT ALIGN

Classes for text alignment are also available for every breakpoint:

.text-center
.text-right
.text-left
.text-justify

/*example for breackpoint*/
.text-lg-left

DIMENSION

For each breakpoint, there are also w-number and h-number classes available to set width and height in percentage.

The available numbers are: 0, 25, 50, 75, 100.

.w-25
.h-100

/*example for breackpoint*/
.h-md-50

In addition to these, we have the classes .w-max-content and .w-fit-content available for all breakpoints as well.

For dimensions that are based on viewport width and viewport height, we have .vw-100 and .vh-100.

Finally, we can set both the minimum and maximum height and width to 100% with classes like .max-h-100 and .min-w-100, etc.

OVERFLOW

For overflow, we also have classes available for each breakpoint. The functionality of these classes is easy to understand:

.overflow-auto
.overflowX-auto
.overflowY-auto
.overflow-hidden
.overflowX-hidden
.overflowY-hidden
.overflow-scroll
.overflowX-scroll
.overflowY-scroll

/*example for breackpoint*/
.overflow-md-scroll

BORDER RADIUS

For border-radius, we have 5 different intensities available that you can easily modify in the _variables.css file, and they are also available for each breakpoint.

.radius-1
.radius-2
.radius-3
.radius-4
.radius-5
.radius-round

/*example for breackpoint*/
.radius-sm-4

Z_INDEX

The library also provides 10 different z-index intensities in ascending order, from 1 to 10, available for each breakpoint.

.z-inde-1
.z-index-2
.z-index-3
/*...*/
.z-index-10

/*example for breackpoint*/
.z-index-xs-9

TABLE

We can have an optimized basic configuration for tables by simply wrapping the table in a div with the desired dimensions and .overflow-auto, and giving the table the class .table.

COLOR

We can customize the colors in the _variables.css file, and for each color, we have available classes for both the color and the background color. Fro example:

.color-2
.bg-color-4-2

In addition, we have the following classes:

.color-white
.color-black
.bg-color-transparent
.bg-color-white
.bg-color-black

The variables --color-default and --bg-color-default set the color and background color for the entire application.

P.S. Color classes are not applicable for breakpoints.

TYPOGRAPHY

The --size-default and --font-family-primary in the _variables.css file are set respectively as the default size and font-family for the entire application.

Regarding --size-default, it changes with medium and large based on breakpoints, and all the "sizes" (rem) of the application (margin, padding, etc.) are calculated based on it.

The library sets the font-size of the headings based on the respective variables: --size-h1, --size-h2, etc., and provides 6 classes with the corresponding sizes: .h1, .h2, .h3, etc.

Additionally, we have the following variables to which the following classes refer:

/* --size-extra-small */
.extra-small
/* --size-small */
.small
/* --size-medium */
.medium
/* --size-large */
.large

Regarding font-weight, we have the following classes available:

.bold-500{
    font-weight: 500;
}
.bold-600{
    font-weight: 600;
}
.bold-700{
    font-weight: 700;
}

As mentioned above, the variable --font-family-primary sets the default font-family, but we also have two other variables for font-family: --font-family-secondary and --font-family-tertiary, which can be applied to any element using the respective classes: .font2 and .font3.

GENERAL

The library sets box-sizing, margin, and padding by default in the following way:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

It provides a customized scrollbar that will apply to all scrollable elements and sets the font-size and font-family to inherit for all elements.

Additionally, it resets the style of the following elements:

a{
    text-decoration: none;
    color: var(--color-default);
}
fieldset {
    border: none;
}
button{
    background-color: transparent;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: all .2s ease;
}
button:active{
    transform: translateY(-2px);
}

and it provides the following generic classes that we can use as desired:

.list-unstyled{
    list-style: none;
}
.uppercase{
    text-transform: uppercase;
}
.lowercase{
    text-transform: lowercase;
}
.capitalize{
    text-transform: capitalize;
}
.pointer{
    cursor: pointer;
}
.no-user-select *{
    -webkit-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

ENJOY!!!