FreeCodeCamp Hyderabad, a local developer community started not even a month ago, just had their 4th meet-up in the city at everyone’s favorite maker space, Collab House. The community is mentored by three passionate developers – Kapil, Ramana and Arijit.
For this meetup, Ramana, who works as a web developer, taught the members of the community the fundamentals of web layout. The session covered concepts like how the browser treats the structure of any webpage, and how by understanding its inner workings we can break down complex layouts into a simple binary question of – “Is it aligned vertically or horizontally?”
The session started off with a simple idea conceptualised thousands of years ago, called Divide and Conquer. This idea is so primitive yet powerful, that we can lay the foundation with it. We may think of it as a basic strategy for solving any real/virtual world problem.
The crux of the idea is simple, to be able to solve a complex problem, you need to divide it into subproblems. Divide it to the point of absolute simplicity, where you can understand the process from the fundamental level and then conquer it.
To apply this simple concept to writing good code, one needs to ask a few questions -:
- What are the inputs to my program?
- What outputs are we expecting?
- What logic goes in between to take the given input and convert it to the expected output?
From here, we move to understanding the fundamentals of CSS layouts.
You might be wondering now that how CSS can have inputs and outputs?
And that is a good question. Well, no need to worry! Input and Output in this context refers to our target design. The UI Mockup or Wireframe you have been provided in a Photoshop PSD file. Or a random site whose layout you are trying to copy (nothing to be ashamed of! Mimicry is the highest display of respect).
Ramana pointed out to some sample sites such as OMGUbuntu, Wikipedia and even the FCC random quote generator project. Our output was going to be the UI base layout of these sites. Basically, creating the containers which hosts the data and images displayed on these sites. We started by asking the same basic question, is our input (sample site) aligned vertically or horizontally? We restricted ourselves to two placement algorithms – display block and display flex.
By default, display block aligns elements vertically (one on top of another) and display flex horizontally (right next to each other). By using these two algorithms, we start constructing our target layout from scratch. Ramana demonstrated the usage of uncommon background colors to get quick feedback on your design. If some placement of component within the layout was not as expected, the feedback was clear about where we went wrong. The background color highlights the component. After a two hour refresher on this layout, we moved on to using simple jQuery to display data in a table format. Here’s the best part – we didn’t use any table component! We carry forwarded our learning from layouts – that one can implement any layout reliably using only the first principles.
It was a simple table layout to display some info about a group of people. Any data table would have the desirable property to be able to sort in order when one clicks on a table column header. When you view your email in Outlook or Thunderbird, you probably sort your mails by subject or sender or date. We implemented that with jQuery. The rendering logic and sorting logic to achieve this again followed the first principle – divide the main problem to a set of simpler subproblems that can be individually solved, and composed together to get a complete, end-to-end solution.
The session ended with a deeper dive into all things flexbox. CSS tricks has a nice article on all things flexbox can do to align your content in different directions, add proper space within the components, stretch or shrink them etc.
“Informative and comprehensible approach towards layout in large. Ramana made sure that we learn new ways(read: flex) to structure elements on the page. Overall I feel these sessions should continue along with pair programming to increase the participant’s competency in the language.” – Rahul Nayak | FCC Hyd Member