CSS Positions





SECTION 1

The Display Property.
1st div in section 1 (display: inline) Websites are places. Websites are places. They provide services and social environments and another. Like architecture, they distribute access and atmospheric context to these resources. Watching a video on Nowness is different from watching a video on YouTube.
2nd div in section 1 (display: inline-block) Websites are places. Websites are places. They provide services and social environments and another. Like architecture, they distribute access and atmospheric context to these resources. Watching a video on Nowness is different from watching a video on YouTube.
3rd div in section 1 (display: block) Websites are places. Websites are places. They provide services and social environments and another. Like architecture, they distribute access and atmospheric context to these resources. Watching a video on Nowness is different from watching a video on YouTube.
4th div in section 1 (display: block + text-align: center) Websites are places. Websites are places. They provide services and social environments and another. Like architecture, they distribute access and atmospheric context to these resources. Watching a video on Nowness is different from watching a video on YouTube.

SECTION 2

CSS Units (All divs are set to inline-block)
1st div (has no width set) Websites are local, despite their distributed nature. Websites adhere to culturally established patterns, languages and user expectations in similar ways architecture does. Buying an onigiri from a 7-11 branch is different from buying a pretzel from a Bavarian bakery.
2nd div (set to 600px wide) Websites are local, despite their distributed nature. Websites adhere to culturally established patterns, languages and user expectations in similar ways architecture does. Buying an onigiri from a 7-11 branch is different from buying a pretzel from a Bavarian bakery.
3rd div (set to 600px wide + has a a display: block and margin: auto) Websites are local, despite their distributed nature. Websites adhere to culturally established patterns, languages and user expectations in similar ways architecture does. Buying an onigiri from a 7-11 branch is different from buying a pretzel from a Bavarian bakery.
4th div (set to 100% width) Websites are local, despite their distributed nature. Websites adhere to culturally established patterns, languages and user expectations in similar ways architecture does. Buying an onigiri from a 7-11 branch is different from buying a pretzel from a Bavarian bakery.
5th div (set to 100vw) Websites are local, despite their distributed nature. Websites adhere to culturally established patterns, languages and user expectations in similar ways architecture does. Buying an onigiri from a 7-11 branch is different from buying a pretzel from a Bavarian bakery.
6th div (is set to 47% width) (This span is set to display: block and has a width of 50%.) Websites are cultural artifacts. Like buildings, websites foster social discourses. They do so by establishing new ways of interaction or by asking new aesthetic questions.
7th div (set to 47% width) (This span is set to display: block and has a width of 50vw.) Websites are cultural artifacts. Like buildings, websites foster social discourses. They do so by establishing new ways of interaction or by asking new aesthetic questions.
8th div (set to 47% width + overflow: hidden) (This span is set to display: block and has a width of 50vw.) Websites are cultural artifacts. Like buildings, websites foster social discourses. They do so by establishing new ways of interaction or by asking new aesthetic questions.
9th div (set to 47% width + overflow: auto) (This span is set to display: block and has a width of 50vw.) Websites are cultural artifacts. Like buildings, websites foster social discourses. They do so by establishing new ways of interaction or by asking new aesthetic questions.

SECTION 3

CSS Units — This section has a font-size of 24px applied to it
(This div has no font-size set) Websites age. As buildings, some get better with age. Some decay. Others get renovated or re-purposed.
(This div has a font-size of 15px) Websites age. As buildings, some get better with age. Some decay. Others get renovated or re-purposed.
(This div has a font-size of 1.5vw) Websites age. As buildings, some get better with age. Some decay. Others get renovated or re-purposed.
(This div has a font-size of 1em) Websites age. As buildings, some get better with age. Some decay. Others get renovated or re-purposed.
(This div has a font-size of 1rem) Websites age. As buildings, some get better with age. Some decay. Others get renovated or re-purposed.

SECTION 4

The Position Property.

The Death of the Hipster

(1st div in section 4)

A terrible irony ultimately befell the Hipster: as Hipsterism branded authenticity into a system of visual language, it became scalable, infinitely replicable. It had to be able to accommodate mass-production supply chains, but still appear to do the opposite. In order for products to lose their commodity-signifiers, they had to distinguish themselves from consumer capitalism’s automated presets — things like the form of the factory default or the Adobe template. This distancing required more and more layers of design treatment, and more systematization of this design treatment to facilitate further scalability.

The resulting set of authenticity-signifiers proved to make great brand assets, particularly useful to elevate cheap, fast, casual products and services to a slightly fancier level with a small price markup, producing things it makes sense (to echo Shorin)11 in calling “Premium Mediocre”. This phenomenon confirms the fascinating class element of authenticity-politics: that not only is authenticity something to be bought and sold, but it’s only really accessible to the wealthy, and those in the lower-middle-class striving toward success can have a taste of it in their slightly-more-expensive McDonald’s chicken sandwich that’s been photographed on raw-wood in natural lighting instead of some garish red-and-yellow backdrop, and has the words “natural,” “signature”, “craft”, or “artisan” somewhere in its name.

As authenticity scaled into the Premium Mediocre (thanks to graphic designers’ branding skills in service of marketing firms) and lost its exclusivity, we started to associate labels like “signature” and “craft” more with fast food than some platonic vision of the raw, whole, ancient wilderness of the real world. Everything started looking more and more like a Williamsburg coffee shop, McDonalds like Whole Foods, its ads like Kinfolk Magazine. But we’re smart enough to know that “dijon” is always just going to be the same mustard but in a pricier, neutral-toned packet — and to pay that markup is to pay for different design, not a better product. The eternal form-versus-content debate continues to plague authenticity-seeking graphic designers everywhere: is “form” just as valuable as “content” when the “form” is a mustard packet and the “content” is the mustard? Michael Rock can write as many manifestos as he wants from the security of his office at 2x4 where it’s easy to see design in a vacuum, but it won’t stop graphic design’s dismissal as it’s increasingly recognized as a passive tool in the belt of profit-hungry corporations.

Authenticity-at-scale is something entirely different from the version the Hipster fetishized, following Moore’s Law: as something grows cheaper, faster, and smaller, the nature of the thing changes. When the value of the thing derives from scarcity itself, democratization kills its credibility. This democratization of authenticity was the final nail in the Hipster’s coffin: solid, material proof that any pursuit of authenticity is foolish, because authenticity itself is fake, in the sense that any other marketing gimmick is perceivably “fake” — therefore rendering it useless as a tool to sell scarcity. Scarcity and originality are not only unattainable, but valueless. Shorin writes, “Authenticity has expanded to the point that people don’t even believe in it anymore.” The death of authenticity meant that people had to move on to a new measurement of realness to believe in.

3.2 Normcore as Brand Strategy

(2nd div in the fourth section)

A truly post-authentic sincere attitude is synonymous with “normcore,” as originally defined in K-HOLE’s trend report Youth Mode, a timely and groundbreaking publication released in 2013 as the last embers of Hipsterism were fading.To crudely summarize highlights of the analysis: The opposite of mass authenticity-seeking, which they name “Mass Indie,” is the normcore attitude. The normcore derives value from popularity and recognition, not scarcity. The pursuit of uniqueness is devalued; dynamicism and flexibility are more important than originality, because originality itself is unattainable. One of the first declarations in the publication is “Normcore is about adaptability, not exclusivity.” Adaptability is the key characteristic of the normcore attitude, the true post-authentic attitude.

After K-HOLE coined the term, “normcore” was incorrectly interpreted and memeified as simply a bland, minimal aesthetic. But really it’s not an aesthetic in itself, rather a “strategy to blend into any context.”15 To blend in doesn’t mean simply to be bland, it means accepting rather than resisting the form of the mainstream, whatever that looks like. The mundanity of truly normcore aesthetics is often mistaken for neo-modernist minimalism because they seek to blend in, rather than distinguish from, the expected form of the given structure. This does seem oddly Modernist, except rather than attaching claims of moral superiority inherent in its materiality, normcore design treats its form as simply a product of social or material conditions. It embraces these conditions because they exist, not because they’re good. Goodness (virtue) comes from this honesty. Any formal blandness in products, then, comes from embracing the genericness of the commodity form. Instead of romanticizing the “nature” outside, the normcore, post-authentic attitude romanticizes the nature of consumer culture’s interior, the space of capital exchange, because that’s the new, generally accepted, normal.

It’s easy to see how a normcore approach to this new normal (a now-overt complicity in capitalist realism) has triggered a shift in what realness looks like in the world of marketing. The role of the designer looks pretty different — if not bleak — in the post-authentic era, where design itself is seen more and more as frivolous decoration, or worse, a simple tool for deception. The authenticity fetish did more harm than good for the graphic designer’s reputation, as the group easiest to blame for aestheticizing Hipster authenticity into deceptive brand assets and thereby making a farce of its gesture at ethical value. Premium Mediocre pandering and pretension now feels so cringey and patronizing that buying products dressed-up as superior non-commodities means that either you have enough excess cash not to care about being ripped-off, or you are a hopelessly idealistic Mass Indie Millennial clinging onto an outdated moral framework. You could argue that this is just the typical pendulum-swing of aesthetic trends, which is likely true, but I see it also as part of a bigger paradigm shift: Consumers now have less of an inherent distrust toward brands and commodification, and more of a skepticism toward design itself. Brands can be okay, even trustworthy, as long as they signal a neoliberal transparency, but this transparency requires a serious humbling of design.

Any attempt to transcend capitalism’s automated presets means simply painting over them, in a deceptive act of concealing. Since there’s no denying the omnipresence of the commodity, there’s no point in trying to cover it up. Each layer of design that aims to camouflage the commodity form adds a layer of opacity. Design itself, then, seems insincere. The apparent stripping-away of it enables the refreshing aura of transparency, the texture of post-authentic sincerity. Of course, this doesn’t mean that companies are firing all of their designers, but it does mean that they must adapt their work to match the new reality, do their part in branding the capitalist-real.

SECTION 5

The Position Property, contd.
1st div in Section 5. (Position: static)
2nd div in Section 5. (Position: relative)
3rd div in Section 5.(Position: absolute; top: 15px; right: 20px;)
4th div in Section 5.(Position: static)
5th div in Section 5.(Position: static)

SECTION 6

The Position Property, contd. (this section has a position: relative set to it)
1st div in Section 6. (Position: static)
2nd div in Section 6. (Position: absolute; bottom: 10px; right: 0;)
3rd div in Section 6.(Position: absolute; left: -40px;)
4th div in Section 6.(Position: static)
5th div in Section 6.(Position: static)

SECTION 7

SEIZE THE DEFAULTS! (first div in section 7)
SEIZE THE DEFAULTS! (second div in section 7)
BE THE PROGRAMMER THAT YOU ALREADY ARE! (third div in section 7)