Create 07-style-methods.md

docs/reference/07-style-methods.md

@@ -0,0 +1,33 @@
+### Style Methods
+
+Method | Options | Returns | Description
+---|---|---|---|
+`setCartoCSS(cartocss)` | `cartocss string` | `this` | style the map rendering using client-side CartoCSS (not available with [Named maps](https://carto.com/docs/carto-engine/maps-api/named-maps/))
+
+Torque supports a limited subset of CartoCSS rules defined in the [torque-reference](https://github.com/cartodb/torque-reference). To see the full list of supported rules, read the [Torque CartoCSS documentation](https://carto.com/docs/carto-engine/cartocss/properties-for-torque/). `value` and `zoom` variables can be used. `value` is the value of aggregation. `zoom` is the current zoom being rendered.
+
+TorqueLayer currently expects `marker` styling.
+
+**Example:**
+```css
+/* This is how a minimal example of a stylesheet for a Torque visualisation would look like. */
+
+Map {
+  -torque-time-attribute: "date";
+  -torque-aggregation-function: "count(cartodb_id)";
+  -torque-frame-count: 760;
+  -torque-animation-duration: 15;
+  -torque-resolution: 2;
+}
+#layer {
+  marker-width: 3;
+  marker-fill-opacity: 0.8;
+  marker-fill: #FEE391; 
+}
+#layer[value = 4] { // Use of the value variable, generated by the function specified in -torque-aggregation-function
+  marker-fill: #FABADA; 
+}
+#layer[zoom = 12] { // Use of the zoom variable
+  marker-width: 10;
+}
+```