Add first steps

pages/first_steps.rst

@@ -21,5 +21,46 @@ Now you have a svg file called `bar_chart.svg` in your current directory.
 
 You can open it with various programs such as your web browser, inkscape or any svg compatible viewer.
 
+The resulting chart will be tho following:
 
+.. pygal-code::
+
+  bar_chart = pygal.Bar()
+  bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
+
+To make a multiple series graph just add another one:
+
+.. pygal-code::
+
+  bar_chart = pygal.Bar()
+  bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
+  bar_chart.add('Padovan', [1, 1, 1, 2, 2, 3, 4, 5, 7, 9, 12])
+
+If you want to stack them, use StackedBar instead of Bar:
+
+.. pygal-code::
+
+  bar_chart = pygal.StackedBar()
+  bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
+  bar_chart.add('Padovan', [1, 1, 1, 2, 2, 3, 4, 5, 7, 9, 12])
+
+
+You can also make it horizontal with HorizontalStackedBar:
+
+.. pygal-code::
+
+  bar_chart = pygal.HorizontalStackedBar()
+  bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
+  bar_chart.add('Padovan', [1, 1, 1, 2, 2, 3, 4, 5, 7, 9, 12])
+
+
+And finally add a title and some labels:
+
+.. pygal-code::
+
+  bar_chart = pygal.HorizontalStackedBar()
+  bar_chart.title = "Remarquable sequences"
+  bar_chart.x_labels = map(str, range(11))
+  bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
+  bar_chart.add('Padovan', [1, 1, 1, 2, 2, 3, 4, 5, 7, 9, 12])
 

static/css/style.css

@@ -0,0 +1,8 @@
+body {
+  color: white;
+  background-color: rgba(25, 0, 23, 0.9);
+}
+
+a {
+  color: rgba(255, 0, 232, 0.8);
+}