In digital creation the lines between aesthetics and functionality are constantly redrawn, and I find myself continually drawn to the ethos of Modernism.
As a budding programmer, my journey began with the elemental syntax of languages like Basic and Pascal, gradually evolving into more sophisticated realms of Python and SQL. With each line of code I wrote, each interface I designed, seemed to gravitate towards a philosophy I could not yet articulate. At first I looked at the hard lines and rough textures of brutalism, but there was more than this.
The allure of Modernism, with clean simplicity and unwavering focus on function, eventually dawned upon me as a beacon of timeless design in a sea of transient trends.
FORM EVER
FOLLOWS
FUNCTION
- Louis Sullivan, Architect
Modernism transcends the tactile structures, infiltrating the digital architecture of the web. Much like the modernist architects who were pioneers of a movement that celebrated the core function of structures, stripping away the superfluous, I too, revel in the pursuit of web designs that are clean, functional, and devoid of unnecessary ornamentation. The beauty of a website should emanate from its utility, seamless navigation, and intuitive interface that requires no manual to explore.
Modernism expresses the real structure that is there in elegant ways. Modernism avoids veneers of unnecessary styling, instead focusing on the function of elements. This is similar to brutalism, but with a more refined approach to design.
Modernist Web Design is not just a design choice; it's a philosophy that echoes the pragmatic beauty of code - the underlying grid that orchestrates the dance of pixels on a screen. It's about embracing elegance, minimalist color palettes, and the open spaces that breathe between elements. Modernism is grace through the rational use of materials - in our case, code, that shapes the user's journey across a digital landscape.
As modernist architecture exposes the bones of a building, celebrating the raw materials and structural integrity, Modernist Web Design lays bare the code, grid, and foundational elements – our digital realm.
Modernism focuses on crafting experiences that are functional, yet exude an aesthetic charm by virtue of their simplicity and ease of use. It's about making the internal external, allowing users to revel in the beauty of functionality, to appreciate the 'brutally beautiful', or as I like to coin it, 'brutaful' essence of well-designed web interfaces.
As we delve deeper into the realms of web development, every project emerges as a canvas waiting for the essence of Modernism. Each line of code we type is a tribute to the principle that form should follow function. All that we build is part of the narrative that resonates through the virtual halls of the websites we create.
The elegance of code lies in its efficiency - its ability to execute function with a brutal honesty, and its clarity of purpose – its refusal to cloak the mechanics in frivolous aesthetics. As with Brutalist Web Design, true modernist design builds on this with clean and naked objects.
The notion of naked objects in coding resonates deeply with this philosophy. Naked objects are stripping down to the bare essentials, revealing the core functionality in a manner that's intuitive and visually coherent. As we venture forth in the world of web design, the principles of Modernism guide our fingers, shaping the digital edifices we create.
Each project is an ode to functionality, a pursuit of an aesthetic minimalism that serves the user, honouring the profound simplicity that lies at the heart of Modernism.
Did you know that the rules of HTML (the building blocks of the Web) and CSS(the styling system of the Web) allow us to make
every Web page element visible, even special HTML elements like 'title', 'style' and 'script', elements that are normally hidden from view?
Those are just
elements like any other.
You can expose all of them like so:
With that snippet of code (which is not a snippet of code, but an actual style block!), you can now see every element of this page, including that style block, the HTML and title tags, etc.
To learn how we built our naked objects and to start your journey into the world of "brutaful" web design, please visit our website at https://startr.style/brutalism. We believe that this exploration of Modernism and its application to web development will inspire you to create digital landscapes that resonate with the timeless principles of form following function.
With modernism we now add more intentionality to our designs. While with brutalist design we would always expose all elements with modernism we accept that there are often times where we don't want to look at raw objects. With brutalism we always aim to expose the stone and steel of our structures. With modernism we choose when and where to expose elements.
To the end of being intentional with when and how we style our naked elements we'll add a little of our Startr.Style. Double click on this paragraph and you will be given the option to specify a background color (a --bgc). We've given it the color "lightyellow". Why don't you change it to another one such as, "lightblue", "turquoise", or, "lightseagreen".
The W3 has a a list of https://www.w3.org/wiki/CSS/Properties/color/keywords. If you get a chance, read all about the World Wide Web Consortium (W3C). They develop standards and guidelines to help everyone build The Web. Not only do they have a list of color keywords, but five (5) other methods for specifying color values, along with many many other details for how to build the web.
To make it feel more like you are viewing the source, I've also applied
monospace fonts and a generally simple and consistent style
to all elements, using a "*" selector, like so:
So far, I've put style declarations all on one line because ordinary HTML refuses to treat line breaks as "br" tags. But there is a way to make line breaks display as line breaks, and that is with this piece of styling:
The next step in making an HTML Quine is to make the internal external. We can start by ensuring that the tags themselves, such as paragraph tags, are exposed in their stark, natural, brutal beauty:
Adding these special pseudo-elements works for "<p>" elements, but we need to have custom styling for every element. Pseudo-elements are special keywords that allow us to style specific parts of selected elements.
We'll need something to add a before and after pseudo-element to each element.If there was a way to output the "name" of a tag in HTML, then we could reduce all of the necessary style rules above to something like
*::before {'<'name()'>'}
And...
*::after { '<'name()'>' }
But alas there is no "name()" function (yet!). So we are forced to generate a chunk of style information like this 👇
Let's also make it so that whenever our cursor is over a summary tag, it is a pointer, and we'll also indent things by 4 characters (4 chars).
Some elements are a little trickier because they have attributes. Attributes are special variables or settings that HTML elements can have. Consider, for example, the <a> or ⚓️ (anchor), which often has a href attribute. We
need that attribute, including its value, to be visible. This is
done like so:
The attr() function, see mozilla docs is a nifty trick, "supported" since CSS 2.
A surprisingly troublesome set of tags are any that don't close. Two examples of these non-closing tags are < br> and < img> . While we can make our < br> s visible(on most browsers) by adding empty content, this isn't the case with images now.
Another special element is "style" itself, which must include an escape character to avoid being taken literally. Here is the styling code and a little tweak to keep our closing style tags from being indented.
Along with this, we will expose any script tags and ensure their content is pre-formated.
If we don't do a little more tweaking to our document's head element, our style and script tags are exposed but look messy. Their closing tag will be indented, unlike in our body. So we need to add a little more style to the head element to fix this.
You might be wondering about that menu at the top of our page.
Here's how it works. First, we use the "position: sticky" style to allow it to stick to the top of our page once we scroll to it. With it stuck to the top of our viewport, it stays there unless we scroll above where we loaded it (just after we opened our body element).
As we want things to stay tidy in our menu, we'll hide the hrefs from our anchors.
To reduce the visual weight of the before and after pseudo-elements, we can give them a soft purple color and mostly hide them until we focus on them.:
Finally, I believe brutalist design, even when applied to truly naked brutal HTML Quines, is about function, not deliberate ugliness; I'd like to apply two humble style sets that improve the readability of this "brutiful" stack.
The first is our 101 Startr Bytes of Style. We apply it as the base style to our whole html to give things a clean, modern feel. The second is a little bit of transition magic. It tones down the look of elements we wouldn't normally see unless we hover over them.
One last thing. Although this idea has bounced around in my head for a decade, the thing that reminded me to pipe it into a file was seeing this piece of "Code as Art" from Geoff Huntley: no yaml. Bring back the world's weird web.
Kind regards
P.S. Our saving and editing features are powered by JavaScript. The following script is used to save the DOM as an HTML file and to toggle all text nodes' "contentEditable" attribute.
The attribute "contentEditable" is a special one that allows us to edit
the text of any element.
P.P.S. If you want to see the source of this page, prefix the URL with "view-source:" and you'll see the source. You can do this on any page!
Explore our lab of resources and experiment with the endless possibilities of Startr Style.
Made with Startr.Style. Enjoy our related creations:
Brutalism ·
Modernism ·
Minimalism ·
Skeuomorphism ·
Neumorphism ·
More