GitBook: [master] 5 pages and one asset modified

blueneogeo · gitbook-bot · commit f70c2b72381d · 2018-12-14T13:55:51.000Z
diff --git a/.gitbook/assets/screen-shot-2018-12-14-at-11.57.56-am.png b/.gitbook/assets/screen-shot-2018-12-14-at-11.57.56-am.png
diff --git a/SUMMARY.md b/SUMMARY.md
@@ -10,6 +10,7 @@
 * [Test drive](get-started/test-drive.md)
 * [VS Code support](get-started/vs-code-support.md)
 * [Examples](get-started/examples.md)
+* [Styling with CSS](get-started/styling-with-css.md)
 
 ## Guide
 
@@ -20,6 +21,6 @@
 
 ## Shortcuts Reference
 
-* [Tag shortcuts](reference/tag-shortcuts.md)
-* [Property shortcuts](reference/css-properties.md)
+* [Shortcut tags](reference/tag-shortcuts.md)
+* [Shortcut properties](reference/css-properties.md)
 
diff --git a/get-started/styling-with-css.md b/get-started/styling-with-css.md
@@ -0,0 +1,201 @@
+# Styling with CSS
+
+## Structuring your files for styling
+
+**You can use CSS or Sass to set any property to any class or id in your Pug or HTML file.**
+
+To do so, create a style file with the same name as your Pug or HTML file, in the same directory. For example, if you have a startpage.pug, to style it simply add a startpage.sass in the same directory.
+
+Recommendation: create a directory per layout, with the name of your layout. Then inside, create a pug file, sass file and your model and other supporting files.
+
+Example structure:
+
+![](../.gitbook/assets/screen-shot-2018-12-14-at-11.57.56-am.png)
+
+See the[ example projects](examples.md) for more ideas for structuring your application.
+
+## Applying styles as properties
+
+**You can apply extra properties to html elements by adding them through style rules.**
+
+For example, given the following Pug:
+
+```c
+.message hello!
+```
+
+This will translate into the following HTML:
+
+```markup
+<div class="message">hello!</div>
+```
+
+You can then use the `.message` class to assign properties using Sass or CSS:
+
+```css
+.message
+    width: 200
+    height: 200
+```
+
+The resulting Dart will be a combination of your layout and style:
+
+```dart
+Container(
+  child: Text( 
+    'hello!',
+  ),
+  width: 200,
+  height: 200,
+);
+```
+
+## Setting expressions
+
+**You can set an expression in CSS by wrapping the expression in quotes and starting it with a colon.**
+
+It is recommended to keep Dart expressions in your Pug files. However, in some cases it can be practical to be able to set an expression as a value, for example if flutter-view does not have special support for it.
+
+Say you want to achieve the following Dart:
+
+```dart
+Table( 
+    defaultVerticalAlignment: TableCellVerticalAlignment.middle,
+    children: [ ... ]
+)
+```
+
+Which you can achieve with the following Pug code:
+
+```css
+table(:default-verticle-alignment='TableCellVerticalAlignment.middle')
+    ...children...
+```
+
+Now let's move the `defaultVerticleAlignment` property into a Sass file:
+
+{% tabs %}
+{% tab title="Sass" %}
+```css
+table
+    default-verticle-alignment: ':TableCellVerticalAlignment.middle'
+```
+{% endtab %}
+
+{% tab title="Pug" %}
+```css
+table
+    ...children...
+```
+{% endtab %}
+{% endtabs %}
+
+Note the colon before `TableCellVerticleAlignment.middle`in the pug file.
+
+## Using shortcut properties in styles
+
+**Flutter-view provides many shortcut properties, that let you style in a CSS-style manner.**
+
+Some examples are [color](../reference/css-properties.md#color-color), [padding](../reference/css-properties.md#padding), [margin](../reference/css-properties.md#margin) and [background-image](../reference/css-properties.md#box-shadow-1).
+
+See the [shortcut properties reference](../reference/css-properties.md) for the full list.
+
+As an example, consider the following Pug layout we want to style \(taken and converted into flutter-view Pug from the [Flutter Card sample](https://docs.flutter.io/flutter/material/Card-class.html)\):
+
+```text
+card
+    column
+        list-tile
+            icon(as='leading' :value='Icons.album')
+            .title(as='title') The Enchanted Nightingale
+            .subtitle(as='subtitle') Music by Julie Gable. Lyrics by Sidney Stein.
+        button-theme:bar
+            button-bar
+                flat-button.tickets(@on-pressed='...')
+                    .label Buy tickets
+                flat-button.listen(@on-pressed='...')
+                    .label Listen
+```
+
+We have a layout, and now we can style it. 
+
+The "buy tickets" and "listen" buttons we want to have uppercase text:
+
+```css
+flat-button.tickets, flat-button.listen
+    .label
+        text-transform: uppercase
+```
+
+We want the card to be blue and the column of the card to have `mainAxisSize: MainAxisSize.min`:
+
+```css
+card
+    color: blue
+    column
+        main-axis-size: min
+```
+
+We want to give some padding to the title and subtitle, and make the text color grey\[300\]:
+
+```css
+card
+    $title-color: grey[300]
+    list-tile
+        .title
+            color: $title-color
+            padding: 4 6
+        .subtitle
+            color: $title-color
+            padding: 2 6
+```
+
+Note how we use Sass variables to avoid repetition.
+
+Here is the end result:
+
+{% tabs %}
+{% tab title="artist-card.pug" %}
+```css
+card
+    column
+        list-tile
+            icon(as='leading' :value='Icons.album')
+            .title(as='title') The Enchanted Nightingale
+            .subtitle(as='subtitle') Music by Julie Gable. Lyrics by Sidney Stein.
+        button-theme:bar
+            button-bar
+                flat-button.tickets(@on-pressed='...')
+                    .label Buy tickets
+                flat-button.listen(@on-pressed='...')
+                    .label Listen
+```
+{% endtab %}
+
+{% tab title="artist-card.sass" %}
+```css
+card
+    color: blue
+    column
+        main-axis-size: min
+    list-tile
+        $title-color: grey[300]
+        .title
+            color: $title-color
+            padding: 4 6
+        .subtitle
+            color: $title-color
+            padding: 2 6
+        flat-button
+            .label
+                text-transform: uppercase
+```
+{% endtab %}
+
+{% tab title="generated artist-card.dart" %}
+
+{% endtab %}
+{% endtabs %}
+
+
+
diff --git a/guide/overview.md b/guide/overview.md
@@ -15,6 +15,8 @@ Other notable examples are:
 * **reactive**: lets you write terse reactive code that responds to your model changes
 * **assign**: easily assign values with expressions
 
+See the [**shortcut tags reference**](../reference/tag-shortcuts.md) for all tags.
+
 ## Shortcut properties
 
 The shortcut properties are macros that insert common layout behavior that take more code in Flutter, such as easily setting a background color to a container or adding text styling. These properties are as much as **CSS** properties as possible. However when there is no direct CSS-like analogy, the **Flutter** names and values are used. They are in **dash case**, since camelcase is not officially supported.
@@ -28,6 +30,8 @@ Some commonly used examples are:
 * **font-size, font-family** and **font-weight**: to style text
 * any property name ending on [**color**](../reference/css-properties.md#color-color) accepts both color names and hex codes
 
+See the [**shortcut properties reference**](../reference/css-properties.md) for all supported properties.
+
 ### Escaping property shortcut processing
 
 If you have to pass a parameter which has the name of a shortcut, and you do not wish to apply the shortcut, you can escape it with the ^ character.
diff --git a/reference/css-properties.md b/reference/css-properties.md
@@ -1,4 +1,4 @@
-# Property shortcuts
+# Shortcut properties
 
 ## alignment
 
diff --git a/reference/tag-shortcuts.md b/reference/tag-shortcuts.md
@@ -1,4 +1,4 @@
-# Tag shortcuts
+# Shortcut tags
 
 ## builder
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# Property shortcuts`
	`1`	`+# Shortcut properties`
`2`	`2`
`3`	`3`	`## alignment`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-# Tag shortcuts`
	`1`	`+# Shortcut tags`
`2`	`2`
`3`	`3`	`## builder`
`4`	`4`