January 27, 20206 yr Should we *always* use wrapper divs? And do you prefer using a wrapper div or the body element as a wrapper?
January 27, 20206 yr Typically, I use a wrapper, but I never place it over the entire app or body. The reason being is some components might need to go outside of the container width. I always try and build my components to be isolated so that they can be dropped into a grid or container without being dependent on anything outside of it. You have to use your best judgement, but it's typical for a header to span 100% width and the main content to be inside a wrapping element, so something like this would be more suitable: <body> <header> <div class="container"> </div> </header> <main class="container"> </main> </body>
January 28, 20206 yr Use a wrapper div, I often have many like Jack has put above. You might want content to have a max-width, but background colours for sections to span the entire page. That isn't possible if you put a max-width on the body (at least not with sensibly written CSS)
January 28, 20206 yr usually use tailwind wrappers in a similar style to jack so header would be 100% i.e. full width, text usually a medium or narrow wrapper so the measure isn't too long, most other content in either a wide (equivalent to around 80% width or so) or full-width. But no "one-wrapper-to-rule-them-all"
January 28, 20206 yr I use Tailwind quite a bit too, I really like it. One pattern I have seen people use over the years is to include a wrapping element inside of a component, this is absolutely not what you want to do (if possible). For example: <div class="carousel-component"> <div class="wrapper"></div> </div> This would be better as: <div class="wrapper"> <div class="carousel-component"></div> </div> If your carousel is 100% width then it can be placed safely inside a grid or other containing element. When browsers eventually get Container Queries this will be even more powerful, components will be able to change based on the width of the containing element they are placed inside and not just the viewport width. This is how the new version of Twitter works, it doesn't use media queries at all - https://philipwalton.github.io/responsive-components/.
April 21, 20206 yr Author This comes from MDN: Quote <main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn't be nested within other elements. So, I can't put <main> inside a wrapper div?
April 21, 20206 yr 32 minutes ago, Stephen18 said: So, I can't put <main> inside a wrapper div? You can if you need to: <div class="main-wrapper"> <main class="main"> ...content </main> </div>
April 22, 20206 yr All it's saying is that you can only use that tag once on the page. So with that in mind should be high up. Typical structure would be ``` <body> <header /> <main /> <footer /> </body> ```
Create an account or sign in to comment