Skip to content
This repository has been archived by the owner on May 6, 2019. It is now read-only.

Current CSS solution is a temporary hack #67

Open
sebastiansandqvist opened this issue Aug 18, 2017 · 1 comment
Open

Current CSS solution is a temporary hack #67

sebastiansandqvist opened this issue Aug 18, 2017 · 1 comment

Comments

@sebastiansandqvist
Copy link
Contributor

sebastiansandqvist commented Aug 18, 2017

The way CSS works in the demo right now is as follows:

First, we import the existingquartz.css, components.css, and quartz-icons.css. This allowed the components to be written without needing brand new CSS.

Because some components need custom CSS in addition to what those stylesheets can provide, the new CSS goes in this repo in /docs/css. Such style changes can be seen as "patches" to go on top of the current quartz css.

Ideally, all of these styles would go directly into quartz. Doing that, while avoiding naming conflicts, probably requires some renaming within both the stylesheets and where the classes are used in the components.

In other places, the legacy CSS placed arbitrary restrictions on the component. A good one to clean up, for example, would be the CSS for the checkbox component.
https://github.com/vhx/quartz-react/blob/master/components/Checkbox/Checkbox.jsx#L34-L44
Notice here that there must be .form > fieldset.checkbox > input[type=checkbox]. This is very restrictive. Instead, the CSS should apply to just a single nesting level. This would allow the html/jsx to be restructured as desired and not tightly couple the CSS representation to the jsx representation.

@sebastiansandqvist
Copy link
Contributor Author

sebastiansandqvist commented Aug 18, 2017

If this gets changed/fixed, the README's usage guide should be updated.

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

No branches or pull requests

1 participant