reuze v1.1

Reuze is a teeny-tiny front-end tool that makes structuring HTML and CSS for blogs and article-heavy sites a breeze. It plays nice with frameworks such as Foundation and Boostrap but also works equally well on it's own.

Simply visit derny.github.io/reuze to structure HTML5 code blocks and include the CSS found here. Code blocks are RDFa Lite compliant and are designed to sit inside a namespaced wrapping container.

Here is a simple Article code block that includes a left-aligned featured image, a caption, read-more link, and meta-data situated below the titles:

<div class="ac image-left">

<article typeof="Article">

    <div class="image-feat" style="width:75px;"> 
       <a href="#"><img src="http://placehold.it/75x75/efefef" alt="sample image" property="thumbnailUrl"></a> 
       <p class="caption">This is a small image caption, 25 words or less is best.</p>
    </div>

    <header> 
    <a href="#"><h4 property="headline">Lorem Ipsum Doior</h4></a> 
    <h6 property="alternativeHeadline">Sub Title</h6>

    <ul class="meta">
       <li property="datePublished">December 13th</li>
       <li property="author">By: <a href="#">J.Smith</a></li>
       <li property="keywords"><a href="#">Fiction</a></li>
    </ul>
    </header>

    <div class="content" property="articleBody"> 
       <p>Et denique petentium reprimique mel, no quo laudem convenire mediocritatem. Has contentiones comprehensam an, per consequat necessitatibus eu. Aliquam abhorreant philosophia ut eos. Phaedrum consequat te cum. No est inermis mentitum ponderum. Debitis posidonium ex mea, ex mundi tollit imperdiet sit.</p> 
    </div>

    <footer>
    <a class="rm" href="#">Read More</a>
    </footer>

</article>

</div>

Benefits of Reuze-ing

A Small Footprint — Ideal for Big Sites

Need to build a complex, content-rich site with a few thousand pages and a multitude of layout variations? Reuze has your back with an optimized CSS file that is < 10kb — uncompressed. More efficient and modular CSS means easier maintenance down the road and a faster-loading site — good for both you and the client.

Backend/Frontend Harmony

Did the front end lead just run out for a latte or phone in sick because it's launch day in Cupertino? Not to worry, back end devs can simply arrange content at reuze.me to mirror functional project specs and start building out their Wordpress loops or Kentico transformations off the provided HTML5 code blocks — safe in the knowledge that only the CSS will change later.

Mockup in the Browser

Why waste valuable time in Photoshop producing boring grey-box mockups when it's possible to include a single CSS file, some basic HTML for layout, and the desired reuze content blocks to produce a live site within minutes? Look like a rock-star and deliver a working mockup in hours, not days.

Chamaeleon-Like

Reuze adapts seamlessly within other front end frameworks. Drop content containers into Foundation columns, Bootstrap spans, or, 960 grids and watch 'em go. Containers are completely responsive out of the box.

Ridiculously Simple Interface

No complicated drag-and-drop horror-show. You select from straight-forward content options on the left of the screen and watch the HTML and live content view update in real time. You can copy-and-paste, right?

Clean, Semantic HTML5

Reuze produces code that takes advantage of the latest HTML5 and RDFa Lite structures. It's future-friendly for the next evolution of browsers, screen-readers and mobile devices.

No Javascript

Reuze places substance above style — no reliance on Javascript; minimal base styling and full support back to IE8.

Customizing Reuze

Reuze is all about creating a consistent and minimal framework for delivering blog-style content in a multitude of ways using the smallest amount of CSS code possible. By design, it only provides the most basic of styling. These styles can be easily modified or built upon by targeting content types, or, individual blocks within the type itself. Let me give you some examples:

.ac .rm { color: #333; }

This changes the color of all 'read-more' links for Article content across the entire site. (.ac)

.ac article.home h1  { color: #111; font-size: 3.8rem; }

Perhaps you'll want to assign a class to articles that display on the landing page of a site (.home) so you can style headings differently.

Getting the Most from Reuze

In order for things to look neat and tidy in IE8, be sure to include the following in the document header AFTER the reuze.css file.

<!--[if IE 8]>
<link rel="stylesheet" href="css/ie8.css" media="screen" />
<![endif]-->

All HTML code snippets available at derny.github.io/reuze include support for RDFa Lite (a subset of the Resource Description Framework). As of July 2012, this is the official specification for 'rich snippets'.

Simply include the following code in the body tag to enable RDFa:

<body vocab="http://schema.org/">

The immediate children of Reuze content containers should be restricted to content blocks, period.

The Right Way:

<div class="ac">
   <article typeof="Article">[...]</article>
   <article typeof="Article">[...]</article>
   <article typeof="Article">[...]</article>
</div>

The Wrong Way:

<div class="ac">
   <h2>I am a title that should come before the ac Div</h2>
   <article typeof="Article">[...]</article>
   <article typeof="Article">[...]</article>
   <p>Headings, text and any other stuff needs to be inside the related article block</p>
   <article typeof="Article">[...]</article>
</div>

Inline Styles

My goal of building a robust CSS3/HTML5 mini-framework for magazine/news sites that does not rely on any Javascript means that in a handful of situations, it's necessary to utilize in-line styles that can dynamically set widths and margins of content using values injected from the backend.

An example of this is forcing the footer of an article to align itself to the text block above, when a featured image is in the default position (left-aligned). The amount of margin required is calculated by taking the width of the image + 15px.

<footer style="margin-left:90px;"> /* Image is 75x75 px */
<a class="rm" href="#">Read More</a>
</footer>

If Reuze is being used within the context of a CMS such as Wordpress or Kentico, it's a simple matter of injecting the actual width of the featured image + 15px using PHP or ASP.net. It's also a simple matter to hardcode the margin by adding the CSS rule: .ac footer { margin-left: ??px; } when working outside a CMS or in the situation where the image width will always be the same.

Browser Support

• Google Chrome
• Mozilla Firefox 4+
• Apple Safari 5+
• Opera 12+
• Internet Explorer 8+

Get in Touch!

Reuze is a project by Dennis Erny.