Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible to use pico inside custom container class #31

Closed
sajjadalis opened this issue Sep 6, 2021 · 2 comments
Closed

Possible to use pico inside custom container class #31

sajjadalis opened this issue Sep 6, 2021 · 2 comments

Comments

@sajjadalis
Copy link

sajjadalis commented Sep 6, 2021

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
Copy link
Member

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
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants