Like it or not, there is more sweat to be shed out for the webbies.! With Bootstrap releasing ( or just released ) its Version 4, and Zurb foundation releasing its Version 6, the message is quite clear! The web is moving towards more and more dynamic development and workflows based on it.
SASS + Flex box is a quite powerful combo and is sure to make waves in the web circuit. So if you are one webbie who is still to explore the power of those, please start doing it offline atleast. Yes, the huge question being, ( I know, I know... what about the browser support ? )
IE10 also will have to eliminated out of the race. Check out caniuse for the full list of browsers that support this.
As a heads up, it will require some mindset change to let the new concepts kick and sink in. There is no floats, clear, vertical-align etc in flexbox. So the way you draw your layouts in your mind, has to be re-arranged (for good! )
Take the above codepen in full screen mode and try resizing it to a tablet layout (anything less than 980px ) and mobile layout (anything less than 600px ) and see how the layout flex and readjusts.
No floats or clears used.
SASS + Flex box is a quite powerful combo and is sure to make waves in the web circuit. So if you are one webbie who is still to explore the power of those, please start doing it offline atleast. Yes, the huge question being, ( I know, I know... what about the browser support ? )
IE10 also will have to eliminated out of the race. Check out caniuse for the full list of browsers that support this.
As a heads up, it will require some mindset change to let the new concepts kick and sink in. There is no floats, clear, vertical-align etc in flexbox. So the way you draw your layouts in your mind, has to be re-arranged (for good! )
See the Pen Flexbox responsive one page dashboard example with a fixed width side bar on desktop by harikrishnan (@harikrishkk) on CodePen.
Feel free to use and abuse it!.. Let me know if you have any comments or suggestions too.Take the above codepen in full screen mode and try resizing it to a tablet layout (anything less than 980px ) and mobile layout (anything less than 600px ) and see how the layout flex and readjusts.
No floats or clears used.
No comments:
Post a Comment