Manjit Singh

Manjit Singh

Recent Posts

CSS Grid vs Flexbox - Which One Should You Opt For?

Posted by Manjit Singh on Apr 8, 2019 5:39:00 PM

Grid or Flexbox?

While CSS Flexbox offers a one-dimensional layout model powerful alignment and space distribution, CSS Grid lets you quickly create flexible and two-dimensional layouts. 

 

They can both be used to place, size, align and architect the website designs.

But dimensions aren’t the only value proposition between the two. Let's learn about CSS Grid and Flexbox together!

The Fundamentals

The CSS Grid Layout offers a two-dimensional grid-based layout system, with rows and columns. It makes designing web pages easier, without having to use floats and positioning.

CSS-Grid-Srijan

Layout design of CSS Grid

The CSS Flexbox offers a one-dimensional layout. It is helpful in allocating and aligning the space among items in a container (made of grids). It works with all kinds of display devices and screen sizes.CSS-Flexbox -Srijan

Layout design of CSS Flexbox

A Quick Comparison

Element Grid Flexbox
Dimension Two dimensional  One dimensional
Support type Layout-first Content-first
Page Responsiveness Yes Yes
Other features Can flex a combination of items through space-occupying features Can push content elements to extreme alignment
Browser Support Firefox, Chrome, Safari, IE10+, IOS Safari  Firefox, Chrome, Safari, IE10+, IOS Safari, Opera

Let’s take a look at the two major points of difference between Flex and Grid

One vs Two Dimension


Grid is made for two-dimensional layout while Flexbox is for one.
This means Flexbox can work on either row or columns at a time, but Grids can work on both.

When working on either element (row or column), you are most associated with the content. Flexbox, here, gives you more flexibility. HTML markup and CSS will be easy to manage in this type of scenario.

However, when working with the overall web page layouts, CSS Grid does away with the nightmares of coding. It gives you more flexibility to move around the blocks irrespective of your HTML markup.

Content-First vs Layout-First

Another major difference between Flexbox and Grids is that the former works on content while the latter is based on the layout. Let’s take a quick look:

Flexbox 

Let’s say we want to recreate this design in Flex

flexbox-recreate-srijan

HTML:

 <header>

  <div>Home</div>

  <div>Search</div>

  <div>Logout</div>

</header>

 CSS:

header {   
display: flex;
}
 header > div:nth-child(3) { 
  margin-left: auto;
}

 home-screen-service-srijan-technologies

 Items will place automatically in one line and you don’t have to add anything else except display: flex ;; so the items are free to take their appropriate place.

Let’s see how we will achieve the same design with CSS Grids.

header {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

display-grid-srijan-technologies

Although they both look similar, the difference in layout can be seen with Chrome dev tools.

srijan-technologies-css grid-flexbox

Can you see the grid columns & content? So what did Grid actually do?

It divided the wrapper into 10 columns and placed each item into those grid cells. It forced us to divide the layout into 10 columns. But this limitation was not there in the flexbox since it adjusts the items automatically.

We move forward with shifting one element (say, log out) to the extreme right.

Here’s how we do it.

header > div:nth-child(3) {
  grid-column: 10;
}

div-nth-child-srijan-technologies

grid-vs-flexbox

In this case, we are forcefully moving log out to the last column, which is wrong.

This is how it will look like when we will combine both the header and other web page blocks.

grind-container-flexbox-container-srijan-technologies

Conclusion

  • CSS Grids helps you create the outer layout of the webpage. You can build complex as well responsive design with this. This is why it is called ‘layout first’.
  • Flexbox mostly helps align content & move blocks.
  • CSS grids are for 2D layouts. It works with both rows and columns.
  • Flexbox works better in one dimension only (either rows OR columns).
  • It will be more time saving and helpful if you use both at the same time.

While Grid and Flexbox can be defined as the parent-children element, both have their own strengths and limitations. It is wise to understand their ability before deciding upon which one to choose.

Looking for frontend expertise? Connect with us at business@srijan.net and let our experts handle your worries.

Topics: User Experience and User Interface, Framework and Libraries

Hampi - A trip to remember

Posted by Manjit Singh on Dec 31, 2018 3:10:00 PM

It was the time to unplug our mind from our desks & our work and take a break. And our recent trip to Hampi had everything we needed to have a truly fantastic time.

Hampi is situated on the banks of Tungabhadra River in the eastern part of central Karnataka. The place has numerous ruins of Hindu temples from the Vijayanagar Empire.

It was exciting as most of the people have never visited this place before. We were around 40 people from both Srijan Goa and Bangalore office. The two-day getaway was a super fun experience.

It was the end of the Monsoon season, the weather was pleasant and the lush green view made it scenic.annual-trip-to-hampi-3

The first day was about team activities which included bouldering, trekking and a visit to a temple. 

Bouldering - We were all thrilled for this particular activity. Tom & Jerry were our instructors. It takes a lot of strength and skill but it was worth it.

Check out the team efforts in the video below.

bouldering-team-efforts-srijan

Trekking - It was a little hectic as it followed straight after the bouldering. It was a 5 km trek to a forest and through it we explored the natural and the man-made beauty of the land

trekking-forest-srijan-2

 

trekking-video-forest-2-srijan

 

trekkin-vidios-forest-srijan-3

Coracle boats - Coracle boating was a unique thing to experience. It was a circular shaped country boat that took us across the river. And one should never miss the sunset there.annual-trip-to-hampi-2

Then we rush to our camps. It was around 8-10 km away from the boating place. It was a very long and tiring day.

annual-trip-to-hampi-1

On the second day, we visited at Sri Virupaksha Shiva Temple Sanctum Sanctorum. It is the main center of pilgrimage at Hampi. It is dedicated to Lord Shiva. Tom and Jerry helped us hire the local guide who shared the history of the temples.

And then we rented bicycles because few temples were far away from the Virupaksha Temple. And it was the best way to explore the remaining sites like the Elephant Stable, and the Vijaya Vittala Temple. 

MOVIE

 

annual-trip-to-hampi-3-1

annual-trip-to-hampi-4

It was a memorable trip, soaking up the scenery and bringing the team closer together. 

Topics: Life at Srijan, Event

Variable Fonts? Lets explore it

Posted by Manjit Singh on Dec 4, 2018 4:01:00 PM
The Basics of Variable Fonts

A couple of days ago, I got to know about variable fonts. When I heard about variable fonts, there were few questions in my mind.

  • What are variable fonts?
  • Why do we need it?
  • How is it different from other fonts?

A variable font file is a single file which behaves like multiple fonts. So you don’t need to keep multiple font files like thin, italic, bold, regular medium etc. This makes for huge space-saving when rendering a page. These are Opentype font formats in which multiple individual fonts can be compactly packaged within a single font file. And we can change the whole complete font by making simple variations within it.

The technology behind variable fonts is officially called OpenType Font Variations. It has been jointly developed by Microsoft, Google, Apple, and Adobe, which means it will soon be compatible to all major browsers.

As of now it is supported by the following browsers:

variable fonts - srijan.netSource: https://caniuse.com/#feat=variable-fonts  

Core Concept

The core concept of variable fonts is that a single font has multiple axes and by changing the values of those axes we can create variations in the font.

For example, the Weight axis might connect to a Light style axis. And if we change the Weight then the font will turn into a lighter version of its original style.

variable fonts 2 - srijan.net

Here are the axes whose values we can change to get the required font style:

Weight
wght
Width
wdth
Slant
slnt
Optical Size
opsz
Italics
ital
Grade
GRAD

In order to add a variable font first we must link it

@font-face {  

font-family: 'Roboto';  

src: url('../fonts/Roboto-min-VF.ttf');

}

The way we define an axis value is by using the CSS property  font-variations which has a series of values that pair the axis tag with an instance location:

#font-amstelvar { 

font-family: 'Roboto';

font-variation-settings: 'wdth' 400, 'wght' 98;

}

gingham-weight-variable fonts - srijan

As you can see the variation in the fonts with changing the width & weight.

Drawbacks

 

Variable fonts are relatively new and hence not yet supported by Internet Explorer 11 or lower version.

Some good resources you might be interested in: 

Topics: User Experience and User Interface, Framework and Libraries

A Simple Guide to CSS Grid Layout

Posted by Manjit Singh on Nov 13, 2018 12:21:00 PM

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns. It is powerful tool that allows for two-dimensional and flexible layouts to be created on the web. And for those who prefer to build designs from scratch, it works a lot better that other CSS frameworks like Bootstrap, Foundation, or Semantic UI.

Let’s directly jump into the practical implementation.

HTML Layout

Grids will only work if you have particular HTML layout - Parent & Child. Parent is the actual grid and child are the actual content inside the grid.

<div class="wrapper"> 
<div class="item-1">one</div>
<div class="item-2">two</div>
<div class="item-3">three</div>
<div class="item-4">four</div>
<div class="item-5">five</div>
<div class="item-6">six</div></div>

Display Grid

To make wrapper div into grid, simply give it a  display: grid;

.wrapper {  display: grid;}

Columns & Rows

To create columns and rows of the grid, we have to use the  grid-template-row  and  grid-template-column  properties.

.wrapper {  
display: grid;   grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;}

As you can see, we have specified the three values to  grid-template-columns  & two values to  grid-template-rows . It means the layout will be of three columns & two rows.

This is how the layout will look:

Placing Items in Grid

Before placing items in Grids, it is important to understand the grid lines’.

To position and resize the items we’ll target them and use the  grid-column  and grid-row  properties:

.item-1 {  
 grid-column-start: 1;   
grid-column-end: 4;}
OR

.item-1 {   grid-column: 1/4; //Shorthand property}

This is how  .item-1  will look like:

On the other hand, if we change to this

.item-1 {   
grid-row-start: 1;   
grid-row-end: 4;}
OR
.item-1 {   grid-row: 1/4; //Shorthand property}

This is how the  .item-1  will look like:

As you can see,  grid-rows  &  grid-column allows you to make complex layouts without any change in HTML DOM.

Grid-area Property

The grid-area property can be used as a shorthand property for the  grid-row-start/ grid-column-start/ grid-row-end  and the  grid-column-end   properties.

.item5 { grid-area: 1 / 2 / 3 / 4;}

This is how it will look:

Naming of Grid Items

We can assign a particular name to grid items using  grid-area  property.

HTML:

<div class="wrapper">
<div class="item-1">Header</div>
<div class="item-2">Left Sidebar</div>
<div class="item-3">Main</div>
<div class="item-4">Right sidebar</div>
<div class="item-5">Footer</div></div>

CSS:

.container { display: grid; grid-template-areas:
'header header header header header header'  
'menu main main main main right'  
'menu footer footer footer footer footer';}
.item-1 { grid-area: header; }
.item-2 { grid-area: menu; }
.item-3 { grid-area: main; }
.item-4 { grid-area: right; }
.item-5 { grid-area: footer; }

That was a quick basic guide to CSS Grids. Here are the best resources to dive in further:

Topics: Framework and Libraries

Discussion

Write to us

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms Of Service apply. By submitting this form, you agree to our Privacy Policy.

See how our uniquely collaborative work style, can help you redesign your business.

Contact us