Refactor css used in examples & guides

[VictorVelarde]

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… :smile: ). 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

[VictorVelarde]

This probably should be developed after having stabilized the guides, to avoid messing it up. Meanwhile, let's use the current style.css

[VictorVelarde]

We should also remove the CSS errors that have been found, as said in https://github.com/CartoDB/carto-vl/issues/1057

[rochoa]

Isn't #1057 duplicating this one?

[VictorVelarde]

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

[makella]

Pinging this issue so we can discuss again.

A lot of times, people will go to our examples section, grab an example, modify it and publish it. I am one of them! :)

To echo @VictorVelarde's points above, I think we should have a generic style.css that is not tied to a version. For example, I had made a map using an example from v1.2.4 and realized that it couldn't find the needed css style. I wanted to keep the title box and other components from the original example and that's why having that css was needed for my map.

Basically, for the cases where a user will want to use an example directly (with panel and all), what is the best workflow?

[elenatorro]

We could have a basic (and clean) style.css file loaded in the CDN. I also think the right option is avoid having it tied to a version. By being version agnostic we've freedom to change it an upload it to the CDN as many times as we want. How does it sound?

[VictorVelarde]

The css in the dev-center examples currently includes:

• basic map properties
• the panel
• lots of different "small things"

Also, there are some examples with pretty specific styles, such as 'animations'.

But I'm not sure about going the CDN way.

What pieces will you include in that CDN css? How that would fit the Airship css? Would it make sense to keep 1 or 2 css files in an absolute url, but not in the CDN? I mean, to just use files like: https://carto.com/developers/carto-vl/examples/maps/style.css (completely optional)

[elenatorro]

The purpose of using the CDN is to serve this file but not through GitHub (we did a similar change here https://github.com/CartoDB/developers/pull/522)

I think we shouldn't worry about if this fits with Airship. At the end, it's only the current CSS that we're using in the example and we're also using it along with Airship. In some examples it'd be loaded, it others it wouldn't.

[VictorVelarde]

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.