Skip to content
This repository
Browse code

WIP adding icons for guide steps

  • Loading branch information...
commit c60fcfadbfdeabc2fbfcb816f567d30472a38244 1 parent 71e3afe
spacekat authored February 01, 2013
4  _layouts/default.html
@@ -7,6 +7,8 @@
7 7
       <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
8 8
     <![endif]-->
9 9
     <script src="/js/prefixfree.min.js"></script>
  10
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  11
+    <script src="/js/guides.js"></script>
10 12
     <link href="/css/bootstrap.css" rel="stylesheet" />
11 13
     <link href="/css/code.css" rel="stylesheet" />
12 14
     <link href="/css/style.css" rel="stylesheet" />
@@ -53,4 +55,4 @@
53 55
       //]]>
54 56
     </script>
55 57
   </body>
56  
-</html>
  58
+</html>
26  _posts/2012-04-18-app.markdown
Source Rendered
@@ -10,15 +10,26 @@ permalink: app
10 10
 
11 11
 **Make sure you have Rails installed.** [**Follow the installation guide**](/install) to get set up.
12 12
 
  13
+## Get to know the tools
13 14
 
14  
-## Step 0: Get to know the tools
  15
+<div class="indent" markdown="1">
15 16
 
16  
-* Text editor: [Sublime Text](http://www.sublimetext.com), [Komodo Edit](http://www.activestate.com/komodo-edit), Vim, Emacs, and Gedit are examples of text editors your can use for writing code and editing files.
17  
-* Terminal (known as Command Prompt on Windows): where you start the Rails server and run commands.
18  
-* Web browser (Firefox, Safari, Chrome): for viewing your application.
  17
+<h3><i class="icon-text-editor">&nbsp;</i></h3>
  18
+### Text Editor
19 19
 
  20
+[Sublime Text](http://www.sublimetext.com), [Komodo Edit](http://www.activestate.com/komodo-edit), Vim, Emacs, and Gedit are examples of text editors your can use for writing code and editing files.
20 21
 
21  
-## Step 1: Creating the application
  22
+<h3><i class="icon-prompt">&nbsp;</i></h3>
  23
+### Terminal (known as Command Prompt on Windows)
  24
+Where you start the rails server and run commands.
  25
+
  26
+<h3><i class="icon-browser">&nbsp;</i></h3>
  27
+### Web browser
  28
+(Firefox, Safari, Chrome) for viewing your application.
  29
+
  30
+</div>
  31
+
  32
+## *1.*Creating the application
22 33
 
23 34
 We're going to create a new Rails app called *railsgirls*.
24 35
 
@@ -44,8 +55,7 @@ Hit `CTRL-C` in the terminal to quit the server.
44 55
 
45 56
 **Coach:** Explain what each command does. What was generated? What does the server do?
46 57
 
47  
-
48  
-## Step 2: Create Idea scaffold
  58
+## *2.*Create Idea scaffold
49 59
 
50 60
 We're going to use Rails' scaffold functionality to generate a starting point that allows us to list, add, remove, edit, and view things; in our case ideas.
51 61
 
@@ -61,7 +71,7 @@ Open [http://localhost:3000/ideas](http://localhost:3000/ideas) in your browser.
61 71
 
62 72
 Hit `CTRL-C` to quit the server again when you've clicked around a little.
63 73
 
64  
-## Step 3: Design
  74
+## *3.*Design
65 75
 
66 76
 **Coach:** Talk about the relationship between HTML and Rails. What part of views is HTML and what is Embedded Ruby (ERB)? What is MVC and how does this relate to it? (Models and controllers are responsible for generating the HTML views.)
67 77
 
60  css/style.css
@@ -23,6 +23,14 @@ h2 {
23 23
   font-size: 2em;
24 24
   margin: 1em 0 0.5em;
25 25
 }
  26
+h2 em {
  27
+  display: inline-block;
  28
+  width: 50px;
  29
+  font-style: normal;
  30
+  font-weight: bold;
  31
+  margin-left: -50px;
  32
+  color: #CCC;
  33
+}
26 34
 
27 35
 h3 {
28 36
   font-weight: normal;
@@ -60,6 +68,7 @@ hr {
60 68
   margin: 2em 0;
61 69
 }
62 70
 
  71
+
63 72
 header {
64 73
   height: 70px;
65 74
   color: #fff;
@@ -109,15 +118,16 @@ footer {
109 118
   text-align: center;
110 119
 }
111 120
 
112  
-article.container {
113  
-  padding: 20px 0;
114  
-}
115 121
 
116 122
 footer a {
117 123
   color: #111;
118 124
   border-color: #111;
119 125
 }
120 126
 
  127
+.indent {
  128
+  margin-left: 70px;
  129
+}
  130
+
121 131
 .home {
122 132
   list-style: none;
123 133
   margin: 0;
@@ -192,4 +202,46 @@ footer a {
192 202
 .hero {
193 203
   padding: 20px 320px 20px 0;
194 204
   background: url(../images/guides-hero.png) right 80px no-repeat;
195  
-}
  205
+}
  206
+.highlight {
  207
+  margin-left: 40px;
  208
+}
  209
+/* Icons for the guide */
  210
+i.icon-text-editor, i.icon-prompt, i.icon-browser {
  211
+  background-position: 0 0;
  212
+  display: inline-block;
  213
+  margin-left: -70px;
  214
+  float: left;
  215
+  width: 50px;
  216
+  height: 50px;
  217
+  line-height: 50px;
  218
+}
  219
+i.icon-text-editor {
  220
+  background-image: url("/images/icon-text-editor.png");
  221
+}
  222
+
  223
+i.icon-prompt{
  224
+  background-image: url("/images/icon-prompt.png");
  225
+}
  226
+
  227
+i.icon-browser {
  228
+  background-image: url("/images/icon-browser.png");
  229
+}
  230
+i.icon-small-text-editor, i.icon-small-prompt, i.icon-small-browser {
  231
+  background-position: 0 0;
  232
+  display: inline-block;
  233
+  margin-left: 0px;
  234
+  float: left;
  235
+  width: 50px;
  236
+  height: 20px;
  237
+  line-height: 20px;
  238
+}
  239
+i.icon-small-text-editor {
  240
+  background-image: url("/images/icon-small-text-editor.png");
  241
+}
  242
+i.icon-small-prompt{
  243
+  background-image: url("/images/icon-small-prompt.png");
  244
+}
  245
+i.icon-small-browser {
  246
+  background-image: url("/images/icon-small-browser.png");
  247
+}
BIN  images/icon-app.png
BIN  images/icon-browser.png
BIN  images/icon-prompt.png
BIN  images/icon-small-browser.png
BIN  images/icon-small-prompt.png
BIN  images/icon-small-text-editor.png
BIN  images/icon-text-editor.png
5  js/guides.js
... ...
@@ -0,0 +1,5 @@
  1
+$(document).ready(function() {
  2
+  $("code.sh, code.bat").closest('.highlight').before('<i class="icon-small-prompt"></i>');
  3
+  $("code.erb, code.html, code.ruby, code.css").closest('.highlight').before('<i class="icon-small-text-editor"></i>');
  4
+  $("code.browser").closest('.highlight').before('<i class="icon-small-browser"></i>');
  5
+});

0 notes on commit c60fcfa

Please sign in to comment.
Something went wrong with that request. Please try again.