Possible to use pico inside custom container class

[sajjadalis]

This looks great. Minimal and nice design. Thanks for creating this.

I was thinking to create a setting page with pico but using it inside CMS like WordPress back-end would certainly cause issues as WordPress default styles will interfere or vice-versa.

I think it would be great if there is some easy way to use a single "custom container" class to make pico work only inside that.

for example.

HTML

<div class="pico-container">
<h1>Plugin Settings</h1>
<form>
<input type="text" name="name" />
<input type="submit" value="Submit" />
</form>
</div>

CSS

.pico-container {}
.pico-container h1 {}
.pico-container input {}
.pico-container input[type=submit]{}

That way, WordPress default styles will not interfere with my setting page as well as pico will not cause any issues outside .pico-container class.

[lucaslarroche]

Interesting use case.

But I probably won't do a version with wrapper.
Mainly for readability and maintenance reasons.

On the other hand, if I ever make a generator (example), I would probably integrate this possibility.

If you want to compile your own version of Pico with a wrapper, it's pretty easy with SASS.
You just need to wrap the imports:

.pico-container {
  @import "layout/document"
  @import "layout/sectioning"
  @import "layout/container"
  ...
}

[sajjadalis]

Yes. a generator with custom wrapper would probably help many users who want to use pico along with other stylesheets.

Thanks for pointing to SASS. I need to look into this. Thanks