Refactor css used in examples & guides
See original GitHub issueAfter some problems with examples, detected by @davidmanzanares, and a discussion with also @elenatorro on the use of css & examples, let’s improve its use.
These are the main points we have talked about:
- We clean / refactor
style.css
a bit to remove unused styles (which is always fine… 😄 ). IMO we should rename it toexamples.css
to remark it is not official, just a help for the examples. - We create a
basic.css
orsetup.css
with just the minimum css (no panel, no title… nothing, just the bare map) , solving the problems fixed by David at https://github.com/CartoDB/carto-vl/pull/1040 - We talk a bit in the
getting-started
guide about what is thebasic.css
andexamples.css
, telling the people how to reference them or just copy & paste their code in their on-going work - We reference the
basic.css
if we want to use & explain very simple examples for the guides (eg. getting started or sources guides). - If the example for the guide requires panels, with title, paragraph… we use the refactored
examples.css
- If the example needs custom / advanced styles, we create a different, specific css for it (either in style or external, but explained in the corresponding guide). We keep the reference for the
examples.css
with the common stuff. - We always add
examples.css
for non-guide examples, as they always have a panel with a title
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (9 by maintainers)
Top Results From Across the Web
Refactoring CSS: Introduction (Part 1) - Smashing Magazine
Refactoring is a recommended approach for incrementally improving the CSS codebase while maintaining the current look and feel (design). Team ...
Read more >How to Refactor CSS - A Guide - Hongkiat
How to Refactor CSS – A Guide · 1. Conduct an Initial Audit · 2. Set Up a Manageable Plan · 3. Track...
Read more >Refactoring CSS. What to keep in mind when thinking… | Inktrap
The “component refactor”. This is the refactor that is done with one specific element or component in mind. For example, you've decided to ......
Read more >Refactoring HTML and CSS to improve your codebase
Learn how to write more efficient CSS selectors, reduce redundancy and organize your code to create more maintainable projects.
Read more >CSS Architectures: Refactor Your CSS - SitePoint
Categorize CSS Rules in the Stylesheet · Restructure Styles That Rely on Qualifiers High in the DOM · Use Class Names as Key...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I would say so, I’ll close 1057, cause this has more details
That’s my point. IMO it should be an optional helper, not THE ‘carto-vl.css’ file (maybe we could call it ‘basicViz.css’ or so?). And I would just include there the basics for a full screen map + basic panel.