apres.github.com/index.html at master · apres/apres.github.com · GitHub

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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en" data-apres-controller="">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <title></title>
  <script data-main="js/lib/apres-dev.js" src="js/lib/require-1.0.8.js"></script>
  <link href='css/base.css' rel='stylesheet' type='text/css'>
  <link href='css/grid.css' rel='stylesheet' type='text/css'>
  <link href='css/ui.css' rel='stylesheet' type='text/css'>
  <link href='css/font-awesome.css' rel='stylesheet' type='text/css'>
  <style>
    body {
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      background: url(img/stripe-bkg.png);
      margin: 20px;
    }
    p, li {
      font-size: 16px;
    }
    li {
      list-style-type: none;
      background: url(img/apres-circle.png) left top no-repeat;
      padding-left: 34px;
      position: relative;
      top: -5px;
      padding-bottom: 0.4em;
    }
    #description p {
      font-size: 18px;
    }
    #background {
      /*background: url(img/apres-500x500-alpha.png) no-repeat fixed -100px -100px;*/
    }
    #left-column {
      position:relative;
      top: 0.75em;
      left: 2px;
      opacity: 0.75;
      border: 3px solid #fff;
      background-color: #eeeeee;
      float: left;
      width: 300px;
      border-radius: 10px 0 0 10px;
      -moz-border-radius: 10px 0 0 10px;
      -webkit-border-radius: 10px 0 0 10px;
      box-shadow: 0 0 20px #ddd;
    }
    #left-column h1 {
      text-align: center;
      background-color: #dddddd;
      border-bottom: 2px solid #ffffff;
      padding: 6px;
      font-size: 4.0rem;
      border-radius: 10px 0 0 0;
      -moz-border-radius: 10px 0 0 0;
      -webkit-border-radius: 10px 0 0 0;
      text-shadow: 1px 1px #fff;
    }
    #left-column p {
      padding: 0 1em;
    }
    .reflection {
      position: absolute;;
      width: 100%;
      height: 34px;
      background: #fff;
      opacity: 0.3;
      border-radius: 0 0 50% 50%;
      -moz-border-radius: 0 0 50% 50%;
      -webkit-border-radius: 0 0 50% 50%;
    }
    #right-column {
      position: absolute;
      left: 324px;
      margin-right: 20px;
      margin-bottom: 40px;
      min-width: 350px;
    }
    .content {
      background: white;
      border-radius: 8px;
      -moz-border-radius: 8px;
      -webkit-border-radius: 8px;
      box-shadow: 0 0 20px #bbb;
      padding: 2em;
    }
    #tag-line {
      position: relative;
      margin:  6px 48px 40px 0;
      float: right;
      font-family: Georgia, 'Times New Roman', Times, serif;
      font-style: italic;
      font-weight: normal;
      font-size: 26px;
      line-height: 1.1em;
    }
    #download {
      margin-top: 1em;
      text-shadow: 1px 1px #fff;
      font-weight: bold;
    }
    h2 {
      margin-top: 1.5em;
      font-size: 160%;
    }
    .button {
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
    }
    .green.button {
      background: #4FB24F !important;
    }
    .green.button:hover, .green.button:focus	{
      background-color: #57C757 !important;
    }
    footer {
      text-align: center;
      margin: 40px 20px 20px 20px;
      padding 0 3em 0 3em;
    }
  </style>
</head>
<body>
  <div id="background">
    <section id="left-column">
      <div class="reflection"></div>
      <h1>Apres</h1>
      <div id="description">
        <p>
          Apres is an open-source development tool for
          creating rich client-side web applications.
        <p id="download" class="text-center">
        <p class="text-center"><a class="nice large green button"
             href="https://github.com/apres/apres.github.com/blob/master/doc/quickstart.md"
            ><span style="position: relative; top: 6px;">Get&nbsp;Started&nbsp;Now</span
            >&nbsp;<span style="position: relative; top: 3px;"
                   class="icon-circle-arrow-right icon-large"></span></a>
        <p class="text-center">
          <a href="https://twitter.com/#!/ApresProject"
            ><span class="icon-twitter"></span> Twitter</a>
          &nbsp;&bull;&nbsp;
          <a href="https://github.com/apres/apres.github.com"
            ><span class="icon-github"></span> Github</a>
        <p class="text-center">
          <span class="icon-comments"></span> #apres <br> on irc.freenode.net
      </div>
    </section>
    <div id="right-column">
      <section class="content">
        <div id="tag-line">Embarrassingly Client-Side Web Apps.</div>
        <p class="flush">
          Apres is an integrated suite of tools for building web applications
          that can run entirely in your browser. Its modular design allows you
          to build your application brick-by-brick, and also allows you complete
          freedom to customize the components or invent your own from scratch.
        <p>
          Apres has a compact core that provides a foundation for modular web
          development with a focus on declarative programming for common tasks.
          However, it hides none of the full power that the underlying browser
          environment provides. Instead, Apres provides leverage to make it possible
          to build complex systems from simple parts.

        <h2>Client-side web development should be fun, really.</h2>
        <p>
          Development should be about solving your problems, and building your
          app. Often times this can seem secondary to a myriad of other
          obstacles and distractions. Apres aims to bring the focus back where
          it belongs.

        <h2>The batteries should not only be included, but fully charged and ready
            for use.</h2>
        <p>
          There are an astounding number of excellent open-source tools that
          you could leverage to make your app great. But finding and integrating
          all of these pieces is a major undertaking. Apres comes loaded
          with an assortment of modules ready for you to use right away, and
          more are being added all the time.

        <h2>If you don't need it, it shouldn't be in your way.</h2>
        <p>
          Having such an assortment of functionality is a burden if you have
          to worry about it even if your app doesn't use it. You don't
          want to be weighed down by things you don't need. Apres' modular
          approach means that you only pay for what you eat, and you
          can learn as you go.

        <h2>Modularity matters.</h2>
        <p>
          A global namespace is no place to build a modern app. Coupled with
          asynchronous script loading, and manual dependency management the
          standard browser runtime is no paradise for complex applications made
          of many interdependent parts. Apres leverages the powerful, and
          popular <a href="http://requirejs.org">requirejs</a> AMD module loader
          to create a firm foundation for modular apps. Apres provides
          AMD-compliant versions of many popular libraries. Requirejs can also
          automatically adapt many non-AMD modules for use with Apres.

        <h2>Use standards.</h2>
        <p>
          There's no lack of ways to do things in software development.
          Leveraging existing standards means there are less things to develop,
          debug, document, and learn about.
          <ul>
            <li>Apres views are html5 pages, with dynamic functionality
                declared in html data attributes.
            <li>Apres works with any standard web server, static, or dynamic.
                It plugs easily into <a href="http://nodejs.org">node.js</a>
                via an included express middleware adapter. Middleware for
                other popular application servers are planned.
            <li>Apres uses standard AMD javascript modules.
            <li>Apres prefers composition over inheritance for application
                code. This means less dependence and tight coupling between
                your code and Apres since you can use plain objects.
          </ul>

        <h2>Getting Started.</h2>
        <p>
          Apres is a young project, and we are steadily working toward a
          release version. We'd love it if you'd try it out and give us
          feedback. Visit the
          <a href="https://github.com/apres/apres.github.com/blob/master/doc/quickstart.md"
          >Apres quick start guide</a> to be up and running in just a few
          minutes.
      </section>
      <footer class="flush text-center">
        Apres is an <a href="http://www.opensource.org/licenses/mit-license.php">
        MIT Licensed</a> open source project.
        &nbsp;&bull;&nbsp;
        <a href="https://twitter.com/#!/ApresProject">Twitter</a>
        &nbsp;&bull;&nbsp;
        <a href="https://github.com/apres/apres.github.com">Github</a>
        &nbsp;&bull;&nbsp;
        #apres on irc.freenode.net
      </footer>
    </div>
  </div>
    <a href="https://github.com/apres/apres.github.com"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png" alt="Fork me on GitHub"></a>
</body>
</html>