question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Refactor css used in examples & guides

See original GitHub issue

After 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:

  1. We clean / refactor style.css a bit to remove unused styles (which is always fine… 😄 ). IMO we should rename it to examples.css to remark it is not official, just a help for the examples.
  2. We create a basic.css or setup.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
  3. We talk a bit in the getting-started guide about what is the basic.css and examples.css, telling the people how to reference them or just copy & paste their code in their on-going work
  4. We reference the basic.css if we want to use & explain very simple examples for the guides (eg. getting started or sources guides).
  5. If the example for the guide requires panels, with title, paragraph… we use the refactored examples.css
  6. 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.
  7. We always add examples.css for non-guide examples, as they always have a panel with a title

Issue Analytics

  • State:open
  • Created 5 years ago
  • Comments:9 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
VictorVelardecommented, Oct 19, 2018

I would say so, I’ll close 1057, cause this has more details

0reactions
VictorVelardecommented, Apr 29, 2019

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found