# web layout **The foundation of building website layouts.** ## THE BOX MODEL - [w3schools box model](https://www.w3schools.com/css/css_boxmodel.asp "opens in new tab") - [shay howe opening the box model](http://learn.shayhowe.com/html-css/opening-the-box-model/ "opens in new tab") - [mozilla box model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model "opens in new tab") ## FLOATS & POSITIONING - [w3schools floats](https://www.w3schools.com/css/css_float.asp "opens in new tab") - [w3schools float and clear](https://www.w3schools.com/css/css_float.asp "opens in new tab") - [w3schools clearfix hack](https://www.w3schools.com/howto/howto_css_clearfix.asp "opens in new tab") - [w3schools positioning](https://www.w3schools.com/css/css_positioning.asp "opens in new tab") - [mozilla positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position "opens in new tab") ## RESPONSIVE DESIGN Responsive web design is when a site changes layout to respond to different screens and devices. A website should look and behave differently when viewed on a mobile phone and when viewed on a 4K desktop monitor. - [what the heck is responsive web design?](https://johnpolacek.github.io/scrolldeck.js/decks/responsive/ "opens in new tab") - [intro to responsive web design at w3schools](https://www.w3schools.com/html/html_responsive.asp "opens in new tab") - [responsive web design at w3schools](https://www.w3schools.com/css/css_rwd_intro.asp "opens in new tab") - [setting responsive/relative units of measurement](https://medium.com/@bytegasm/15-css-relative-units-how-many-do-you-know-74bcaf048d46 "opens in new tab") - [this is responsive - patterns and resources](https://bradfrost.github.io/this-is-responsive/ "opens in new tab") Mobile first design is simply the idea that you start building your layout for phones and small screens first and then add extra zing for bigger screens. This idea is also called content-first design. - [mobile first responsive web design](http://bradfrost.com/blog/post/mobile-first-responsive-web-design/ "opens in new tab") - [a hands on guide to mobile first design](https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/ "opens in new tab") - [google is now indexing sites based on mobile version](https://searchengineland.com/faq-google-mobile-first-index-262751 "opens in new tab") ## MEDIA QUERIES Media Queries are used to detect screen widths and change page layouts accordingly. - [intro to media queries at w3schools](https://www.w3schools.com/css/css_rwd_mediaqueries.asp "opens in new tab") - [media queries at w3schools](https://www.w3schools.com/css/css3_mediaqueries.asp "opens in new tab") - [example media queries at w3schools](https://www.w3schools.com/Css/css3_mediaqueries_ex.asp "opens in new tab") ## FLEXBOX Flexbox is a system for arranging elements in a linear flow. It is called one-dimensional since you arrange things in one direction at a time. Basically, you put items in a box and then control how the items are organized. - [css flexbox layout guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - [basic concepts of flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [an interactive guide to flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/) ## CSS GRID CSS Grid is the newest and bestest way to create web layout structure. It is called two-dimensional since you can arrange elements in both X and Y directions on a grid. It is a powerful system, but a bit complex when you first get started. Since it is such a new tool, there are plenty of people writing about it as they try to understand the potential. That means there are plenty of resources available to help. - [grid vs flexbox](https://www.webdesignerdepot.com/2018/09/grid-vs-flexbox-which-should-you-choose/ "opens in new tab") - [getting started with css grid](https://css-tricks.com/getting-started-css-grid/ "opens in new tab") - [a complete guide to css grid](https://css-tricks.com/snippets/css/complete-guide-grid/ "opens in new tab") - [creating css grid layouts](https://www.sitepoint.com/creating-css-grid-layouts/ "opens in new tab") - [4 css grid properties](https://css-tricks.com/4-css-grid-properties-and-one-value-for-most-of-your-layout-needs/ "opens in new tab") ### EXTRA CSS GRID RESOURCES Here are a few places and authors that are digging deep into CSS Grid - [rachel andrews](https://gridbyexample.com/ "opens in new tab") is the recognized expert - [jenn simmons](http://jensimmons.com/writing "opens in new tab") is also very good at sharing ideas - [css layout news](http://csslayout.news/ "opens in new tab") has great information and a good newsletter - [css grid cheatsheet](http://grid.malven.co/ "opens in new tab") - [my website knowledge base collection](https://onedrive.live.com/redir?resid=E0276CD90EF7C2D1%216669&authkey=%21AGuu0Fm9Tbt_JjU&page=View&wd=target%28css%20grid.one%7C5557056d-281f-485d-a25e-26a6fcb7f31a%2Fcss%20grid%7C6cdf9bd1-5584-4005-b635-391b0c9f8237%2F%29&wdorigin=703 "opens in new tab") is full of good stuff, but it isn't overly organized - [mozilla grid tools](https://www.mozilla.org/en-US/developer/css-grid/ "opens in new tab") ### SOME TOOLS TO HELP WITH CSS GRID Here are a few tools to help build your layout - [layoutit!](https://grid.layoutit.com "opens in new tab") is an interactive tool to build your grid - [css grid generator](https://cssgridgenerator.io) is another good interactive tool - [css layout generator](https://layout.bradwoods.io) is also a good tool with prebuilt layouts for both grid and flexbox - [firefox grid inspector tool](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts "opens in new tab") lets you play with the grid in your browser ## CREATING NAVIGATION SETUPS - [w3schools demo on navigation bar setups](https://www.w3schools.com/css/css_navbar.asp "opens in new tab") ## RESET AND NORMALIZE Streamline the code so your page displays consistently across different browsers. - [the best css reset stylesheets](https://www.webfx.com/blog/web-design/css-reset-stylesheets/ "opens in new tab") - different options and logic for why to choose which reset - [normalize.css](http://nicolasgallagher.com/about-normalize-css/ "opens in new tab") - a more modern approach - [sanitize.css](https://github.com/csstools/sanitize.css "opens in new tab") - a modular approach that works with normalize --- tags: #web #resources home: [[! intro to web resources]]