Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
242 lines (235 sloc) 9 KB
<!DOCTYPE html>
<html lang="en" data-apres-controller="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<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'>
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 {
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;
<div id="background">
<section id="left-column">
<div class="reflection"></div>
<div id="description">
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"
><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="!/ApresProject"
><span class="icon-twitter"></span> Twitter</a>
<a href=""
><span class="icon-github"></span> Github</a>
<p class="text-center">
<span class="icon-comments"></span> #apres <br> on
<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.
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>
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>
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>
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>
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="">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>
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.
<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="">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.
<h2>Getting Started.</h2>
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=""
>Apres quick start guide</a> to be up and running in just a few
<footer class="flush text-center">
Apres is an <a href="">
MIT Licensed</a> open source project.
<a href="!/ApresProject">Twitter</a>
<a href="">Github</a>
#apres on
<a href=""><img style="position: absolute; top: 0; right: 0; border: 0;" src="" alt="Fork me on GitHub"></a>