Website layout sample

File structure

It contains of folders 📂 css/ and 📂 scss/. It is recommended to use scss if you want to customize with your needs. also for complex projects.

You can use any sass compiler like "Prepros.io" or "Codekit" if you are web designer who is scared of terminal window. It is up to you how to compile scss. If you don't want customization then just include final.css file

📂 scss/ folder contains of 📂 components/, 📂 layout/, 📂 utilities/ and some .scss files for settings like theme colors and font sizes

finalcss uses grid system of Bootstrap 5, because it is easy and familiar for many developers.

You can exclude or remove anything from sass (scss/finalcss.scss) file

Add any compponent into components folder and add include it into main finalcss.scss file, then compile to generate css file.

    📂 your-project
    │
    ├── 📂 scss/
    │   │
    │   ├── 📂 components/ ... button, input, checkbox, dropdown, etc 
    │   │
    │   ├── 📂 utilities/ ... utility classes for structure, sizing, spacing and etc,... 
    │   │
    │   ├── 📂 layout/ (optional) to style specific pages 
    │   │
    │   ├── _base-settings.scss  (text sizes, fonts, corder radius, etc) 
    │   │
    │   ├── _grid.scss   (grid by Bootstrap 5.3) 
    │   │
    │   ├── _theme.scss  (all colors for light and dark)
    │   │
    │   └── final.scss 
    │   
    │
    ├── 📂 css/
    │   └── final.css
    └
    📄  sample-admin.html
    📄  sample-hero.html
    📄  sample-table.html
    📄  sample-forms.html
    📄  sample-products.html

Tailwind's approach with component classes

I like Tailwind's approach as it claims that you don't need to think about giving class name for each component. That's great but not for everyting. For elements like button or input, it is easier to manage from single stylesheet. why not create component classes for basic and repetative elements.

Bootstrap has classnames for every component, It also has many utility classes of flexbox and spacing. But you can't create a basic shape with size of 400x400px.

Simplified version of Bootstrap with more utility classes

We created additional utility classes like w-4px, w-8px, w-12px, ..., w-96px, w-100px (means width:100px), same with height, margins and others. More on documentation.

Here is example: of creating a user profile card

How to change theme

Open 📄 theme.scss. It contains css variables for light and dark mode. You can simply change it based on your brand, and compile to generate css file

How to add new component?

Create a new sass file 📄_component_name.scss inside the folder 📂components/ and import into final.scss file by writing @import "components/component_name";

Grid system

FinalCSS fully supports grid system of Bootstrap 5 (including CSS grid).
if you don't need grid system, then you can simply remove @import "grid"; from 📄final.scss file.

Read about Bootstrap's grid system here: https://getbootstrap.com/docs/5.3/layout/breakpoints/

Components

Check the files inside 📂scss/components/ and see components. Most components we use naming from documentation of Bootstrap 5 https://getbootstrap.com/docs/5.3/components/alerts/

Unlike from Bootstrap, we encapsulated each component separatly. For ex. _buttons component inherits colors from theme.scss but all other units like radius and sizes controlled from _buttons.scss file

No chain of variables, No connection between components, No complex sass mixins or functions. All simple and encapsulated

alert
badge
buttons
card
dropdown-menu
form-check-input
form-control
form-label
form-select
nav
segmented-control
table
... more components will be added soon

Most components are NOT same as Bootsrap. We simplified by removing useless styles, Some components made with flexbox. For ex: button .btn component is made with inline-flex.

Button styles we support:

btn-intense, btn-primary, .btn-danger,  btn-secondary, btn-neutral, 
 btn-primary-soft, btn-danger-soft, btn-plain, btn-white

Dropped nonsense button styles like btn-warning, btn-info and some others

Added icon buttons also. add btn-icon to make buttons width and height same.

Button sizing classes btn-lg, or btn-sm

Secondary ❤️

<a class="btn btn-secondary">Secondary</a>
<a class="btn btn-secondary btn-icon"> ❤️</a>

Primary soft large ❤️

<a class="btn btn-lg btn-primary-soft">Secondary</a>
<a class="btn btn-lg btn-primary-soft btn-icon"> ❤️</a>

Utility classes

Check scss/utilities folder. Add your own utility classes if you like

Utility classes is used to create spacing, sizing, structure of layout and so on.
FialCSS supports all utility classes of Bootsrap 5. You can use any classes like mt-5 (margin-top) as per bootstrap's documentation
Read more about bootstrap's utility classes:
https://getbootstrap.com/docs/5.3/utilities/spacing/
https://getbootstrap.com/docs/5.3/utilities/flex/

Additional utility classes for sizing and spacing

In addition, we added sizing (width, height) and spacing (padding, margin, gap) classes into 📂 utilities/ 📄 size.scss. For ex. w-4px (width:4px) or w-96px (width:96px)

Sizing is multiply of 4 (upto 100), and multiply of 10 (upto 240).
Here is full list:
$spacing_nums: 0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240;
Same with sizing classes. You can modify them you wish.

Also there are classes to make rectangles with same width and height . For ex. size-40px creates style { width:40px; height:40px }, Or size-96px creates { width:96px; height:96px }

Same with min-width and min-height, For ex: min-w-240px creates { min-width:240px; }

Documentation is still in proccess of writing

Documentation