Finally we have a site-container class that will act as a Flexbox container and set direction for it's items inside of it. main style will be used specifically for navigation and our main content. For now we just have some global styles for our app container, a.
We also have a custom.css file which is exactly what it says, custom styles. We are using a kendo-theme for the Menu (this is normal if you plan on working with the suite of components, but just understand that it will only style any KendoReact components that we add and nothing else). So with this first example in StackBlitz, we already have a lot of stuff going on. Take a look at the StackBlitz demo below, and then we can talk about what's going on next.
I will also be using the KendoReact Menu as mentioned before, which has a horizontal and vertical mode that we can switch when we hit our small to medium breakpoint. We use react-responsive-image to render images using the picture tag at different resolutions. There's react-media-hook, which we use to track a single breakpoint. Each StackBlitz demo will contain the end product of all of the steps we have talked about up until that point. If you want to follow along by coding, you can fork this initial StackBlitz demo, otherwise just read along knowing that you can grab any StackBlitz example I provide throughout the course (there are four of them) to play with the code. We want to focus just on building our application, not on setting it up. I'm going to start with an already setup StackBlitz demo, just so I don't have to go over any of the React setup. Initially, we will start with just one breakpoint and later in the tutorial add another. For mobile, I want my menu component to render horizontal (left to right) at the top of the page, like a top-nav menu bar, but on Tablet and desktop, I would like the menu to be vertical (top to bottom) along the left side of the page.
It will need to switch between vertical and horizontal modes in order for me to use it the way that I envision. I have a KendoReact Menu component that I know I want to use.
MEDIUM CREATE REACT APPLICATION FROMSCRATCH HOW TO
In this tutorial we will use Flexbox, some basic media queries to create breakpoints determining how to render our layout. Our goal will be to build a web page that changes at several breakpoints and changes the way we display our content on the page like the image below:Ī lot of the time you will want the freedom of not being tied to a framework like Bootstrap or Material, you want to roll your own, but you also don't want to reinvent the wheel. But contrary to what others would have you believe, it's not to hard to use some basic CSS and a few React Component packages to help us achieve some basic levels of responsiveness in an application. In order to really move forward with any React application beyond just the individual component level, you need an outer layer that provides styles to help you layout your site. Learn the basic steps to setup a React application with Flexbox and make your layout responsive.
0 kommentar(er)
