Flexbox and Frogs

The last assignment we worked on was playing around with a game called Flexbox Froggy. Its for learning flexbox, which is a set of features added in CSS 3. Flexbox makes  a lot of interesting changes to the way we can position elements on a page. The frog game is really well designed, and its a great way to learn flexbox

The general idea is that you can position everything without needing to know the exact dimensions of the page. I’ve had a lot of difficulty in the past dealing with CSS and vertical positioning. Thankfully flexbox adds commands that automatically position them correctly (justified, or centered, or between, etc). I like the changes quite a bit and I think ill be using some of it going forward. Unfortunately its not responsive, unless you use a lot of media tags.

 

Thoughts

The way I feel about flexbox is this: we have been learning lots of different frameworks and packages that rather than replace the language we are using, simply add to it. When I was in computer science rather than learn about frameworks or libraries we just learned different languages that did certain things better. Now we are relearning CSS and JS because of features that are being added in CSS 3 and ES6. Many of those changes are simply things that other frameworks were doing, but built into the language.

This seems to be a bit of a trend were some of the languages we are using are just improving themselves. It definitely won’t remove the need for Frameworks, but it feels like the languages are trying to work in features that are considered core these days. (i.e Flexbox is replacing some things that Bootstrap would have done in the past).

1 thought on “CSS and Frogs”

The work done by web evangelists for responsive design was refreshing after the early scramble of trying to accommodate smartphones and tablets. When a 4K screen can be either a huge living room display, or your smartphone in your hand, it forces a reexamination of how content in delivered to the user. Media queries and other tools have helped in the transition, but flexbox and upcoming CSS grid features are really helping unshackle pages from the convention of a fixed viewport. I personally view it as one of the best disruptions to frontend web development in many years, in terms of impact on user experience.

Information on the web should be free flowing, there’s no reason it can’t also be presented as such.


Leave a Reply