Hello. Its been a few months since i started learning html and css. Im now able to design some decent looking websites using flexbox and css grid. However i was wondering if there is any need to make some portfolio websites using just float layout in 2019, since its outdated now. Or is it something company's still look for in a front end designer/developer? 

Thanks 😅

Welcome to the forums!

Floats still have a place if it's sensible to use them. Of course flexbox and grid can now largely replace floats for layout, if you need to support older browsers you can still use layout floats as a fallback.

 

I wouldn't use flexbox for overall layout.  I've always used inline-block for grids and layout as they're far more versatile than floats.  There isn't much that my grid cannot do in terms of item ordering, vertical alignment of items etc.

I'd use CSS Grid if starting out now and was supporting modern browsers only.  Flexbox has it's uses but isn't intended for overall page layout, you can get layout thrashing issues with dynamic content forcing re-paints.

10 hours ago, rbrtsmith said:

I wouldn't use flexbox for overall layout.  I've always used inline-block for grids and layout as they're far more versatile than floats.  There isn't much that my grid cannot do in terms of item ordering, vertical alignment of items etc.

I'd use CSS Grid if starting out now and was supporting modern browsers only.  Flexbox has it's uses but isn't intended for overall page layout, you can get layout thrashing issues with dynamic content forcing re-paints.

I don't think what you're saying about Flexbox is true. Not according to Google: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing

 

Perhaps it was true some time ago, but that doesn't appear to be the case now.

Using inline-block for grids sounds interesting, but it's by no means an industry standard, so I'd recommend going with more industry accepted practices. Using CSS grid seems perfectly fine for most use cases - most browsers have good support, and those that don't can fallback to an acceptable layout without all the bells and whistles. This is how new features have been adopted over the years, and we're better for it. You can use CSS grid and support older browsers in an acceptable way.

On 3/6/2019 at 10:23 PM, ingrid said:

Using inline-block for grids sounds interesting, but it's by no means an industry standard, so I'd recommend going with more industry accepted practices. 

The BBC uses inline-block in it's framework as does Sky.  My own framework https://nebulaui.github.io/nebula/api/objects/grid uses it for it's Grid and Nebula is consumed by quite a few people.  It's used at Sainsbury's (Because I built their CSS framework).  Harry Roberts https://csswizardry.com/ who's one of the most well known CSS consultants uses it in his own framework.  So I think you can say it is an industry standard.

What is industry standard with CSS is that it's very commonly badly written, which is why companies will pay large sums of money for consultants like Harry to come in and fix the problems that have arisen.  Bootstrap is widely used but it's historically been terrible.  Although it's more recently improved I still wouldn't use it.

As for Flexbox this was written by Jake Archibald who also ironically works at Google. https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/

So for CSS Grid I wouldn't use it unless your browser support matrix means that you can.  The idea of progressive enhancement isn't so that you can use modern cool tools, it's so that you can give features to users on modern browsers and fallback for older ones (they get a lesser experience). 
CSS Grid isn't a feature that enhances things for the user, it's a layout tool that provides a much better dev experience - but you users won't know any different if you use it, apart from those on older browsers who get a less than ideal experience.  Use a layout strategy that works across all the browsers you support.
Progressive Enhancement (PE) is all around improving the UX for users that you can.  However things that improve developer experience (Not a PE) should not come at the cost of UX.
So you can use modern JavaScript and Babel will compile it down so all users get the same experience.

So there's little (if any) benefit to the end user unless there's some very specific layout that's only achievable in grid, but chances are you can by combining older techniques together through composition.

We have far more important things to be concerned with on the frontend anyway such as:
A11Y, Performance, How to architect data-fetching and state management, automated testing amongst other things.  I wouldn't expand too much energy on this area.

Edited March 8, 20197 yr by rbrtsmith