Flexbox vs CSS Grid

The purpose of this blog post is to compare and contrast Flexbox and CSS Grid. These are a few points for comparison:

  • How to conceptualize and plan layout
  • Ideal use case scenarios
  • Ease of use

Caveat: My approach to web development is fairly quick and dirty, having come from more startup type experiences (as Tech Writer and FE Dev contractor) than not. As a result, my biases are towards learning the minimal concepts necessary to get about 80% typical use cases done.

How to Conceptualize/Plan Layout with Flexbox

When planning out one responsive layout design in both Flexbox and CSS Grid, I felt like the main difference for thinking about Flexbox were the ideas of:

  • content container
  • how data should flow through a content container

These are some sketches used to visualize how the grid content would flow across breakpoints.

wireframe for flexbox design (mobile)

Wireframe sketch for flexbox responsive design (mobile)

wireframe sketch for flexbox design (tablet)

Wireframe sketch for flexbox responsive design (tablet)

wireframe sketch for flexbox design (desktop)

Wireframe sketch for flexbox responsive design (desktop)

By scanning the planning sketches hopefully you could get an idea that all that was necessary was to:

  • understand the number of columns per view (also the relative proportion of space needed by each column)
  • understand how content should lay out within the column
  • understand how the repeating pattern of data should display

How to Conceptualize/Plan Layout with CSS Grid

For CSS Grid, I felt like it was more important to sketch out a precise grid, as though the webpage were like a piece of graph paper and I had to lay out the skeleton that would support the content.

wireframe for CSS grid design (tablet)

Wireframe sketch for responsive CSS grid design (tablet)

Note: To be technically correct for a 2 column grid with margins (far left and far right), this should be a 4 column diagram. The far left and far right columns would actually be empty spacers. The resulting vertical line count would be 1-2-3-4-5.

TODO: redraw the grids with proper columns

 

Ideal Use Case Scenarios

My belief is that flexbox is a better choice when the required grid is relatively simple and when the data to be displayed is dynamic (for example, coming from a database and the total number of records returned from a query is not always constant).

On the other hand, if the required grid is relatively complex and the desired design layout needs to be pixel perfect, CSS Grid allows for a more granular level of control. Also if the data to be displayed is static, CSS Grid could be an option.

Ease of Use

Generally my preferred tool would be flexbox because the same CSS would easily scale to a dynamic size of data.

In contrast, I felt with CSS grid, there would be a bit of calculation and scripting required to make the CSS able to support a dynamic size of data. See CSS in the sample source (about line 60 and later).

What do you think? If it seems like CSS grid is more versatile, please explain your use case in the comments.

Examples

Flexbox example: Demo | Source

CSS Grid example: Demo | Source

 

Resources

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout

https://gridbyexample.com/ (not used for this article but a good one)

For Flexbox resources, please see a previous article.

Flexbox

Lately I’ve been reading flexbox docs. There are a lot of really good articles already out there (linked below). I’ll share what I’ve learned using a few practical examples with links to the source and a few observations about the process.

Sample 1 (simulated simple bootstrap grid)

This is not my first time working with flexbox but when I initially compared it to the bootstrap grid, I preferred bootstrap because I felt like I had a little more layout control.

One area where flexbox is much better than bootstrap is in footprint size. There is a lot of code in bootstrap that goes unused and defining a responsive grid using flexbox does not require very much code.

*Please click the upper left corner to get to the pen content and then the Edit on CODEPEN link (upper right) will also be available.

Note: this grid collapses in mobile device view also there are some observations in the content header.

Sample 2 (example of vertical layout)

This example specifically refers to when would you prefer to use

flex-direction: column 

One scenario could be if you have a bunch of dynamic content with similar widths but varying heights (photos or maybe work portfolio samples). Typically a grid system with this kind of content would force an alignment with a bunch of irregular white space between elements.

Tip: When you want the content to lay out with an even bottom edge (desktop/tablet views) you need to mind that the total height for elements in each column would equal the flex container height. Otherwise a jagged bottom edge could result (which I guess could be an option).

Note: This grid collapses in mobile device view.

 

Sample 3 (simulation of a marketing homepage)

To test the ease of use of flexbox, this is a simulation of a consumer hardware company’s homepage. They do great marketing design. This simulation does not go into the nitty gritty details (like navbar responsive design) but emulates their body/footer responsive design. It did not feel too labor intensive and the code footprint is still very light.

Note: the breakpoints are between mobile:tablet, and between tablet:desktop

https://codepen.io/cch5ng/full/gRwYPe/

Final tip: My initial observation when googling flexbox is that it is potentially a very complex topic to learn. Rather than starting with a site that contains a ton of reference info about each property, I like the link below by webdesignerwall because of their visual style of teaching and simplicity.

Afterward, please search further for more advanced tutorials on flexbox because this is only the tip of the iceberg (but hopefully helpful).

Resources

 

Women’s Tech Panel Talk

(Follow up: Get a list of speakers/titles)

This afternoon women reps from various parts of Mozilla (including HR/Recruitment, Engineering management, Culture) held a Q&A session. There was tons of info and advice but I will try to give brief highlights:

Don’t take things too personally.

Reflect on successes and failures. Decide what you learned from both.

Get a lot of buy in when making really big decisions with large impact.

Go with your guts about people.

Make decisions that give yourself more options.

One manager remarked that her style was to have great personal relationships with people and really tried to get to know people on their level.

After the internship, when job hunting and you get an offer:

     * Negotiate your salary

     * Listen to their offer, tell them thank you and that you’d like to take 2 days to discuss it with your people. Afterward, make your counter offer. Do not take the initially offered salary.

Seek mentors.

Have confidence in your own abilities. Don’t be scared to ask questions.

Tech Resources

This is an ongoing post where I’ll share resources I find for learning or productivity. When updates are made to a section, the section heading will be marked in a color and marker (new or updated). Also links will be ordered from newest to oldest

Web Dev

JavaScript

 

Web Design

This is a really nice codepen by Angela V for custom radio buttons (css)

 

Productivity

Creating command line shortcuts for git commands

 

Communication

Tips for embedding codepen samples on wordpress sites

  • I’m using oEmbed so I just copy the url of the codepen into an empty line in my wordpress.com site editor

 

Internships Advice (new)

https://www.pwc.com/us/en/careers/campus/internships/make-the-most-of-your-internship.html

http://www.businessinsider.com/common-mistakes-interns-make-2014-6

https://hbr.org/2016/07/6-ways-to-make-the-most-of-your-internship

https://www.forbes.com/sites/susanadams/2014/06/18/how-to-make-the-most-of-your-internship-3/#27ac174e6f5c

https://www.forbes.com/sites/karimabouelnaga/2016/07/07/5-tips-to-make-the-most-of-your-summer-internship/2/#11bb7c5d6d3b

Intern Talk by Selena Deckelmann

Mozilla has organized a series of talks for summer interns. The first was by Selena Deckelmann, Director of Firefox Runtime.

These are some memorable points to think about:

  • Creating a circle of work advisers
  • Write down your dreams
  • Do the hard thing (find a hard problem to tackle)
  • Listen to criticism, sometimes

On her slide deck, the slide that shows periods leading to realizing dreams also coincides with periods of struggle. I have to wonder whether I am not struggling enough(?).

Webcompat Intro

Webcompat is a volunteer service that allows web developers and designers to report cross browser compatibility issues observed in their websites and applications. The issue will be triaged and a solution or browser fix will be returned.

webcompat.com screenshot

Webcompat.com browser compatibility reporting site

One of my tasks as Front End Dev intern for Mozilla Webcompat (via Outreachy) this summer is to help migrate the webcompat.com application to a new architecture and version.

These are a few tools that web developers/designers can take advantage of today:

  • Firefox and Chrome add-ons: After installing this add-on for your browser, you can conveniently report cross browser issues from your website with just one click. (see the screenshot upper left corner for link)
  • CSS Fix Me: This tool allows you to enter CSS that is not working across browsers and provides updated CSS with vendor prefixes for improved cross browser compatibility.
  • Media Reporting Tool: (available on Firefox Nightly version only) Automatically detects video playback issues related to browser and provides a one-click method to report the issue from your website.

So far, I am learning about code tidying processes that are required for the build process to run (on travis). These are a few resources for the processes we are using:

That is all for now. Look forward to meeting project members and other interns at the All Hands meeting this summer.

Front End Web Interview Application

I have a web application on Github that generates random Front End Web Interview questions for practicing before interviews. This is a description about the process of developing the application. It should be noted that my main purpose in developing this application was to practice my Angular.js application development. Comments on the application are welcome.

Inspiration

  • I’m a Front End Web Developer who is seeking a new job. I was looking for resources online for how to prepare for technical interviews. I found the h5bp project’s interview questions list on github. But I was interested in playing with the data.

Problem 1

  • The main data format of the original list of questions is a README.mdn markdown file. Initially I didn’t even think it was possible to work with data in this format.
  • Resolution 1: I found the project’s gh-pages branch and corresponding index.html page with interview questions. The first iteration of my application’s logic did an HTTP Get on that index.html page and parsed the results.

Problem 2

  • Ruh-Roh (that’s in the voice of Scooby Doo), I compared the current README.mdn to the index.html page in the h5bp project and realized that they contained some different questions. I scanned the project issues and came to the conclusion that one of the contributors would manually generate the HTML list from the README and post to the gh-pages branch. But keeping the HTML version up to date was not a high priority.
  • Resolution 2: I found a website, dillinger.io, that would take a markdown file and parse it into HTML. My current process is to manually run the h5bp README in the dillinger.io parser and update the resulting HTML in my github project. I don’t really like having this manual step but it allows me to ensure that the presented list is relatively current. Also it gives me an assurance that my application will not break unpredictably when the list format changes on the h5bp project side.

Problem 3

  • I considered application features that would be more helpful to users who would administer technical interviews (for ex., Lead developers, Hiring managers). I thought managers might want to save a boilerplate interview or sort saved interviews in a particular order (like easiest to hardest questions).
  • But this would require some form of data storage. As I looked into options like local browser storage and IndexedDB, I had questions about what would happen when and if the h5bp questions list changed (like questions could be added or removed) and how to synchronize two versions of lists. I decided to table further enhancements requiring data storage to a different application maybe warranting use of a database and user authentication.