DEV Community

loading...
Cover image for CSS Calculator: Dieter Rams Calculator with CSS

CSS Calculator: Dieter Rams Calculator with CSS

uzomezu profile image Kevin Ellington ・2 min read

Form Follows Function

According to Oren Hartov(2020), the bauhaus movement is one of the most influential design movements in history. Originating in Germany, the central axiom "form follows function" helped render many of deconstructed designs from Nike, Apple, and Braun.

"Its central axiom has become prevalent across myriad disciplines: form follows function" (Hartov, The Bauhaus Is One of the Most Influential Design Movements in History 2020).

One of my goals in software development is to create attractive and affordable user interfaces. I wanted to create something that would help me implement the Bauhaus principles into my CSS stylesheets, and act as a wireframe for a functional project later on.

Braun ET66 Calculator

The Braun ET66 calculator is an infamous design that symbolizes the evolution of industrial design and tech after the 20th century. Braun and Dieter Rams were in many ways the pinnacle of Bauhaus, "Less But Better" philosophy, designing incredible industrial items from calculators to toilets. In a not so secret way, Johnny Ive, Steven Paul Job's Second in command at Apple.inc, brought back the flavor of Dieter Rams with Apple's 21st century rollout. The iPhone, his magna carta of designs, showcased many Braun Easter eggs, just look at the calculator app!

iphone-braun-calc

I thought it would be fun to implement some Bauhaus principles by creating a CSS version of the ET66. It is relevant that the function of our code is equally influenced by the form of our stylesheets and CSS. Presenting Data in an attractive method is essential for developers.

Credits to Chris Graveline For the wireframes used in this project.

In part two, I will implement the React.js needed to make the ET66 come to life! Please Click below for the walkthrough and code.


Part 2: React Calculator App


Resources

Form Follows Function. (n.d.). Retrieved December 19, 2020, from https://www.guggenheim.org/teaching-materials/the-architecture-of-the-solomon-r-guggenheim-museum/form-follows-function

Hartov, O. (2020, July 16). The Bauhaus Is One of the Most Influential Design Movements in History. Retrieved December 19, 2020, from https://www.gearpatrol.com/briefings/a609440/influence-of-the-bauhaus-movement/

Discussion (0)

Forem Open with the Forem app