Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
110 lines (81 sloc) 4.25 KB
<!doctype html>
<!--
The Semantic Design
Site: http://nottrobin.github.io/semantic-design/
Project: https://github.com/nottrobin/semantic-design
===
You should find the source code fairly easy to read.
Even if you don't know HTML, it should be understandable.
Every <element> adds semantic meaning to the page.
If you think the source code could be simpler,
please fork or contribute to the project.
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>A simple, elegant design for the web</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico" />
<link rel="stylesheet" href="basic.css" />
</head>
<body role="document">
<header role="banner" class="inline-header">
<h1>A simple, elegant design for the web</h1>
<nav role="navigation">
<ul>
<li><a href="index.html">Summary</a></li>
<li><a href="details.html">Details</a></li>
<li><a href="more.html">More</a></li>
</ul>
</nav>
</header>
<main role="main">
<p class="title">
An elegant, responsive and modular design, with purely semantic markup
<br/>
<small>(try reading <a href="view-source:http://nottrobin.github.io/semantic-design/index.html" onclick="window.location='view-source:'+window.location; return false">the source code</a>)</small>
</p>
<section class="promotions" role="region">
<article>
<h1>Simple</h1>
<p>Above all this design strives to be simple, rather than complete. This makes the project quick to understand and use, and also less prone to complex problems.</p>
<p>Read about <a>keeping it simple</a>.</p>
</article>
<article>
<h1>Accessible</h1>
<p>The design uses a large font-size and standard colours for high accessibility, and the document sections are semantically marked-up with WAI-ARIA roles for screen-readers.</p>
<p>Read about <a href="http://www.w3.org/WAI/" title="the Web Accessibility Initiative">WAI</a> and <a href="http://www.w3.org/WAI/intro/aria" title="the Accessible Rich Internet Applications Suite">ARIA</a>.</p>
</article>
<article>
<h1>Semantic</h1>
<p>This page is written using HTML5 semantic elements and WAI-ARIA roles. There is no markup that doesn't have semantic meaning.</p>
<p>Read about <a>creating simple, semantic markup</a>.</p>
</article>
<article>
<h1>Usable</h1>
<p>The size of the text, the padding and the length of the lines have been carefully considered for easy readability. The colours and the layout deliberately follow internet conventions.</p>
<p>Read about <a>usability by convention</a>.</p>
</article>
<article>
<h1>Responsive</h1>
<p>The design's simplicity means it easily responds to different screen sizes.</p>
<p><a>Simple designs are more responsive</a>.</p>
</article>
<article>
<h1>Modular</h1>
<p>The style elements are modular, meaning that the markup or styling can be added into different pages and still work.</p>
<p>Read about <a>creating modular styling</a>.</p>
</article>
</section>
</main>
<footer role="contentinfo" class="quiet-footer">
<nav>
<ul>
<li>by <a href="http://robinwinslow.co.uk">robin</a></li>
<li>this project is in the <a href="http://unlicense.org">public domain</a></li>
<li>please <a href="https://github.com/nottrobin/basic-design">fork my code</a></li>
</ul>
</nav>
</footer>
</body>
</html>
You can’t perform that action at this time.