Finalcss is inspired by Bootstrap's grid system and Tailwind's breakpoint utility classes (classname, desktop:classname).
We've included both Mobile-first and Desktop-first approach.
Here is how it works: class="flex-col desktop:flex-row.
This means, {flex-direction:column} by default for all breakpoints, then it overrides to {flex-direction:row} on large and upper breakpoints.
Another way of doing this, class="flex-row mobile:flex-col.
This means, {flex-direction:row} by default for all breakpoints, but on mobile (max-width:640px) it will be {flex-direction:column}
To customize breakpoints open 📂 scss/_base-settings.scss.
There you wil find following sass map:
$breakpoints: (
'sm': 'min-width: 641px', // not mobile, - small tablet and up
'md': 'min-width: 921px', // medium and up - larger tablet and up
'lg': 'min-width: 1201px', // large and up - desktop and any widescreen
'tablet': 'max-width: 920px', // Tablet and any smaller device
'mobile': 'max-width: 640px', // mobile only
);
Option 1 - custom column width
Option 2 - Equal columns
row row-cols-1, row row-cols-2, row row-cols-3
Option 3 - Percentage
w-10%, w-90%, w-100% or w-full
Option 4 - CSS Grid
d-grid grid-template-cols-12
Gaps
gap-1, gap-2, gap-3, ... gap-10
gap-1 = 4px, gap-10 = 40px