<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="container-fluid">

    <h1 class="text-center" style="font-size: 76px; margin: 45px 0 40px;">forms-angular</h1>
    <h3 class="text-center"><i class="icon-quote-left"></i> Probably the most opinionated framework in the world <i class="icon-quote-right"></i></h3>

    <div ng-class="css('rowFluid')">
        <div class="big-box hero-unit" ng-class="css('span',6)">
            <h4>Turns this...</h4>
    <pre>var PersonSchema = new Schema({
    surname: {type:String, required:true, index:true},
    forename: {type:String, index:true},
    weight: Number,
    eyeColour: {type: String, required:true,
        enum:['Blue','Brown','Green','Hazel']},
    dateOfBirth: Date,
    accepted: Boolean
});</pre>
        </div>
        <div class="big-box hero-unit" ng-class="css('span',6)">
            <h4>...into this</h4>
            <img src="/img/screen.png" alt="Screen shot of simple form">
        </div>
    </div>
    <div ng-class="css('rowFluid')">
        <h2 class="text-center">...with just a few lines of code!</h2>
    </div>

    <div ng-class="css('rowFluid')" style="text-align: center; margin-top: 25px;">
        <div ng-class="css('span',4)">
            <i class="fa fa-edit fa-4x icon-edit icon-4x" style="font-size:96pt;"></i>

            <h2>Form generation</h2>

            <p><strong>forms-angular</strong> is a simple framework build on top of the <a href="http://blog.mongodb.org/post/49262866911/the-mean-stack-mongodb-expressjs-angularjs-and">MEAN
                stack</a>
                (with a little <a href="http://twitter.github.io/bootstrap/">Twitter Bootstrap</a> and <a href="http://mongoosejs.com/">Mongoose</a> thrown in for good measure) that
                enables you to generate forms super quickly. At its simplest it takes a mongoose schema and generates a
                form, complete with REST routing and bindings.</p>
        </div>
        <div ng-class="css('span',4)">
            <i class="fa fa-table fa-4x icon-table icon-4x" style="font-size:96pt;"></i>

            <h2>Reporting</h2>

            <p>Reports are easy to add, with grid output, totals, drill-downs (to other, more specific, reports or to
                the form that the data can be amended in), export to PDF and CSV.</p>
        </div>
        <div ng-class="css('span',4)">
            <i class="fa fa-wrench fa-4x icon-wrench icon-4x" style="font-size:96pt;"></i>

            <h2>Customisation</h2>

            <p>Forms-angular is easy to extend, using regular Angular JS controllers that allow you to hook into
                navigation elements, data events and much more.</p>
        </div>
    </div>
</div>