Components demo

Version: 0.1 development

TL;DR;

If you don't need to be choosy or configure anything, just grab the following two folders from the repo and drop them into your project

Put this /bl in /resources/views/components
Put this /scss in /resources/

Don't forget to update your vite.config.js file to point to the scss folder instead of the default css.

If you want to configure or see how it works

Normalization

All projects should be normalized. This can be done by including the _normalize.scss file

Colors

All components require colors. That is included in the _bl-colors.css file

Typography

Most components require typography. That is included in the _bl-typography.css file

Universal to components

All components are meant to be dropped into a project with the following structure:

/resources/scss/app.scss and /resources/views/components/bl/

Where /resources/scss/app.scss has the following:

@import 'normalize';
@import 'bl-colors';
@import 'bl-typography';
@import '<what-you-add>';

These components have two files each.

1. blade component
2. scss file

The components are namespaced by folder. This means, as long as the component is in the /resources/views/components/bl/ folder, it doesn't need a special name. However, class names and scss files are specially named:

• Components are named <name>.blade.php and stored in /resources/views/components/bl/
• Classes for them are bl-component-<name>
• SCSS files are named _bl-<category-or-name>.scss

e.g. /bl/h1.blade.php has a class of .bl-component-h1 located in the scss file called _bl-headers.scss

All h* tags are styled in that one scss file. They are in the category of header.

A table component would have 'table' for its name and category:

e.g. /bl/table.blade.php, .bl-component-table, and _bl-table.scss

How to use

• You drop the '.scss' file in the correct place and import it into the app.scss file
• And drop the blade-component file into /resources/views/components/bl/
• You use the component in blade templates using this pattern: <x-bl.h1>Text for component</x-bl.h1>
• All components have one special prop to pass: classNames
• For some components, classNames has some specific classes it accepts. Otherwise, developers can create their own classes and add them to their implementations. Just remember to separate by spaces. e.g. classNames="m0 p1"
• Any additional special props to pass, etc. are in the instructions for each component
• Important: all components require the _normalize.scss and _bl-colors.scss files
• If the component requires any typography, the _bl-typography.css file should be used as well
• To use the utility-classes, that file must be included, too.

If any changes to a component's style need to be made, the changes should be made in its .scss file

Design view

The design components can be viewed on one place in a figma file.

Repo

The repo can be found on github.