The Paper Project

The Paper Project is silly.

The Paper Project is also a great tool for understanding all modern Development projects, from complex gaming engines to simply static webpage generators.

Supplies:

  • Five (or more) sheets of paper
  • One pair of scissors
  • One table
  • Markers
  • Your Imagination

The Paper Project:

  • Step 1:
    • Lay one sheet flat on the table.
    • Mark Sheet_1 with a giant X from corner to corner.
    • Write 'Background' on it, near the top-left corner.
    • This "File" will be known as "table/background" or "background".
  • Step 2:
    • With the scissors, cut the next page into three pieces: Small, Large, Small.
    • Lay them in order with the following labels:
    • "head"
    • "body"
    • "footer"
    • These will be known as "table/head", "table/body", and "table/footer" respectively.
  • Step 3:
    • Cut a giant square almost to the edge on the outside of the next piece of paper.
    • Lay the sheet flat to cover "head", "body", and "footer" as a 'wrapper'..
    • Write 'Page' on it, again near the top-left corner.
    • This "File" will be known as "table/page" or "page".
  • THE END

Congratulations, you have completed your first prototyping project for a generic HTML theme!!

More importantly, you have a solid and concrete visualisation of how both Cascading Style Sheets (CSS) and Drupal Blocks function.

If you liked Legos as a kid? Yeah, you are going to LOVE Drupal.

Use the rest of your paper to cut a bunch of squares in various shapes and sizes, then place them wherever you want with as many wrapper as you want.

Blocks work in a similar fashion to the sheets above, CSS, and LEGOS. If you are building your own theme, you can pretty much say "I want Blocks to be able to go x, x, x, x... Whee!!!".

If using someone else's theme, Developers and Site Builders are limited, to a point, in where and how Blocks can be placed. See the (future) chapter on Subtheming for more or visit (the best Drupal theming guide anywhere) sqndr's Drupal 8 Theming Guide.

Further Reading:

  • Drupal Gardens: dGardens has one of the single greatest tools for quickly learning and understanding Blocks, CSS, and HTML composition I have ever come across, yet they barely advertise it.
    • The Drupal Gardens ThemeBuilder allows users to dynamically alter the CSS of their website in-action, while actually seeing the changes occur on-screen. In addition, users can navigate to the 'Advanced' tab of the ThemeBuilder to recieve a text print-out of their active CSS to monitor where and how it changes.
    • Its like Legos. Only as Web Development.
  • If anyone has a great visual reference for picturing these concepts (or wants to draw them and hand 'em over), let me know!
  • sqndr's Drupal 8 Theming Guide - Sander, the author, wrote a reflexively simple and detailed must-read book on theme generation, creation, and editing in Drupal 8.

results matching ""

    No results matching ""