diff --git a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md index f685d1f4ed55017..26d1358092c96fe 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/what_are_browser_developer_tools/index.md @@ -82,7 +82,7 @@ You'll notice a number of clickable tabs at the top of the CSS Viewer: - _Layout_: In Firefox, this area includes two sections: - _Box Model_: represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is. - - _Grid_: If the page you are inspecting uses CSS Grid, this section allows you to view the grid details. + - _Grid_: If the page you are inspecting uses CSS grid, this section allows you to view the grid details. - _Fonts_: In Firefox, the _Fonts_ tab shows the fonts applied to the current element. diff --git a/files/en-us/learn/css/building_blocks/organizing/index.md b/files/en-us/learn/css/building_blocks/organizing/index.md index b0d1212ed3e98e0..c047bd9800201be 100644 --- a/files/en-us/learn/css/building_blocks/organizing/index.md +++ b/files/en-us/learn/css/building_blocks/organizing/index.md @@ -399,6 +399,6 @@ This is the final part of our building blocks module, and as you can see there a To learn more about layout in CSS, see the [CSS Layout](/en-US/docs/Learn/CSS/CSS_layout) module. -You should also now have the skills to explore the rest of the [MDN CSS](/en-US/docs/Web/CSS) material. You can look up properties and values, explore our [CSS Cookbook](/en-US/docs/Web/CSS/Layout_cookbook) for patterns to use, or continue reading in some of the specific guides, such as our [Guide to CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout). +You should also now have the skills to explore the rest of the [MDN CSS](/en-US/docs/Web/CSS) material. You can look up properties and values, explore our [CSS Cookbook](/en-US/docs/Web/CSS/Layout_cookbook) for patterns to use, or continue reading in some of the specific guides, such as our [Guide to CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout). {{PreviousMenuNext("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks/Fundamental_CSS_comprehension", "Learn/CSS/Building_blocks")}} diff --git a/files/en-us/learn/css/css_layout/flexbox/index.md b/files/en-us/learn/css/css_layout/flexbox/index.md index efcad7d8ab4ede0..5c9a111cdbb84a6 100644 --- a/files/en-us/learn/css/css_layout/flexbox/index.md +++ b/files/en-us/learn/css/css_layout/flexbox/index.md @@ -23,13 +23,13 @@ page-type: learn-module-chapter Objective: - To learn how to use the Flexbox layout system to create web layouts. + To learn how to use the flexbox layout system to create web layouts. -## Why Flexbox? +## Why flexbox? CSS flexible box layout enables you to: @@ -43,7 +43,7 @@ Flexbox features may be the perfect solution for your one dimensional layout nee In this article, you'll work through a series of exercises to help you understand how flexbox works. To get started, you should make a local copy of the first starter file — [flexbox0.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/flexbox/flexbox0.html) from our GitHub repo. Load it in a modern browser (like Firefox or Chrome) and have a look at the code in your code editor. You can also [see it live here](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html). -![Image showing the starting point of Flexbox tutorial](bih741v.png) +![Image showing the starting point of flexbox tutorial](bih741v.png) You'll see that we have a {{htmlelement("header")}} element with a top level heading inside it and a {{htmlelement("section")}} element containing three {{htmlelement("article")}}s. We're going to use these to create a fairly standard three column layout. @@ -346,7 +346,7 @@ You've reached the end of this article, but can you remember the most important ## Summary -That concludes our tour of the basics of Flexbox. We hope you had fun and will have a good play around with it as you proceed further with your learning. Next, we'll have a look at another important aspect of CSS layouts: [CSS Grids](/en-US/docs/Learn/CSS/CSS_layout/Grids). +That concludes our tour of the basics of flexbox. We hope you had fun and will have a good play around with it as you proceed further with your learning. Next, we'll have a look at another important aspect of CSS layouts: [CSS grids](/en-US/docs/Learn/CSS/CSS_layout/Grids). ## See also @@ -355,7 +355,7 @@ That concludes our tour of the basics of Flexbox. We hope you had fun and will h - [Ordering flex items](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items) - [Controlling ratios of flex items along the main axis](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis) - [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) module -- [CSS-Tricks Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — an article explaining everything about Flexbox in a visually appealing way -- [Flexbox Froggy](https://flexboxfroggy.com/) — an educational game to learn and better understand the basics of Flexbox +- [CSS-Tricks guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — an article explaining everything about flexbox in a visually appealing way +- [Flexbox Froggy](https://flexboxfroggy.com/) — an educational game to learn and better understand the basics of flexbox {{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}} diff --git a/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md index 0410509475d5ab7..e314fc74b53cec9 100644 --- a/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md +++ b/files/en-us/learn/css/css_layout/fundamental_layout_comprehension/index.md @@ -21,7 +21,7 @@ If you have worked through this module then you will have already covered the ba Objective: - To test comprehension of CSS layout methods using Flexbox, Grid, Floating and Positioning. + To test comprehension of CSS layout methods using flexbox, grid, floating and positioning. diff --git a/files/en-us/learn/css/css_layout/grids/index.md b/files/en-us/learn/css/css_layout/grids/index.md index 8c868b92df57e77..418cac4a789fecf 100644 --- a/files/en-us/learn/css/css_layout/grids/index.md +++ b/files/en-us/learn/css/css_layout/grids/index.md @@ -25,7 +25,7 @@ page-type: learn-module-chapter Objective: To understand the fundamental concepts of grid layout as well as how to - implement it with CSS Grid. + implement it with CSS grid. @@ -41,8 +41,8 @@ A grid will typically have **columns**, **rows**, and then gaps between each row ## Creating your grid in CSS -Having decided on the grid that your design needs, you can use CSS Grid Layout to create it. We'll look at the basic features of Grid Layout first and then explore how to create a simple grid system for your project. -The following video provides a nice visual explanation of using CSS Grid: +Having decided on the grid that your design needs, you can use CSS grid layout to create it. We'll look at the basic features of grid layout first and then explore how to create a simple grid system for your project. +The following video provides a nice visual explanation of using CSS grid: {{EmbedYouTube("KOvGeFUHAC0")}} @@ -58,7 +58,7 @@ Similar to how you define flexbox, you define a grid layout by setting the value } ``` -Unlike Flexbox, the items will not immediately look any different. Declaring `display: grid` gives you a one column grid, so your items will continue to display one below the other as they do in normal flow. +Unlike flexbox, the items will not immediately look any different. Declaring `display: grid` gives you a one column grid, so your items will continue to display one below the other as they do in normal flow. To see something that looks more grid-like, we'll need to add some columns to the grid. Let's add three 200-pixel columns. You can use any length unit or percentage to create these column tracks. @@ -865,9 +865,9 @@ aside { ``` -{{ EmbedLiveSample('Grid frameworks in CSS Grid', '100%', 600) }} +{{ EmbedLiveSample('Grid frameworks in CSS grid', '100%', 600) }} -If you use the [Firefox Grid Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) to overlay the grid lines on your design, you can see how our 12-column grid works. +If you use the [Firefox grid inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html) to overlay the grid lines on your design, you can see how our 12-column grid works. ![A 12 column grid overlaid on our design.](learn-grids-inspector.png) @@ -877,7 +877,7 @@ You've reached the end of this article, but can you remember the most important ## Summary -In this overview, we've toured the main features of CSS Grid Layout. You should be able to start using it in your designs. To dig further into the specification, read our guides on Grid Layout, which can be found below. +In this overview, we've toured the main features of CSS grid layout. You should be able to start using it in your designs. To dig further into the specification, read our guides on grid layout, which can be found below. ## See also diff --git a/files/en-us/learn/css/css_layout/index.md b/files/en-us/learn/css/css_layout/index.md index 10ee6dbbcdbb3a7..93192ea992e8546 100644 --- a/files/en-us/learn/css/css_layout/index.md +++ b/files/en-us/learn/css/css_layout/index.md @@ -29,9 +29,9 @@ These articles will provide instruction on the fundamental layout tools and tech - [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) - : [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox) is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can [test your flexbox skills](/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills) to check your understanding before moving on. - [Grids](/en-US/docs/Learn/CSS/CSS_layout/Grids) - - : CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then [test your grid skills](/en-US/docs/Learn/CSS/CSS_layout/Grid_skills) before moving on. + - : CSS grid layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then [test your grid skills](/en-US/docs/Learn/CSS/CSS_layout/Grid_skills) before moving on. - [Floats](/en-US/docs/Learn/CSS/CSS_layout/Floats) - - : Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains. + - : Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of flexbox and grid it has now returned to its original purpose, as this article explains. - [Positioning](/en-US/docs/Learn/CSS/CSS_layout/Positioning) - : Positioning allows you to take elements out of the normal document layout flow and make them behave differently, for example, by sitting on top of one another, or by always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values and how to use them. - [Multiple-column layout](/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) @@ -41,9 +41,9 @@ These articles will provide instruction on the fundamental layout tools and tech - [Beginner's guide to media queries](/en-US/docs/Learn/CSS/CSS_layout/Media_queries) - : The **CSS Media Query** gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example, "viewport is wider than 480 pixels". Media queries are a key part of responsive web design because they allow you to create different layouts depending on the size of the viewport. They can also be used to detect other features of the environment your site is running on, for example, whether the user is using a touchscreen rather than a mouse. In this lesson, you will first learn about the syntax used in media queries, and then you will use them in an interactive example showing how a simple design might be made responsive. - [Legacy layout methods](/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods) - - : Grid systems are a very common feature used in CSS layouts. Prior to **CSS Grid Layout**, they tended to be implemented using floats or other layout features. You'd first imagine your layout as a set number of columns (e.g., 4, 6, or 12), and then you'd fit your content columns inside these imaginary columns. In this article, we'll explore how these older methods work so that you understand how they were used if you work on an older project. + - : Grid systems are a very common feature used in CSS layouts. Prior to **CSS grid layout**, they tended to be implemented using floats or other layout features. You'd first imagine your layout as a set number of columns (e.g., 4, 6, or 12), and then you'd fit your content columns inside these imaginary columns. In this article, we'll explore how these older methods work so that you understand how they were used if you work on an older project. - [Supporting older browsers](/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers) - - : In this module, we recommend using Flexbox and Grid as the main layout methods for your designs. However, there are bound to be visitors to a site you develop in the future who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritize different features. This article explains how to use modern web techniques without excluding users of older technology. + - : In this module, we recommend using flexbox and grid as the main layout methods for your designs. However, there are bound to be visitors to a site you develop in the future who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritize different features. This article explains how to use modern web techniques without excluding users of older technology. ## Assessments diff --git a/files/en-us/learn/css/css_layout/introduction/index.md b/files/en-us/learn/css/css_layout/introduction/index.md index ed9a1fa5a165817..b9f1fa0efa6749c 100644 --- a/files/en-us/learn/css/css_layout/introduction/index.md +++ b/files/en-us/learn/css/css_layout/introduction/index.md @@ -73,7 +73,7 @@ For many of the elements on your page, the normal flow will create exactly the l The methods that can change how elements are laid out in CSS are: -- **The {{cssxref("display")}} property** — Standard values such as `block`, `inline` or `inline-block` can change how elements behave in normal flow, for example, by making a block-level element behave like an inline-level element (see [Types of CSS boxes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes) for more information). We also have entire layout methods that are enabled via specific `display` values, for example, [CSS Grid](/en-US/docs/Learn/CSS/CSS_layout/Grids) and [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox), which alter how child elements are laid out inside their parents. +- **The {{cssxref("display")}} property** — Standard values such as `block`, `inline` or `inline-block` can change how elements behave in normal flow, for example, by making a block-level element behave like an inline-level element (see [Types of CSS boxes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes) for more information). We also have entire layout methods that are enabled via specific `display` values, for example, [CSS grid](/en-US/docs/Learn/CSS/CSS_layout/Grids) and [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox), which alter how child elements are laid out inside their parents. - **Floats** — Applying a {{cssxref("float")}} value such as `left` can cause block-level elements to wrap along one side of an element, like the way images sometimes have text floating around them in magazine layouts. - **The {{cssxref("position")}} property** — Allows you to precisely control the placement of boxes inside other boxes. `static` positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example, as fixed to the top of the browser viewport. - **Table layout** — Features designed for styling parts of an HTML table can be used on non-table elements using `display: table` and associated properties. @@ -161,7 +161,7 @@ As a simple example, we can add the {{cssxref("flex")}} property to all of our c {{ EmbedLiveSample('Setting_the_flex_property', '300', '200') }} -> **Note:** This has been a very short introduction to what is possible in Flexbox. To find out more, see our [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) article. +> **Note:** This has been a very short introduction to what is possible in flexbox. To find out more, see our [Flexbox](/en-US/docs/Learn/CSS/CSS_layout/Flexbox) article. ## Grid Layout @@ -169,7 +169,7 @@ While flexbox is designed for one-dimensional layout, Grid Layout is designed fo ### Setting display: grid -Similar to flexbox, we enable Grid Layout with its specific display value — `display: grid`. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using `display: grid`, we also define some row and column _tracks_ for the parent using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties respectively. We've defined three columns, each of `1fr`, as well as two rows of `100px`. We don't need to put any rules on the child elements; they're automatically placed into the cells our grid's created. +Similar to flexbox, we enable grid layout with its specific display value — `display: grid`. The below example uses similar markup to the flex example, with a container and some child elements. In addition to using `display: grid`, we also define some row and column _tracks_ for the parent using the {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-columns")}} properties respectively. We've defined three columns, each of `1fr`, as well as two rows of `100px`. We don't need to put any rules on the child elements; they're automatically placed into the cells our grid's created. ```css hidden * { @@ -255,7 +255,7 @@ Once you have a grid, you can explicitly place your items on it, rather than rel {{ EmbedLiveSample('Placing_items_on_the_grid', '300', '330') }} -> **Note:** These two examples reveal just a small sample of the power of Grid layout. To learn more, see our [Grid Layout](/en-US/docs/Learn/CSS/CSS_layout/Grids) article. +> **Note:** These two examples reveal just a small sample of the power of grid layout. To learn more, see our [Grid Layout](/en-US/docs/Learn/CSS/CSS_layout/Grids) article. The rest of this guide covers other layout methods that are less important for the main layout of your page, but still help to achieve specific tasks. By understanding the nature of each layout task you will soon find that when you look at a particular component of your design, the type of layout most suitable for it will often be clear. @@ -321,7 +321,7 @@ p { {{ EmbedLiveSample('Floats', '100%', 600) }} -> **Note:** Floats are fully explained in our lesson on the [float and clear](/en-US/docs/Learn/CSS/CSS_layout/Floats) properties. Prior to techniques such as Flexbox and Grid Layout, floats were used as a method of creating column layouts. You may still come across these methods on the web; we will cover these in the lesson on [legacy layout methods](/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods). +> **Note:** Floats are fully explained in our lesson on the [float and clear](/en-US/docs/Learn/CSS/CSS_layout/Floats) properties. Prior to techniques such as flexbox and grid layout, floats were used as a method of creating column layouts. You may still come across these methods on the web; we will cover these in the lesson on [legacy layout methods](/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods). ## Positioning techniques diff --git a/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md b/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md index 41af17d186dd6b1..09f3b7d0fa8850c 100644 --- a/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md +++ b/files/en-us/learn/css/css_layout/legacy_layout_methods/index.md @@ -8,7 +8,7 @@ page-type: learn-module-chapter {{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} -Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project. +Grid systems are a very common feature used in CSS layouts, and before CSS grid layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project. @@ -27,21 +27,21 @@ Grid systems are a very common feature used in CSS layouts, and before CSS Grid
Objective: To understand the fundamental concepts behind the grid layout systems - used prior to CSS Grid Layout being available in browsers. + used prior to CSS grid layout being available in browsers.
-## Layout and grid systems before CSS Grid Layout +## Layout and grid systems before CSS grid layout It may seem surprising to anyone coming from a design background that CSS didn't have an inbuilt grid system until very recently, and instead we seemed to be using a variety of sub-optimal methods to create grid-like designs. We now refer to these as "legacy" methods. -For new projects, in most cases CSS Grid Layout will be used in combination with one or more other modern layout methods to form the basis for any layout. You will however encounter "grid systems" using these legacy methods from time to time. It is worth understanding how they work, and why they are different to CSS Grid Layout. +For new projects, in most cases CSS grid layout will be used in combination with one or more other modern layout methods to form the basis for any layout. You will however encounter "grid systems" using these legacy methods from time to time. It is worth understanding how they work, and why they are different to CSS grid layout. -This lesson will explain how grid systems and grid frameworks based on floats and flexbox work. Having studied Grid Layout you will probably be surprised how complicated this all seems! This knowledge will be helpful to you if you need to create fallback code for browsers that do not support newer methods, in addition to allowing you to work on existing projects which use these types of systems. +This lesson will explain how grid systems and grid frameworks based on floats and flexbox work. Having studied grid layout you will probably be surprised how complicated this all seems! This knowledge will be helpful to you if you need to create fallback code for browsers that do not support newer methods, in addition to allowing you to work on existing projects which use these types of systems. -It is worth bearing in mind, as we explore these systems, that none of them actually create a grid in the way that CSS Grid Layout creates a grid. They work by giving items a size, and pushing them around to line them up in a way that _looks_ like a grid. +It is worth bearing in mind, as we explore these systems, that none of them actually create a grid in the way that CSS grid layout creates a grid. They work by giving items a size, and pushing them around to line them up in a way that _looks_ like a grid. ## A two column layout @@ -546,7 +546,7 @@ In your project you might still choose to use a flexbox 'grid' due to the additi ## Third party grid systems -Now that we understand the math behind our grid calculations, we are in a good place to look at some of the third party grid systems in common use. If you search for "CSS Grid framework" on the Web, you will find a huge list of options to choose from. Popular frameworks such as [Bootstrap](https://getbootstrap.com/) and [Foundation](https://get.foundation/) include a grid system. There are also standalone grid systems, either developed using CSS or using preprocessors. +Now that we understand the math behind our grid calculations, we are in a good place to look at some of the third party grid systems in common use. If you search for "CSS grid framework" on the Web, you will find a huge list of options to choose from. Popular frameworks such as [Bootstrap](https://getbootstrap.com/) and [Foundation](https://get.foundation/) include a grid system. There are also standalone grid systems, either developed using CSS or using preprocessors. Let's take a look at one of these standalone systems as it demonstrates common techniques for working with a grid framework. The grid we will be using is part of Skeleton, a simple CSS framework. @@ -649,10 +649,10 @@ If you look in the skeleton.css file you can see how this works. For example, Sk All Skeleton (or any other grid framework) is doing is setting up predefined classes that you can use by adding them to your markup. It's exactly the same as if you did the work of calculating these percentages yourself. -As you can see, we need to write very little CSS when using Skeleton. It deals with all of the floating for us when we add classes to our markup. It is this ability to hand responsibility for layout over to something else that made using a framework for a grid system a compelling choice! However these days, with CSS Grid Layout, many developers are moving away from these frameworks to use the inbuilt native grid that CSS provides. +As you can see, we need to write very little CSS when using Skeleton. It deals with all of the floating for us when we add classes to our markup. It is this ability to hand responsibility for layout over to something else that made using a framework for a grid system a compelling choice! However these days, with CSS grid layout, many developers are moving away from these frameworks to use the inbuilt native grid that CSS provides. ## Summary -You now understand how various grid systems are created, which will be useful in working with older sites and in understanding the difference between the native grid of CSS Grid Layout and these older systems. +You now understand how various grid systems are created, which will be useful in working with older sites and in understanding the difference between the native grid of CSS grid layout and these older systems. {{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} diff --git a/files/en-us/learn/css/css_layout/responsive_design/index.md b/files/en-us/learn/css/css_layout/responsive_design/index.md index d2e31d80d6d7550..bf4584155116ed7 100644 --- a/files/en-us/learn/css/css_layout/responsive_design/index.md +++ b/files/en-us/learn/css/css_layout/responsive_design/index.md @@ -121,7 +121,7 @@ You can use the {{cssxref('columns')}} shorthand to provide a maximum number of ### Flexbox -In Flexbox, flex items shrink or grow, distributing space between the items according to the space in their container. By changing the values for `flex-grow` and `flex-shrink` you can indicate how you want the items to behave when they encounter more or less space around them. +In flexbox, flex items shrink or grow, distributing space between the items according to the space in their container. By changing the values for `flex-grow` and `flex-shrink` you can indicate how you want the items to behave when they encounter more or less space around them. In the example below the flex items will each take an equal amount of space in the flex container, using the shorthand of `flex: 1` as described in the layout topic [Flexbox: Flexible sizing of flex items](/en-US/docs/Learn/CSS/CSS_layout/Flexbox#flexible_sizing_of_flex_items). @@ -139,7 +139,7 @@ In the example below the flex items will each take an equal amount of space in t ### CSS grid -In CSS Grid Layout the `fr` unit allows the distribution of available space across grid tracks. The next example creates a grid container with three tracks sized at `1fr`. This will create three column tracks, each taking one part of the available space in the container. You can find out more about this approach to create a grid in the Learn Layout Grids topic, under [Flexible grids with the fr unit](/en-US/docs/Learn/CSS/CSS_layout/Grids#flexible_grids_with_the_fr_unit). +In CSS grid layout the `fr` unit allows the distribution of available space across grid tracks. The next example creates a grid container with three tracks sized at `1fr`. This will create three column tracks, each taking one part of the available space in the container. You can find out more about this approach to create a grid in the Learn Layout grids topic, under [Flexible grids with the fr unit](/en-US/docs/Learn/CSS/CSS_layout/Grids#flexible_grids_with_the_fr_unit). ```css .container { @@ -269,6 +269,6 @@ It has also become much easier to achieve responsive designs with the help of th - Working with touchscreen devices: - [Touch events](/en-US/docs/Web/API/Touch_events) provide the ability to interpret finger (or stylus) activity on touch screens or trackpads, enabling quality support for complex touch-based user interfaces. - Use the [pointer](/en-US/docs/Web/CSS/@media/pointer) or [any-pointer](/en-US/docs/Web/CSS/@media/any-pointer) media queries to load different CSS on touch-enabled devices. -- [CSS-Tricks Guide to Media Queries](https://css-tricks.com/a-complete-guide-to-css-media-queries/) +- [CSS-Tricks guide to media queries](https://css-tricks.com/a-complete-guide-to-css-media-queries/) {{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}} diff --git a/files/en-us/learn/css/howto/center_an_item/index.md b/files/en-us/learn/css/howto/center_an_item/index.md index 2e4fccfc4afb97c..b6fb59b224032fb 100644 --- a/files/en-us/learn/css/howto/center_an_item/index.md +++ b/files/en-us/learn/css/howto/center_an_item/index.md @@ -20,5 +20,5 @@ In the example below we have given the parent container `display: flex`; then se ## See also -- [Box alignment in Flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) -- [Box alignment in Grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout) +- [Box alignment in flexbox](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox) +- [Box alignment in grid layout](/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout) diff --git a/files/en-us/learn/css/howto/index.md b/files/en-us/learn/css/howto/index.md index 9083ed566841ee2..52a6789eb0a293a 100644 --- a/files/en-us/learn/css/howto/index.md +++ b/files/en-us/learn/css/howto/index.md @@ -45,13 +45,13 @@ This page rounds up questions and answers, and other material on the MDN site th ## CSS Layout - [How do I center an item?](/en-US/docs/Learn/CSS/Howto/Center_an_item) - - : Centering an item inside another box horizontally and vertically used to be tricky, however Flexbox now makes it simple. + - : Centering an item inside another box horizontally and vertically used to be tricky, however flexbox now makes it simple. ### Layout guides -- [Using CSS Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) +- [Using CSS flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) - [Using CSS multi-column layouts](/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts) -- [Using CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) +- [Using CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout) - [Using CSS generated content](/en-US/docs/Learn/CSS/Howto/Generated_content) > **Note:** We have a cookbook dedicated to [CSS Layout solutions](/en-US/docs/Web/CSS/Layout_cookbook), with fully working examples and explanations of common layout tasks. Also check out [Practical Positioning Examples](/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples), which shows how you can use positioning to create a tabbed info box, and a sliding hidden panel. diff --git a/files/en-us/learn/forms/styling_web_forms/index.md b/files/en-us/learn/forms/styling_web_forms/index.md index 52835034617ff57..ee2da703b85860c 100644 --- a/files/en-us/learn/forms/styling_web_forms/index.md +++ b/files/en-us/learn/forms/styling_web_forms/index.md @@ -255,7 +255,7 @@ form { } ``` -Notice that we've used some [CSS Grid](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) to lay out the form. Using this we can easily position our elements, including the title and all the form elements: +Notice that we've used some [CSS grid](/en-US/docs/Web/CSS/CSS_grid_layout) and [Flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) to lay out the form. Using this we can easily position our elements, including the title and all the form elements: ```css h1 { diff --git a/files/en-us/learn/html/howto/author_fast-loading_html_pages/index.md b/files/en-us/learn/html/howto/author_fast-loading_html_pages/index.md index 7878bcc88d3ebc9..900350d1cfafae8 100644 --- a/files/en-us/learn/html/howto/author_fast-loading_html_pages/index.md +++ b/files/en-us/learn/html/howto/author_fast-loading_html_pages/index.md @@ -111,7 +111,7 @@ use non-nested tables or divs as in ``` -See also: [CSS Flexible Box Layout](https://www.w3.org/TR/css-flexbox-1/) and [CSS Grid Layout](https://www.w3.org/TR/css-grid-1/) specifications. +See also: [CSS flexible box layout](https://www.w3.org/TR/css-flexbox-1/) and [CSS grid layout](https://www.w3.org/TR/css-grid-1/) specifications. ### Minify and compress SVG assets diff --git a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md index e11799e793bc39d..f8a49572825ccfa 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md @@ -135,7 +135,7 @@ Now open the CSS file and have a look inside. The CSS for the example is not too - We start off with the {{cssxref("visibility")}} of the custom controls set to `hidden`. In our JavaScript later on, we will set the controls to `visible`, and remove the `controls` attribute from the `