The Main Layout of your Front End App
I worked in a lot of projects in multiple companies. Most of the time, when i check the main layout of the apps i get assigned too, i find it broken.
The css is too complex with none needed style on a lot of elements, not cross browser or/and some html containers have 0px height.
Let’s take a look to how to build the major cases you’ll face coding using a simple pure CSS solution for your Front End App to avoid the problems mentioned on top.
Since it’s just html/css code i’ll share with you the minimum i crafted to be able to have a cross browser solution to cover all the scenarios mentioned in the bottom working in IE, EDGE, CHROME, SAFARI and FIREFOX (desktop tested — not tested for now in mobile browsers).
Scenario 01: Scrollable Content
This is mostly used in public website, like your own portfolio website, airbnb website (i am a big fan :)), netflix website...
Scenario 02: Full Height Content
For example, this is used in apps to display full-screen charts to do some analytics.
Scenario 03: Full Height Content with fallback to Scrollable content
This is a mix of the first 2 scenarios. This may be useful when you want to display a full content scenario for ‘the Loading phase’ until the data is fetched then you fallback to a scrollable content layout scenario.
Conclusion
The 3 scenarios on top use the same layout css (one solution for the 3). This solution is working well and probably can be improved. So if you have any good catch or improvement, don’t hesitate to add comments with your tricks ^^.
You found this post helpful! give it some 👏👏👏.
Thank you
