Week 6

October 4

Briefly, technical questions

Again, I won’t always be available to help with technical questions (especially, right before class). I’ve been told there are some contract problems with the CD Tutors this semester, so they don’t have a schedule yet and there isn’t a timeline for one—not ideal!

In the meantime, we’ve been directed to have you try the University Learning Center. They require an appointment, but are supposed to offer support for HTML/CSS/JavaScript questions.

I’d like some folks to try this out, before next week, and report back.

Harmonic Collection review

Let’s pick back up with your entries:

Harmonic Collection entries

New volunteers, please!

Flexbox!

We’ll get into some more modern (less frustrating) CSS layout:

Finally, flexbox

A standard mid-lecture break somewhere in here, as we do.

Let’s try it out

We’re going to recreate a classic Holy Grail layout together with flex—but also make it responsive.

Let’s start with this DOM, to get us going:

<!DOCTYPE html>
<html>
  <head>
    <title>Entry 5</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://core-interaction.github.io/assets/styles/reset.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <header id="top">
      <h1>Entry 5</h1>
      <a href="../">All entries</a>
    </header>
    <nav>
      <ul>
        <li><a href="#first">Producing meaning</a></li>
        <li><a href="#second">Cultural authenticity </a></li>
        <li><a href="#third">Performance spectre</a></li>
      </ul>
    </nav>
    <article>
      <h2 id="first">Producing meaning</h2>
      <p>Sustainable authoritarian institutional historical mass-produced intuitive utopia collage dogmatic. Ethnicity intimate art gender cultural authenticity the Canon consumer politics fragments interplay. Male gaze contemplation gendering consumerist memory pop art fabrication. Internal construct observers loss R. Mutt digital manifesto material. Performance consumption political interpretation authoritarian relational body art male-dominated.</p>
      <p>Homogenized media revelatory street art existence experimental phenomenon. Imitation graffiti displacement bodily experience repurposed materials navigate natural. Collective historicizing dogma violence .net art industrial translates displacement. Zine filmic male gaze disrupt martyr modern gallery space universal experience ethnography.</p>
      <h2 id="second">Cultural authenticity</h2>
      <p>Meditate sustainable social justice female form appropriate Marina Abramovic subculture tokenism. Sentient kitsch boundaries alienation psychic sensuality ethnicity. Poetic non-white absence utilitarian revelatory gallery space meta chaos. Emerge self-identify process lived experience collaborative popular culture blurred viewpoint new technologies.</p>
      <p>Heritage nothingness experiential body art politics blurred utopia. Duchamp cliché postmodern modern process erotica virtual reality reclaiming history. Experiential destabilize ritual utilitarian Fluxus ghosts horror. Imagination figment social dynamic contrast transformation normative real progress.</p>
      <h2 id="third">Performance spectre</h2>
      <p>Memory ethnicity community engagement revelatory impulsive handmade cliché inclusive artifacts. Consumerist outsider subversive mythology genius form poetic. Discipline embodiment pastiche mind's eye digital origin ethnicity cabinet of curiousities community engagement. Trans institutional chaos navigate consumerist mythology fetish eroticism utopia.</p>
      <p>Re-purposed materials normative mind's eye everyday explore love reclaimed materials observe awareness. Producing meaning conformity ready-made globalization spiritual misappropriated man-made interpersonal. Difference contrast producing meaning artifacts meta bespoke Glitch Art. Digital hyperspace loss conventional criticizes contemplation institutional Fountain.</p>
    </article>
    <aside>
      <h2>Institutional narrative</h2>
      <p>Internet explore gendering destabilize alternative individual sexist. Institutional narrative authentic blurred individual new media pop art. Psychic Keith Haring appropriate abstract Fluxus plurality interactive revelatory interrogates. History cultural authenticity contemplation future seeing technology street art sexual politics represents. Fountain misappropriated controversy existential racial politics universal unique perspective sensuality.</p>
    </aside>
    <footer>
      <a href="#top">Top</a>
    </footer>
  </body>
</html>

We’re going to do this “live” (so I won’t write out all the steps), but here is our agenda:

  1. Set up basic styles (mobile first)

    • Variables for type size/spacing on :root
    • Use for padding/spacing on the children
    • Differentiate link color/decoration
    • Scale our headings from base type size

  2. Flexbox pass (desktop)

    • Start with flex-wrap and widths
    • Add main as container in the middle
    • Switch axis for body / main (column/row)
    • Use flex-grow on article block
    • Force footer to bottom (short page)

  3. Limit layout width (very large screens)

    • Add containers for centered max-width
    • main / non-semantic div for header/footer
    • Use shared class across the three instances

For next week

Session recording

Session recording