PicoCSS & Bootstrap

[jon49]

I noticed that you started bringing in Bootstrap features. I was thinking PicoCSS was missing this feature also. But the whole point of Pico is to be small and mostly no classes needed. It acts as a starting point for your CSS. But the minimalism makes it hard to use in larger projects.

Another option instead of adding Bootstrap features directly is to do this in your main css file like so:

@import url("/css/pico.min.css") layer;
@import url("/css/bootstrap.utils.css");

I haven't tested this exact scenario as I just started to add my CSS in the same file and didn't import a bootstrap file. But the layer parameter for the first import tells the browser that everything after it will override any CSS in the imported file as the CSS in the layer file will have a specificity of 0-0-0 to all the CSS that comes after.

[Yohn]

I will say, I come from a Bootstrap background, and have helped with Bootstrap a lot since V2 many years ago. More recently I feel as though Bootstrap is bloated, and a lot of excess code that's not needed in todays market, so I wanted to explore something not as bloated and excess as Bootstrap has become in my opinion.

When I first started with PIco, I added the rows and timeline features. The row feature is heavily inspired by Bootstrap, yes, and I did that just to make it easier for me to transition to Pico, which I'm sure will help others as well. Last month I added a note to the settings file of PicoCSS to look into using grid-template and removing the row system that I added.

PicoCSS/scss/_settings.scss

Lines 134 to 140 in 73645e4

	// V3 Notes
	// Add <aside> to layout folder, and have it auto build the a grid system
	// will add notes someplace about idea on how to enable.
	// use grid-template
	// maybe only then keep the grid and remove the row system.
	"layout/grid": true,
	"layout/row": true,

With the exception of the timeline and floating labels, all of the features that have been added to PicoCSS came from discussions or pull requests within the original Pico repo. Then with each addition I have added I've added them the same way the original Pico would, with the settings file to enable or disable them.

You can see the list of modules in this fork by looking at the _settings.scss and disabling what you would rather not have included. Some are already disabled, because I added them via pull requests, and then found issues with them, so disabled by default, and will remove with V3. I also have notes in there for some direction I would go for V3.

Then with going back to your point with keeping the css minimal and no classes, you can see most of the additions that I have added (except timeline and rows) I did not add additional classes, as I was trying to keep that to a minimum.

I do like your idea though, with using the layer feature of the @import CSS rules, but that to me would be adding more css and in turn making the css larger than it needs to be, since we can disable the scss modules via the settings file.

[jon49]

That makes complete sense. Thanks for the thorough reply and for reviving PicoCSS!