CSS Layout: Digital Gardening

"A garden is a collection of evolving ideas that aren't strictly organised by their publication date. They're inherently exploratory – notes are linked through contextual associations. They aren't refined or complete - notes are published as half-finished thoughts that will grow and evolve over time. They're less rigid, less performative, and less perfect than the personal websites we're used to seeing." - Maggie Appleton

A brief History of Digital Gardens

Mark Bernstein's 1998 essay, Hypertext Gardens appears to be the first recorded mention of the term.

To early web inhabitants, their idea of the web was that is was very much like a labyrinth that was tended by WikiGardeners and WikiGnomes. They wanted to create a pick-your-own path experience.

The Navigation Problem - the issue of how to give web users just enough guidance to freely explore the web, without forcing them into pre-defined browsing experiences. The eternal struggle to find the right balance of chaos and structure.

"It's different way of thinking about our online behaviour around information - one that accumulates personal knowledge over time in an explorable space" Read more by Mike Caufield and his main argument that we have become swept away by streams

A beautiful Digital Garden
Another Digital Garden

CSS Layout: Flexbox, Grid, Positioning

CSS: Recap

CSS is written in declarations


background-color: blue;

This is made up of a property and a value

Remember there are three ways to write CSS:

Keep in mind:

HTML Recap: Block vs. Inline

When we're talking about how HTML elements display, there are two main types: block-level elements and inline elements.

Display Property

display: block

display: inline

display: inline-block

display: none

Position Property

position: static

position: fixed

position: relative

position: absolute

Making Layouts Responsive

This will make your code change style at different screen widths

@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

More CSS Layout Resources click to Look more at Grid and Flexbox

what can live in a digital garden?

Lets make our own digital gardens: download this example code to start

Start to build out our garden plots, style, add images, links, text. Use alt and title to add text to images when you hover. You can also make separate divs that have display properties that start from display:none and on a selector with a :hover psudo-selector, to display: block and use positioning properties to position the div where you want it to show up

alt text is for an alternative representation of an image. title text is for tooltips.

<<<<<<< Updated upstream

CSS Layout Coding Challenge!

Start by sketching out a simple layout that you can use as a reference. Label each section with it's html tag to help with coding structure.

Your sketch might look something like this:

  1. Code the HTML
  2. Code the CSS using grid / flex display properties. Style the boxes so you can distinguish each section by using background color or borders
  3. Add any content if time permits
======= >>>>>>> Stashed changes

Layout Design Challenge!

Lets take some time to try out the design process from a sketched out wireframe. Take out a sketchbook or piece of paper and sketch out a very simple wireframe with just a few boxes. Think of how your wireframe shows the html structure. Label each section with the corresponding HTML tag.

Your sketch might look something like this:

  1. Code the HTML. Look at your sketch and derive html structure.
  2. Use display properties to style using CSS. Change the background color of each section to be able to see the layout more clearly
  3. Share