Positioning inside browser

Fullstack developer is a fad that engulfs many job posting and training materials. This fad is passing because it looks for one individual who can build a spaceship and take it out into the unknown confidently. Existence of such unicorn individuals is much for debate but not our subject in this dispatch. Then why did we start with that word?

We wanted to introduce the notion of integrating the front, or read creative and aesthetic end with the back, or read invisible and industrial end of software. Developers from the era before the word fullstack came in existence were happy in either of front or back end of the quarters and never bother meandering into each other’s quarter. Fullstack claims to break that notion and if taken in true spirit; is indeed a noble notion which widens the vision for the individual developer and also scales them up in career.

Aesthetics has been a tough thread to master for developers and particularly when they have to run that in parallel to tough problems of caching, load balancing, performance etc in backend. Thus, it requires concentrated effort and a different way of looking at aesthetics for developers to have a grasp that can be professionally exercised in a project.

In this dispatch we take a different view on the cornerstone of aesthetics – Positioning or in other words layout. In CSS there are two amazing positioning and layout modules – Flex and Grid. Let us start with flex and eventually move to grid.

Flex

One of the toughest things to do while starting to get a grip on off tangent topic is introduction. As much as introduction helps understand the concept or thing it also introduces a subconscious bias.

We were to define flex as layout as ability to position content in smaller zones in the HTML. As we say that we realize that there are websites and web apps that have been entirely themed using only flex layout. One of the ways we find it fruitful to deal with such introductions is to carry the subconscious bias for some time and break it eventually to see the larger picture and possibilities. Thus, let us stick with that introduction of flex layout.

If you are wondering what does smaller zones in HTML literally mean, we understand. As developers we are fonder of certainties and find it difficult to handle a subjective description. Smaller zones refer to individual component, sub-section or element like p or div in the HTML.

Before we start with the CSS let us anchor ourselves to some terms that will help us communicate better. Container, as the word means is the visual bounding element for flex layout. Thus, all elements within container are arranged per flex layout. Two adjacent containers do not get arranged by flex layout by themselves until there is a root container that hosts these two adjacent containers. You get the picture now.

Ah one more norm that if you noticed; when we say root and adjacent, please do not start visualizing the HTML document tree. In the world of CSS, it is how the content will look on the display and these words reflect their visual hierarchy. Let us put that in picture for us to be on same page –

In CSS you will start with a declaration like this –

The corresponding HTML will look in spartan format will look like this –

Isn’t this easy? Just one term to remember. Yes, there are more nuances but for you to get started the notion of container and items within that is more than enough. Advanced scenarios and layout references require understanding few more terms but to master you must know only one term that is container.

So far so good. Next, we go to specific properties that we can use to build the beautiful UI. If you want to think of it, imagine a class called container and a class called item. Both have different roles and thus different properties.

Container’s properties can be related to aspects that impact all items in the container. Whereas properties for items are those that impact individual item and its relative aspects to other items inside the container.

Container

display

We have already seen this; it is equivalent to declaration of using this module for layout.

flex-direction

Direction of arranging elements within the container.

flex-wrap

Both flex-wrap and flex-direction can be combined into a property flex-flow with same values separated by space between flex-direction and flex-wrap.

justify-content

Distribution of items within container in a manner that space gets distributed according to the value you specify here.

The interesting value safe and unsafe can be clubbed with any of the left values. This ensures that the item does not visually spills outside of the viewport. The property align-item can be used in conjunction with flex-direction of column to get similar results.

Gap

Ensures the space between two items is the specified value

If specific control is needed row-gap and column-gap can be used to specify gap in horizontal and vertical directions respectively.

Item

Has some properties that control the order, spacing and alignment of item within the container. Alignment is provided as opportunity for the item to override the value set for the container.

Order can assume any negative or positive integer including 0 which is default. The only value best supported across browsers for flex-basis is auto. flex-grow or flex-shrink are used to specific relative sizes of item within the container.

An important call-out for developers will be the nuances to be aware with the browser and implementation specific to browser. If you have to draw a flank it is same as compatibility of API version with the frontend and if the API was designed to capture array values the interpretation of each array element. Though, it is not an ideal situation for developers to be in and you can take corrective action as you have control over the API and frontend. In the world of CSS this however is not possible because of limitation that you do not control the browser code.

One way to stay motivated in mastering the aesthetics for developers is to imagine yourself in the shoes of a demanding customer. Will you accept a interface that looks spartan and pay for it? Another logical way to stay motivated is that by writing CSS you are working with mathematical arrangement of elements on screen which by nature is a technical work. The creativity is in making this arrangement appeal to customer who is willing to pay for the service rendered by the interface. Thus, as developer there is all the more reason for you to tackle the aesthetics.