HTML5 Zone is brought to you in partnership with:

Hirvesh Munogee is a freelance web developer who also happens to have a passion for blogging. Hirvesh is a DZone MVB and is not an employee of DZone and has posted 177 posts at DZone. You can read more from them at their website. View Full User Profile

Reuze - A Small Front-End Framework For Structuring HTML & CSS

12.26.2012
| 2862 views |
  • submit to reddit

Reuze is a small front-end framework which allows you to provide structure to your HTML and CSS files easily.  Reuze enables you to create semantic HTML5 code blocks, which are nested in ‘namespaced’ container elements in little to no time.

The Reuze framework is geared towards medium to large sized content-rich website and can be used alongside other popular front-end frameworks like Twitter Bootstrap or Zurb Foundation. The framework’s front-page includes a generator which allows you to specify details about the HTML code to be generated.

You can specify the class of the articles, type of article (main content or sidebar) number of columns to generate, category title header size, main title header size, sub title header size, meta data to be included, featured image specifications, and more.

Reuze weights in only at 10KB, is responsive, IE8 compatible, and includes RDFa Lite support.  Below is a quote of the benefits of using Reuze from the project’s Github page:

  • 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 them 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.


Browser Support

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

Requirements: None
Demo:http:/ / reuze. me/
License: MIT License

Published at DZone with permission of Hirvesh Munogee, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)