-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgetting_started.html.erb
148 lines (122 loc) · 6.23 KB
/
getting_started.html.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<h1>Getting Started</h1>
<h2>Download and Start Fire.app</h2>
<p>After buying Fire.app, we will send you an email with download links to your registered PayPal email address. You will also get 1.x updates for free.</p>
<p>Please download the file which is appropriate to your OS and unzip it. Next, proceed to the section below for your OS.</p>
<div class="switch-block">
<ul class="nav-tabs">
<li class="windows"><a href="#">Windows</a></li>
<li class="osx"><a href="#">Mac OS</a></li>
<li class="linux"><a href="#">Linux</a></li>
</ul>
<div class="content-wrapper">
<div class="content windows">
<h3>Windows</h3>
<p>You will get a folder containing all the Fire.app files. You can put this folder anywhere you want. Run Fire-app.exe and you'll see a little gray icon appear in the Windows notification area.</p>
<img src="images/windows.jpg" />
</div>
<div class="content osx">
<h3>Mac OS</h3>
<p>You will get a file named Fire.app. You can put it anywhere you want. Start the app and you'll see a little gray icon appear in the menubar.</p>
<img src="images/osx.jpg" />
</div>
<div class="content linux">
<h3>Linux</h3>
<p>You will get a folder containing all the Fire.app files. You can put this folder anywhere you want. Execute run.sh and you'll see a little gray icon appear in the menubar.</p>
<img src="images/linux.jpg" />
</div>
</div>
</div>
<p class="sp-point">NOTE: Fire.app is written in Java, so it will take a few seconds to start.</p>
<h2>Creating Projects</h2>
<p>To create a project, click the Fire.app icon and choose "Create Project" then choose the project type you want from any of the frameworks on the list.<br />
If you don't prefer any of the frameworks, we suggest to choose "compass" -> "project". It will create a compass project which contains sass files and import <a href="http://compass-style.org/reference/compass/reset/">compass reset</a> by default.</p>
<p>Note: "Fireapp Example" on the "Create Project" list is not a framework but a Fire.app project example. You can read some source code inside this project to learn how to use Fire.app.</p>
<p>Give your new project a name and save it. A dialog window will appear saying your project has been created.</p>
<img src="images/create-project-report.png" />
<p>Also, the icon turns orange, which means Fire.app is "watching" your project. If your project is being watched, after you change a Sass/CoffeeScript file it automatically compiles into a corresponding CSS/JavaScript file. Also, you can use Fire.app's built-in web server to see the project result in your browser.</p>
<p>Let's build a compass project as an example. The project folder should look like this:</p>
<img src="images/project-folder.png" />
<pre class="prettyprint">
awesome-website/
sass/ // Sass folder.
screen.scss
...
stylesheets/ // Default CSS output folder.
...
.sass-cache/ // The hidden sass cache folder. Do not touch it.
config.rb // Compass setting. Do not remove it.
</pre>
<h2>Editing and Preview</h2>
<p>Add a file to the project folder and name it <code>index.html</code>. Then write some content like <code>Hello World!</code>. Save the file and open <code>http://127.0.0.1:24681/index.html</code> in your browser. You will see the result of your code.</p>
<img src="images/helloworld_01.png" />
<p>Next, add more HTML to import a CSS file which is generated from a Sass file. For example, here is what it looks like: </p>
<pre class="prettyprint linenums lang-html">
<%= h '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link href="/stylesheets/screen.css" media="screen" rel="stylesheet" />
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>'
%>
</pre>
<p>Write some CSS in the corresponding Sass file <code>/sass/screen.scss</code> for a test. For example: </p>
<pre class="prettyprint linenums lang-css">
h1 {
color: #cc0000;
}
</pre>
<p>Because SCSS is a superset of CSS syntax, we can just write normal CSS here. Switch to the browser and refresh the page, then you'll see the result.</p>
<img src="images/helloworld_02.png" />
<h2>Using Template Languages</h2>
<p>Using template languages with Fire.app is very easy, simply name the file with a corresponding file extension. For example, rename your <code>index.html</code> to <code>index.html.erb</code> then you can use the ERB template language. </p>
<p>After renaming the file, you can add a lorem ipsum helper <code><%= lorem_paragraph %></code> after <code>h1</code> to generate a paragraph. Here's what it looks like:</p>
<pre class="prettyprint linenums lang-html">
<%= h '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Hello World!</h1>'
%>
<%= lorem_paragraph %>
<%= h '</body>
</html>'
%>
</pre>
<p>Save the file and refresh the browser. Now you will see the lorem peragraph.</p>
<img src="images/helloworld_03.png" />
<p>If you want to learn more about template languages or Fire.app's built-in helpers, please follow these links below.
</p>
<ul>
<li><a href="template_layout_partial.html">Templates, Layouts & Partials</a></li>
<li><a href="template_helper.html">Template Helpers</a></li>
</ul>
<h2>Generating Static Files</h2>
<p>After completing your project, you can use "Build Project" to generate the static files. Click the Fire.app icon and choose "Build Project". You will get a folder named <code>build_##############</code> which contains all the static files generated from your project. </p>
<img src="images/helloworld_04.png" />
<% content_for :js do %>
<script>
$(function(){
$(".switch-block .content").hide();
$(".switch-block .nav-tabs li:eq(0)").addClass("active");
$(".switch-block .content:eq(0)").show();
$(".switch-block .nav-tabs a").on("click", function(e){
e.preventDefault();
$(".switch-block .nav-tabs li").removeClass("active");
$(".switch-block .content").hide();
var currentClass = $(this).parent().attr("class");
$(this).parent().addClass("active");
$(".switch-block .content-wrapper").find("."+currentClass).show();
console.log(currentClass);
});
});
</script>
<% end %>