101 lines
4.6 KiB
Org Mode
101 lines
4.6 KiB
Org Mode
:PROPERTIES:
|
|
:ID: cfd05ee0-488d-4b28-ab97-5fe6fe4a5cae
|
|
:END:
|
|
#+title: Brut CSS
|
|
#+Author: Yann Esposito
|
|
#+Date: [2022-10-23]
|
|
|
|
- tags :: [[id:a5be1daf-1010-428f-a30f-8faf95c1a42f][blog]] [[id:d5bc6532-b50e-4155-bb61-7851649b522e][css]]
|
|
|
|
* BRUT CSS
|
|
|
|
Since a while now, I really like the concepts attached to brutalism in web design.
|
|
In fact behind the apparent crude aspect of a brutalist website there is often a
|
|
system that is in front of its users as naked as possible with a single aspect
|
|
visible, utility. Everything else being removed.
|
|
|
|
I agree, that having both something that is nice to look at and very useful is
|
|
great.
|
|
But I feel that it is interesting to play with a web application that is focused
|
|
on UX efficiency and not so much on the look and feel, the UI, images, etc…
|
|
|
|
Using a brutalist design forces you to focus on the immediate utility and not
|
|
lose your time on choosing the right nuance of color that would be the nicest.
|
|
Not lose time on which image would convey the best sentiment.
|
|
And only focus on the crude utility of your tool.
|
|
|
|
Furthermore, building a web application with a brutalist look & feel has an
|
|
immediate effect. It screams that it is not a website for everyone.
|
|
It focus on the content and not on the aspect.
|
|
|
|
So after some time, I finally built my own specialized "CSS Framework".
|
|
The end goal of this framework is to help in the building of Nerd-targeted web
|
|
applications.
|
|
|
|
What I mean by that, is that in most of my professional experience, I had to
|
|
build internal administration tools that I needed to share with other developers
|
|
and managers.
|
|
|
|
I am also recently fond some aspect of "Brutalism".
|
|
The idea I like the most is about, going directly to the useful and tear appart
|
|
anything else.
|
|
|
|
And having something pleasing to the eye is quite often in direct contradiction
|
|
with having a professional tool.
|
|
|
|
A good hammer does not have to be beautiful, it must just be a hammer.
|
|
In fact, if I was to give you a hammer in gold with incrusted diamonds and nice
|
|
decorations it would probably be a shitty hammer for the sake of planting nails.
|
|
|
|
So here it is.
|
|
|
|
- I want a framework with insane density of information. Which is in direct
|
|
opposition with best modern design practices when it come to website. Most new
|
|
websites are just... Empty, full of nothingness for you to breathe...
|
|
I don't want that for my tools.
|
|
- A minimalist framework. The framework should be mostly finished, I will
|
|
probably not add many new features along the time. Having a constrained,
|
|
limited number of components is the feature.
|
|
- It should immediately be obvious, the application is for professional use, and
|
|
should intimidate just by its look and feel any non core-user/developer to use it.
|
|
|
|
* LLM corrected
|
|
|
|
> TL;DR: Link to the brutalist CSS framework https://brut.esy.fun
|
|
|
|
As I've delved deeper into the world of brutalist web design, I've grown
|
|
increasingly fascinated by its underlying principles.
|
|
Behind the seemingly crude exterior of a brutalist website lies a system that
|
|
strips away unnecessary elements and presents itself to users as bare-bones
|
|
utility.
|
|
|
|
While it's true that having both form and function is ideal, I believe there's
|
|
value in exploring websites that prioritize UX efficiency over aesthetics.
|
|
By focusing on the immediate utility of an application rather than getting
|
|
bogged down in nuances like color palette or image selection, we can create
|
|
tools that are unapologetically functional.
|
|
|
|
Using a brutalist design approach forces us to confront our priorities and
|
|
eliminate distractions.
|
|
We're not tempted to waste time agonizing over the perfect shade of blue or
|
|
which image best conveys a particular sentiment.
|
|
Instead, we focus on crafting a tool that gets the job done with minimal fuss.
|
|
One of the most compelling aspects of brutalism is its ability to immediately
|
|
convey a sense of purpose.
|
|
A website built in this style screams "not for everyone" and focuses attention
|
|
squarely on the content rather than trying to impress visitors with flashy
|
|
visuals.
|
|
|
|
Recently, I've been working on my own specialized CSS framework designed
|
|
specifically for building nerd-targeted web applications.
|
|
This project grew out of my professional experience creating internal
|
|
administration tools that needed to be shared with other developers and
|
|
managers.
|
|
|
|
Here are my goals for this framework:
|
|
- I want a dense, information-rich environment that defies modern design best
|
|
practices and eschews empty space.
|
|
- I'm aiming for a minimalist approach with a limited number of components. This
|
|
will help me avoid adding unnecessary features over time.
|
|
- The application should immediately convey its professional nature and
|
|
intimidate non-core users from trying to use it.
|