Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Reuze is a teeny-tiny front end framework (< 10KB) that makes structuring HTML and CSS for mid-to-large sized content-rich sites a breeze.
branch: master

This branch is 34 commits behind derny:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
images
LICENSE.md
README.md
articles.css
ie8.css

README.md

reuze v1.1

Reuze is a teeny-tiny front end framework that makes structuring HTML and CSS for mid-to-large sized content-rich sites a breeze. It plays nice with other frameworks such as Foundation and Boostrap but also works equally well on it's own.

Simply visit Reuze.me to structure HTML5 code blocks and include the CSS files found here. Code blocks are RDFa Lite compliant and are designed to sit inside a wrapping container with a class that denotes the content type (Articles for instance are wrapped in a Div with a class of 'ac').

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" typeof="Article">

<article>

    <div class="image-feat" property="image" 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 content-specific CSS files that are < 10kb each — 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

This framework 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 framework for delivering similar 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 Reuze.me 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.

Good Developer:

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

Naughty Developer:

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

Inline Styles

My ambitious goal of building a robust CSS3/HTML5 framework 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.

Development Roadmap

The site was launched in late November 2012 with the default Article content type as it's basis. Many more will be added in the weeks and months to come. Please feel free to email me at dennis@denniserny.com with thoughts and suggestions on new additions.

  • Articles: Added November 2012
  • Products: January 7th 2012
  • Events: January 21st 2012
  • Image Galleries: Feb 2013

Browser Support

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

Acknowledgements

Reuze.me is a project by Dennis Erny.

Something went wrong with that request. Please try again.