cartodb / cartoassets

Common assets shared across several CARTO repositories

CartoAssets

Share frontend assets between different CartoDB repositories

Installation

As easy as:

• npm install --global grunt-cli Grunt installation
• npm install --global gulp-cli Gulp installation
• npm install -g markdown-styleguide-generator StyleGenerator installation
• npm install

Build

If you want to use any of the CartoAssets components, after the installation just run:

• grunt build

Development

It will generate a UI documentation about the components in this repository:

• grunt dev

If you want to check the documentation, it is generated in the dist folder.

How to add/update the icon font

See this instructions

Publish a new version in NPM

In order to publish a new version of CartoAssets you need to:

• Change version of the package.
• Be a collaborator of the npm module (Send an email to xavijam[at]cartodb.com).

If you have these previous steps done:

• npm publish

Publish CartoAssets styleguide and documentation in GH-Pages

Just run this command:

• grunt publish

Browser support

31+ ✔	38+ ✔	11+ ✔	31+ ✔	8+ ✔

cartoassets's Issues

Review components under Firefox

New style for check and radio buttons

Design issue: https://github.com/CartoDB/design/issues/472

Default and Disabled:

• Remove inner icon

Hover and Focus:

• Apply the border color to the icon

Selected stays the same

prepare proposal for grid

• Add automatic margin helpers (for/loop, $baseSpace: 2px, [s, m , l, h]).
• Create base grid helpers (CDB-ColX).

create button out of widget filter

to be used in description

Fix utility font URL protocol

Fix min-width header elements

move uppercase helper

Rename menu selected class and update example

• change is-active to is-selected
• change a tag to button tag

Slider does not work in non Mac

http://cartodb.github.io/CartoAssets/styleguide/#Forms-Sliders

Chrome under Linux

userAgent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36

Add helper for ellipsis

Missing Montserrat font family

Related to CartoDB/cartodb#14237

Context

We have OpenSans already in the project but not Montserrat. Hangar project uses both of them. It seems it makes sense to add it here, so we can have the same fonts easily available

Review CDB-Button sub classes

• Check CDB-Button-Text class, text should be in lower case.
• We should remove CDB-Text due to the fact that we already have a CDB-Button-(T)ext class, or viceversa.

<button class="CDB-Button CDB-Button--primary">
  <span class="CDB-Button-text is-semibold CDB-Size-medium">SAVE</span>
</button>

Move reset stylesheet from utilities to new cdb-utilities

Also, creating our reset stylesheet could make sense.

Fix down arrow icon in CartoIcon

Currently look like that:

Better if that corner is clear :)

Give some :heart: to styleguide page

@MariaCheca @piensaenpixel

Fix styles for Shapes items

The shapes styles don't render anything. Have a look and try to fix them.

Review css lint and hound

Hound says that "Begin pseudo elements with double colons: ::"

Add textarea input to stylesheet

Add to form components the textarea input.

consolidate CDB-Button to make it work with overlays

from CartoDB/carto.js#1512

/cc @piensaenpixel

Include icons from CartoDB Editor

There are four missing icons in the icon-font of Editor:

Step component

Add our CSS dev style rules

Add namespace to SCSS folders

The method we are going to use to import specific files from CartoAssets uses an entry file to load the SCSS (see for example the one for DeepInsights here)

In the following example, we are importing the sizes & mixins files from CartoAssets, but the developer could be mislead and think that those libraries come from the local project and not CartoAssets:

// Variables and functions
@import 'variables/sizes';
@import 'utilities/mixins';
// Deep-insights styles
@import 'map/canvas';
@import 'map/dashboard-info';

I think it would make sense to add a namespace to the variables, utilities, etc. folders in order to avoid confusion.

We would have something like this instead:

// Variables and functions
@import 'cdb-variables/sizes';
@import 'cdb-utilities/mixins';
// Deep-insights styles
@import 'map/canvas';
@import 'map/dashboard-info';

What do you think, @xavijam, @piensaenpixel, @matallo, & @viddo?

Input element size changes if text is too long

There should be an ellipsis property to avoid it.

Arithmetic calculations input dropdown

Add namespace to icon-font

Add new reset styles

The background-color, border, border-radius, and padding for buttons, both button element and input with types button, submit and reset has changed in chrome for the macOS version, we should add resets for this properties since right now it's breaking builder's UI:

The summary of changes:

Before these CLs, the default style for buttons was:
  background-color: ButtonFace; (-> #C0C0C0)
  border: 2px outset ButtonFace;
  padding: 2px 6px 3px 6px;

After these CLs, it is:
  background-color: ButtonFace; (-> #FFFFFF)
  border-color: #D8D8D8 #D1D1D1 #BABABA;
  border-radius: 4px;
  border-style: solid;
  border-width: 1px;
  padding: 1px 7px 2px 7px;

More info about this changes: https://www.chromestatus.com/features/5743649186906112

Add drop icon

#10

Fix style for buttons in the CDB-HeaderInfo

Carousel components

Add carousel components to the stylesheet.

Remove content character from :after

@xavijam commented on Wed Sep 21 2016

😂 please.

cc @piensaenpixel @MariaCheca

Add width and height properties to shapes

This improvement will fix the relative size of the shapes when it is part of a flex display, which can break the composition of the icon:

Add common icon-font

To take into account:

• is Editor icon-font a good start?
• should we place the icon-font generated? or should it generated in every module/repository?

Add simple color input

Review components under Internet Explorer 10

Take into account our browsers support table, check README.md.

@MariaCheca @piensaenpixel

Change 'toogle' for 'toggle' in toggle elements classes

Better spell it correctly :)

update README.md

• following instructions in the README.mdthere was a missing npm install step which keep showing

npm WARN [email protected] requires a peer of grunt@~0.4.5 but none was installed. npm WARN [email protected] requires a peer of grunt@~0.4.0 but none was installed. npm WARN [email protected] requires a peer of grunt@~0.4.0 but none was installed. npm WARN [email protected] requires a peer of grunt@~0.4.1 but none was installed.

u-tSpace-xl is wrong

Rest of modifiers are --x whatever, but only that one is with -xl. Please let's change it and change the references in CARTO builder too.

Checkbox mark element broken

The checkbox mark is not rendered properly, looks like the two elements that conform it are separated.

cc @piensaenpixel

Optimize icon-fonts with SVGOMG

This optimization saves size and cleans the SVG file: https://jakearchibald.github.io/svgomg/

Add CDB- prefix

Input range is not working properly in Chrome under Ubuntu OS

cc @piensaenpixel

Add release process / versioning

Right now we're using CartoAssets#master in the package.json in Builder, which could lead to problems if we merge/deploy things without caution. We should start versioning CartoAssets the same way we do in cartodb.js and deep-inisghts.js, using semver, creating git tags, and maybe publishing it to npm to get the full power of semver.

At the same time, we could review the tools/build process used in CartoAssets and try to improve it.

Pinging @Jesus89 since he's the one who created the release process document.

"Hollow" icons do not show up correctly on Linux

This is how the icon font is shown on Linux (Firefox or Chrome):

Notice that the two hearts icons (first row) look the same or the download icon (second row) is shown as a circle (without the white arrow inside). There are more examples. In general, icons that have a white drawing on a black background are not displayed correctly.

cc @xavijam

Possibility to require some (not all) assets

For the moment, if any repository/module needs CartoAssets, we have to require everything, without restriction, in order to avoid compatibility problems.

For example, for scss files within a scss grunt task:

...
    dist: {
        options: {
          sourceMap: false,
          outputStyle: 'compressed'
        },
        files: [{
          expand: true,
          src: [
            'node_modules/cartoassets/src/scss/**/*.scss',
            'node_modules/perfect-scrollbar/**/*.scss',
            'themes/scss/**/*.scss'
          ],
          dest: '.tmp/scss',
          ext: '.css'
        }]
      }
...

In the future would be great if user could decide which assets are necessary or not.

cc @viddo @javierarce

Add CDB namespace to 'Text' and 'Size' components

With @piensaenpixel.