GitBook: [master] 5 pages modified

Author: blueneogeo

README.md

@@ -57,11 +57,13 @@ Container Hello() {
 {% endtab %}
 {% endtabs %}
 
+_Click the tabs to see the Pug code, the HTML representation of the Pug, and the Dart code that flutter-view generates for you._
+
 This generated function can be used like any other Dart code, and will return the code that gives the greeting.
 
 ## Adding Styling
 
-You can add Sass/CSS to styles to your view. Flutter-view contains [shortcut properties](reference/css-properties.md) that take your CSS-like properties and convert them into code. For our example, you can easily add a text [**color**](reference/css-properties.md#color-color), [**background color**](reference/css-properties.md#box-shadow-2), some [**font properties**](reference/css-properties.md#box-shadow-8), and add [**padding**](reference/css-properties.md#padding):
+You can add Sass/CSS to styles to your view. Flutter-view supports [CSS style properties](reference/css-properties.md) that convert into code. For our example, you can easily add a text [**color**](reference/css-properties.md#color-color), [**background color**](reference/css-properties.md#box-shadow-2), some [**font properties**](reference/css-properties.md#box-shadow-8), and add [**padding**](reference/css-properties.md#padding):
 
 {% tabs %}
 {% tab title="Pug" %}
@@ -118,6 +120,8 @@ Hello() {
 {% endtab %}
 {% endtabs %}
 
+_Click the tabs to see the Pug code, the Sass styles we apply, and the code that flutter-view generates for you._
+
 Flutter-view supports [many CSS properties](reference/css-properties.md), and makes it easy to change styles and immediately see the effect. Since single CSS rules can apply to many elements, small CSS changes may have big code effects.
 
 You can also fully leverage both Pug and Sass mixin and function support, allowing for some powerful patters, such as [different styling based on running Android or iOS](guide/untitled.md).

SUMMARY.md

@@ -24,6 +24,6 @@
 
 ## Shortcuts Reference <a id="reference"></a>
 
-* [Pug tag shortcuts](reference/tag-shortcuts.md)
-* [CSS style shortcuts](reference/css-properties.md)
+* [Special pug tags](reference/tag-shortcuts.md)
+* [CSS style properties](reference/css-properties.md)
 

guide/styling-with-css.md

@@ -1,5 +1,32 @@
 # Styling with CSS
 
+## Overview
+
+One of the most powerful features in flutter-view is that it allows you to use CSS styles to flutter widgets, and to set any property of any flutter widget.
+
+For example, you can start with a simple Container:
+
+```yaml
+greeting(flutter-view)
+    .example Hello world!
+```
+
+This will generate a function that returns a Container with the class name "example", that in turns contains a Text widget with the text "Hello world".
+
+Then you can style this Container by assigning Sass styles to the class:
+
+```css
+.example
+    width: 500
+    height: 300
+    color: red
+    background-color: #333
+    font-size: 20
+    font-weight: bold
+```
+
+Flutter-view will process your styles, attaching them to the classes. Properties such as width and height are directly assigned. Some properties are recognized as CSS properties, and generate more code, such as color and font-size. The result is a normal Dart function you can call in your normal Dart code to render the styled view. In this case, a grey box with red bold text saying "Hello world!".
+
 ## 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.**
@@ -18,6 +45,13 @@ See the[ example projects](../get-started/examples.md) for more ideas for struct
 
 **You can apply extra properties to html elements by adding them through style rules.**
 
+To style anything in a flutter-view you:
+
+1. add classes to the elements in your pug file,
+2. add style rules to these classes in the related sass file
+
+To assign a class in pug, use the  [Pug .classname syntax](https://pugjs.org/language/attributes.html#class-literal). Any div element becomes a Container widget.
+
 For example, given the following Pug:
 
 ```c
@@ -50,48 +84,6 @@ Container(
 );
 ```
 
-## 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 Sass file.
-
 ## Using shortcut properties in styles
 
 **Flutter-view provides many shortcut properties, that let you style in a CSS-style manner.**
@@ -279,6 +271,48 @@ Card ArtistCard({ @required onBuyPressed, @required onListenPressed }) {
 
 As you can see here, Sass is a nice match with Pug, since you can retain the same structure. This makes it easy to find the matching styles to your pug elements.
 
+## 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 CSS 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 \(a bit contrived\) 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 Sass file.
+
 ## Using Flutter Themes in styles
 
 Flutter's Material library has [theming support](https://flutter.io/docs/cookbook/design/themes). You may want to assign the values of the theme of the current BuildContext. Flutter-view has support for easily assigning [**ThemeData**](https://docs.flutter.io/flutter/material/ThemeData-class.html) values to your properties.

reference/css-properties.md

@@ -5,7 +5,7 @@ description: >-
   Dart code.
 ---
 
-# CSS style shortcuts
+# CSS style properties
 
 ## alignment
 

reference/tag-shortcuts.md

@@ -4,7 +4,7 @@ description: >-
   Dart code.
 ---
 
-# Pug tag shortcuts
+# Special pug tags
 
 ## function