CartoCSS
@tmcw
MapBox
CartoCSS
language
✍ for styling maps
MapBox
CartoDB
OpenStreetMap
☞ why
// hello this
// is carto
#dots {
  marker-width:1;
}
easy?
// i am monospace
#dots {
  marker-width:1;
}
// this is coding
#dots {
  marker-width:1;
}
(stuff made with carto)
why☞
CartoCSS is code
⌘C
⌘V
we learn with ⌘v
why☞
CSS
Cascadenik
Gumption Trap
Can I Approach This?
Resemblance
#world {
  ::foo {
    polygon-opacity:1;
  }
  marker-width:[foo];
}
div {
  background:#f00;
}
i am only pretending
do not be afraid
do not be afraid
stuff that is not css
@variables: 'yes';
.nesting { .selectors { } }
// c++ style comments
spin(2, 2, 2);
(from less.js but not everything from less.js and i do not advise or disadvise the use of less.js but cloudhead did write a darn fine css parser)
〉git shortlog -s -n
591  Tom MacWright
244  Konstantin Käfer
 97  Dane Springmeyer
 67  Young Hahn
 23  AJ Ashton
 12  Konstantin Käfer
 8  Will White
why is this so hard?
style is multi-dimensional
#foo { color: red; }

// ENTER THE TIME DIMENSION
#foo:hover { color: black; }
scale
(zoom)
(fathom)
#foo[zoom > 3] {
  color: red;
}
@minfoo: 3;
#foo[zoom <= @minfoo] {
  color: red;
}
zindex
(stuff on top of each other)
(road trip)
#a { marker-width: 2; }
#b { marker-width: 3; }
#c { marker-width: 4; }
#d { marker-width: 5; }
roads
// cascadenik
#road {
  line-width: 2;
  outline-width: 4;
}
// carto
#road {
  line-width: 2;
  ::outline {
    line-width: 4;
  }
}
ART
(stuff made with carto)
"DESIGN PRINCIPLES" OF CARTO aka ANOTHER PERFECT CODE
1. Carto is friendly
Carto suggests
Carto does not forgive
2. Carto is complete
If you can do it in Mapnik, you can do it in Carto
SIGN THIS NDA WITH YOUR EYES
2. Carto is supported
do not be afraid
vim syntax, codemirror syntax, pre-processing tools, documentation