As we mention multiple times, on our site 😅, Fylgja is component based framework, meaning you can download and use each CSS component separately.
Making it easier to combine and use with other CSS frameworks or to add it to an existing project.
So how do you actually do this?
First make sure to understand what compiler your running. There are 2 use cases;
- SCSS based
- PostCSS based with postcss-import
most other tools have no impact with using Fylgja.
The only components that might conflict are the Utilpack, Transition and Transform components, since these are also utility based CSS components.
So if you are using TailwindCSS you can simply install the
@fylgja/form component and include it in your CSS like this.
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "@fylgja/form"; @import "tailwindcss/utilities";
And now you don’t need to add any CSS classes for your form elements, since the
@fylgja/form component styles them directly.
And this way you can also add more and more Fylgja CSS components without having to create them with utility classes.
So instead having to us
@apply to create a Card component, You can just include it, just as with the form. The only difference is the Fylgja Card component uses classes, but that is just wat we want, moving to a more DRY approach and still using the flexibly of utility classes. 😄
This is a little harder since some components already exists, so make sure to disable the CSS Component you want to replace.
So you can add CSS Components that don’t exist in Bootstrap, or replace existing ones with Fylgja CSS components.
For Bootstrap you could extend the utilities with our Utilpack component, adding more utility power, or add some Native CSS components like the form to simplify the HTML.
So how do you actually remove CSS components from Bootstrap?
First make sure that you don’t import Bootstrap using a single import. Instead load everything from the
bootstrap.scss file separately,
load everything separately, like this;
// Configuration @import "functions"; @import "variables"; @import "mixins"; @import "utilities"; // Layout & components @import "root"; @import "reboot"; @import "type"; ... @import "offcanvas"; @import "placeholders"; // Helpers @import "helpers"; // Utilities @import "utilities/api";
and include this in your
main.css with the newer
Now in your
main.css add your Fylgja Components like you normally do. And in your custom Bootstrap import, you can disable unused components or components you want to replace with Fylgja Components.
This Post and Guide is originally from the Fylgja site