Base HTML Template
We’ll be working with the following HTML source code. This is a complete, single article page with placeholder text for an article as well as three Bootstrap cards for article previews.
You can go ahead and copy the following HTML code into your text editor of choice, save it as an HTML file, and load it up in your browser to see the results.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Phosis Quickstart Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary static-top">
<div class="container">
<a class="navbar-brand" href="/">Phosis Quickstart</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Articles</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<div class="row mt-5">
<div class="col-md-8">
<h1>I Am An Article</h1>
<p class="lead">Follow along in the documentation to make this data-driven.</p>
<p class="text-muted d-flex justify-content-between"><small>Posted 12/27/2019</small></p>
<div class="article-content">
<p>Cupcake ipsum dolor. Sit amet pastry dragée pastry. Cheesecake halvah ice cream. Jelly halvah liquorice. Sesame snaps chocolate bar bear claw. Topping cheesecake chocolate bar. Soufflé icing ice cream brownie jelly-o. Bonbon lollipop cupcake donut tootsie roll lollipop sugar plum.</p>
<p>Oat cake gummies sweet gummies candy soufflé bonbon sweet roll macaroon. Pie chocolate candy muffin pie chocolate gummies gummi bears pudding. Icing cotton candy candy chocolate bar chocolate bar brownie soufflé. Marzipan candy sugar plum toffee gummies. Powder ice cream powder marzipan chocolate cake. Topping gummies cake ice cream. Soufflé gummi bears soufflé muffin fruitcake powder tart.</p>
<p>Carrot cake marzipan powder donut. Cupcake tiramisu wafer candy canes candy. Pie chocolate macaroon muffin lemon drops candy canes. Chocolate carrot cake caramels bear claw gummi bears. Icing sweet roll tootsie roll tootsie roll danish sugar plum pie tart. Tiramisu candy canes marshmallow gummi bears jelly beans jujubes cotton candy liquorice.</p>
<p>Bear claw donut sweet roll oat cake sugar plum dragée gummies dessert candy. Soufflé oat cake muffin. Sweet roll croissant jelly-o tootsie roll marzipan pudding cheesecake. Macaroon tart ice cream sweet roll chupa chups liquorice ice cream pie croissant. Pudding fruitcake sweet muffin marzipan chocolate cake pie. Cake muffin macaroon wafer. Chupa chups jujubes wafer. Croissant fruitcake macaroon cookie cake jelly-o candy topping. Jelly-o sweet roll tootsie roll bear claw sweet roll dessert sugar plum.</p>
<p>Cotton candy icing toffee macaroon. Carrot cake gummi bears pudding sweet roll marshmallow. Chocolate cake dessert lollipop biscuit wafer cake pudding marzipan candy canes. Chupa chups jelly-o chocolate cake chocolate bar bonbon macaroon. Gummi bears jelly-o ice cream chupa chups icing jelly beans tart liquorice. Dragée donut icing carrot cake pudding cookie dragée.</p>
</div>
</div>
<div class="col-md">
<div class="mb-5">
<form>
<h4>Contact Us</h4>
<dl>
<dt>
<label for="name">Name</label>
</dt>
<dd class="form-group">
<input type="text" class="form-control" id="name" name="name" required placeholder="Please enter your name" />
</dd>
<dt>
<label for="email">Email</label>
</dt>
<dd class="form-group">
<input type="email" class="form-control" id="email" name="email" required placeholder="Please enter your email address" />
</dd>
<dt>
<label for="reason">Why are you reaching out today?</label>
</dt>
<dd class="form-group">
<select id="reason" class="custom-select" name="reason" required>
<option disabled selected>Please choose…</option>
<option value="ArticleFeedback">Feedback on an article</option>
<option value="BizDev">Business development idea</option>
<option value="General">General contact request</option>
</select>
</dd>
<dt>
<label for="comments">Additional comments?</label>
</dt>
<dd class="form-group">
<textarea class="form-control" id="comments" name="comments" rows="4" cols="30" placeholder="Any additional comments? (optional)"></textarea>
</dd>
</dl>
<div class="form-messages"></div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<div class="card mb-3">
<img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card mb-3">
<img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card mb-3">
<img class="card-img-top" src="https://via.placeholder.com/150x100" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Read More »</a>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
</body>
</html>
This HTML will render something similar to the following (cropped to fit) when viewed in a browser:
Remember, you or your web designer should be working in plain HTML with no serverside interpreted languages like PHP or Python or anything. However, you can add Javascript resource files to manipulate, animate, etc.
In reality, you or your web developer would create your templates, and you would have much more well-designed and fleshed-out page(s), but we’re starting from the point of completed HTML ready to be adapted to Phosis so you can see how it all works. It’s not at all a beautiful page, as we’re merely concerning ourselves with wiring up templates.
So, let’s get started!