With that said, in this part of the blog series I want to focus on creating a responsive grid that we can use in our application so that we don't have to bring in something like Bootstrap just to use their grid. And we have already learned some very basic layout techniques to build on. It's not going to win any awards, but we are not really focusing on look and feel yet, we are still getting our sea legs in this constantly moving and resizing responsive world. Our application to start with should look like the image below:
I will provide several demos at various points below. Otherwise, just read on and understand that you can open up any of the demos I provide to play with the code at any stopping point in the post. I would recommend making a fork of this demo if you plan to follow along. Our starting point will be a StackBlitz demo which is simply a fork of the demo where we left off in the last article. I would like to use another npm package to do this, it's called react-simple-flex-grid. The next thing we should work on in this application is bringing in some type of responsive grid. We can keep building and working to refactor and improve what we already built, as well as learn some new techniques around responsive layout and slowly incorporate those ideas. No different from UI, layout takes time and baby steps. We also showcased the KendoReact Menu component, and by the end, we had a fairly responsive demo that we're going to build on in this article. We used a React Hooks npm package to help with breakpoints and another package for helping with responsive images (picture tag).
Html responsive layout generator how to#
In our previous article, Creating a Responsive Layout in React, we started by learning how to setup a basic responsive layout in our React application using Flexbox and media queries. Learn the basic steps to setup a React application using Flexbox to make a responsive grid.
0 kommentar(er)
