gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
guide/english/css/layout/display-property/index.md Normal file
View File

@@ -0,0 +1,44 @@
---
title: Display Property
---
## Display Property
The `display` property specifies the type of box used for an HTML element. There are 20 total keyword values, although only 10 are used commonly. The commonly used ones are:
```css
.none {display: none}
.block {display: block}
.inline-block {display: inline-block}
.inline {display: inline}
.flex {display: flex}
.inline-flex {display: inline-flex}
.inline-table {display: inline-table}
.table {display: table}
.inherit {display: inherit}
.initial {display: initial}
```
**Common Examples:**
```css
.myBox {
display: block;
}
.myContainer {
display: flex;
}
.inlineList ul > li {
display: inline;
}
```
#### More Information:
* Documentation and full list of keyword values: [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/display)
* The W3Schools CSS reference on the display property is available: [W3Schools](https://www.w3schools.com/cssref/pr_class_display.asp)
* CSS-TRICKS has a great reference on the display property: [CSS-Tricks](https://css-tricks.com/almanac/properties/d/display/)
* Browser Support: [caniuse](http://caniuse.com/#search=display)
* A Complete Guide to Flexbox: [CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

43
guide/english/css/layout/flexbox/flex-basis-property/index.md Normal file
View File

@@ -0,0 +1,43 @@
---
title: Flex Basis Property
---
# Flex Basis
`flex-basis` property defines the size of the `flex-item` along the main axis of the flex container. The main axis is horizontal if `flex-direction` is set to `row` and it'll be vertical if the `flex-direction` property is set to `column`.
## Syntax
```css
flex-basis: auto | content | <width> | <height>;
```
## flex-basis: auto
`flex-basis: auto` looks up the main size of the element and defines the size. For example, on a horizontal flex container, `auto` will look for `width` and `height` if the container axis is vertical.
If no size is specified, `auto` will fall back to `content`.
## flex-basis: content
`flex-basis: content` resolves the size based on the element's content, unless `width` or `height` is set through normal `box-sizing`.
In both the cases where `flex-basis` is either `auto` or `content`, if main size is specified, that size will take priority.
## flex-basis: <size>
This is just as specifying `width` or `height`, but only more flexible. `flex-basis: 20em;` will set the initial size of the element to `20em`. Its final size will be based on available space, `flex-grow` multiple and `flex-shrink` multiple.
The specification suggests use of `flex` shorthand property. This helps write `flex-basis` along with `flex-grow` and `flex-shrink` properties.
## Examples
Here is rows of individual flex containers and individual flex elements showing how `flex-basis` affects the `box-sizing`.
![effect of flex-basis on horizontal axis](https://vijayabharathib.github.io/fcc_guide_images/css/properties/flex-basis-horizontal.png)
When the `flex-direction` is `column`, the same `flex-basis` will control the `height` property. An example below,
![example of flex-basis controlling height in a vertical container](https://vijayabharathib.github.io/fcc_guide_images/css/properties/flex-basis-vertical.png)
#### More Information:
Additional references on following pages:
* CSS specification [level 1](https://drafts.csswg.org/css-flexbox-1/)
* Mozilla Developer Network page on [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#content)

74
guide/english/css/layout/flexbox/flex-grow/index.md Normal file
View File

@@ -0,0 +1,74 @@
---
title: Flex-grow
---
# Flex-Grow
The flex-grow property is a flexbox property that allows you to specify the allocation of free space to containers within a flex-container. It provides a solution to all that unwanted space!
It'll turn your container from this
<img src = "https://i.imgur.com/lFJaBUfh.png">
<b><h1>to this</h1></b>
<img src = "https://i.imgur.com/4X8ITZih.png">
What just happened?
Well, we added two things to the css syntax.
HTML
```html
<p class = "ten">1</p>
<p class = "twenty">2</p>
```
CSS
```css
body {
display:flex;
}
p {
flex-grow: 1;
}
```
Two things happened
1. The parent container was converted into a flex-display by `display:flex`
2. The remaining "free space" was then allocated among the remaining p containers in an equal ration since each has a flex-grow property of 1.
What happens if we have p containers with different flex-grow properties?
Let's see an example.
First let's create two paragraphs and enable display: flex;
<img src = "https://i.imgur.com/wPqUgsih.png">
Notice a few things
- The colour scheme is nice
- There's some empty space to the right of the two boxes.
That empty space is the "free space" that will be allocated to each of the different paragraphs later depending on their flex-grow properties.
To see this in action, let's give the first one a class of "ten" and a flex-grow property of 1. Let's also give the second one a class of "twenty" and a flex-grow property of 2.
<img src = "https://i.imgur.com/7n0V1G4h.png">
Notice a few things
1. The second one's size is not double that of the first one despite having a flex-grow property that is double that of the first.
2. The entire space is filled. ( Some margins were added to the side to enable it to be seen more clearly. )
As we resize the screen, we also find that the first one shrinks at twice the speed of the second one.
<img src = "https://i.imgur.com/pa4grM8h.png">
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

36
guide/english/css/layout/flexbox/flexbox-direction/index.md Normal file
View File

@@ -0,0 +1,36 @@
---
title: Flexbox Direction
---
## Flexbox Direction
Now that you know what flexbox is, it's time to move on to how you can arrange content within a flex container. You can set this via <i>flex-direction</i>
There are 4 ways to set the flex direction
1. Row
<img src = "https://css-tricks.com/wp-content/uploads/2013/04/flex-direction2.svg">
The flex direction is set to row by default. This arranges all your content in a single row <b>without margins<b>.
2. Row-reverse
<img src = "https://i-msdn.sec.s-msft.com/dynimg/IC681588.png">
This reverses your content in the opposite direction. Originally it was going from left to right, now it's going right to left.
3. column
<img src = "https://i-msdn.sec.s-msft.com/dynimg/IC681589.png">
This arranges your content in a single column from top to bottom.
4. column-reverse
This arranges your content in a single column from bottom to top.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

27
guide/english/css/layout/flexbox/index.md Normal file
View File

@@ -0,0 +1,27 @@
---
title: Flexbox
---
## Flexbox
Flexbox is a new way to structure content in CSS3. It provides a wonderful way to create responsive websites that work well across different screen sizes and order content.
There are 3 simple steps to use flexbox.
1. Convert parent container to a flex container by using <i>display:flex;</i> in the css section
2. Adjust arrangement of different containers using <i>flex-direction</i>
3. Adjust individual items by using properties like justify-content, align-items etc.
The Flexbox Layout aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.<br><br>
<img src="https://cdn.css-tricks.com/wp-content/uploads/2011/08/flexbox.png" width="80%" height="auto" alt="flexUsage"><br><br>
<ul>
<li><b>main-axis</b>: The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).</li>
<li><b>main-start | main-end</b>The flex items are placed within the container starting from main-start and going to main-end.</li>:
<li><b>main size</b>: A flex item's width or height, whichever is in the main dimension, is the item's main size. The flex item's main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.</li>
<li><b>cross axis</b>: The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.</li>
<li><b>cross-start | cross-end</b>: Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.</li>
<li><b>cross size</b>: The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.</li>
</ul>
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href='https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35' target='_blank' rel='nofollow'>This is a great article</a> to read up to understand more about flexbox
This is a highly recommended practical guide that illustrate the different flex properties applied to the flex container and th flex items: <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>

76
guide/english/css/layout/float-and-clear/index.md Normal file
View File

@@ -0,0 +1,76 @@
---
title: Float and Clear
---
## Float and Clear
The CSS `float` property specifies how an element should float.
The CSS `clear` property specifies what elements can float beside the cleared element and on which side.
### The `float` Property
The `float` property is used for positioning and layout on web pages.
The `float` property can have one of the following values:
`left` - The element floats to the left of its container
`right`- The element floats to the right of its container
`none` - The element does not float (will be displayed just where it occurs in the text). This is default
`inherit` - The element inherits the float value of its parent
In its simplest use, the `float` property can be used to wrap text around images.
#### Float in Picture:
![float image for print layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-print-layout.png "css-tricks-float-img")
```
img {
float: right;
}
```
This example specifies that an image should float to the right in a page:
![Float image for web layout](https://github.com/jamal-pb95/guides/blob/master/assets/css3-float-web-text-wrap.png "float img web")
```
img {
float: left;
}
```
This example specifies that an image should float to the left in a page:
```
img {
float: none;
}
```
In the following example the image will be displayed just where it occurs in the text (`float: none;`):
### The `clear` Property
The `clear` property specifies what elements can float beside the cleared element and on which side.
The `clear` property can have one of the following values:
`none` - Allows floating elements on both sides. This is default
`left` - No floating elements allowed on the left side
`right`- No floating elements allowed on the right side
`both` - No floating elements allowed on either the left or the right side
`inherit` - The element inherits the clear value of its parent
The most common way to use the `clear` property is after you have used a `float` property on an element.
When clearing floats, you should match the `clear` to the `float`. If an element is floated to the `left`, then you should `clear` to the `left`. Your floated element will continue to `float`, but the cleared element will appear below it on the web page.
#### Example:
![unclear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/unclearedfooter.png "unclear footer image")
Source: CSS-TRICS
```
div {
clear: left;
}
```
![clear footer image](https://github.com/jamal-pb95/guides/blob/master/assets/clearedfooter.png "clear footer image")
Source: CSS-TRICS
### Additional Resources:
- MDN CSS: [Float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) & [Clear](https://developer.mozilla.org/en-US/docs/Web/CSS/clear)
- [W3Schools tutorials](https://www.w3schools.com/css/css_float.asp)
- CSS-Tricks: [float](https://css-tricks.com/all-about-floats/) & [clear](https://css-tricks.com/almanac/properties/c/clear/)

146
guide/english/css/layout/grid-layout/index.md Normal file
View File

@@ -0,0 +1,146 @@
---
title: Grid Layout
---
## Grid Layout
CSS Grid Layout, simply known as Grid, is a layout scheme that is the newest and the most powerful in CSS. It is [supported by all major browsers](https://caniuse.com/#feat=css-grid) and provides a way to position items on the page and move them around.
It can automatically assign items to _areas_, size and resize them, take care of creating columns and rows based on a pattern you define, and doing all the calculations using the newly introduced `fr` unit.
### Why Grid?
- You can easily have a 12-column grid with one line of CSS. `grid-template-columns: repeat(12, 1fr)`
- Grid lets you move things in any direction. Unlike Flex, where you can move items either horizontally (`flex-direction: row`) or vertically (`flex-direction: column`) - not both at the same time, Grid lets you move any _grid item_ to any predefined _grid area_ on the page. The items you move do not have to be adjacent.
- With CSS Grid, you can **change the order of HTML elements using only CSS**. Move something from top to the right, move elements that were in footer to the sidebar etc. Instead of moving the `<div>` from `<footer>` to `<aside>` in the HTML, you can just change it's placement with `grid-area` in the CSS stylesheet.
### Grid vs. Flex
- Flex is one-dimensional - either horizontal or vertical, while Grid is two-dimensional, meaning you can move elements in both horizontal and vertical planes
- In Grid, we apply layout styles to the parent container and not the items. Flex on the other hand targets the flex item to set properties like `flex-basis`, `flex-grow`, and `flex-shrink`
- Grid and Flex are not mutually exclusive. You can use both on the same project.
### Checking browser compatability with `@supports`
Ideally, when you build a site, you'd design it with Grid and use Flex as a fallback. You can find out if your browser supports grid with the `@support` CSS rule (aka feature query). Here's an example:
```css
.container {
display: grid; /* display grid by default */
}
@supports not (display: grid) { /* if grid is not supported by the browser */
.container {
display: flex; /* display flex instead of grid */
}
}
```
### Getting Started
To make any element a grid, you need to assign its `display` property to `grid`, like so:
```css
.conatiner {
display: grid;
}
```
And that's it. You just made your `.container` a grid. Every element inside the `.container` automatically becomes a grid item.
### Defining templates
Rows and columns
```css
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto 300px;
```
Areas
```css
grid-template-areas:
"a a a a"
"b c d e"
"b c d e"
"f f f f";
```
or
```css
grid-template-areas:
"header header header header"
"nav main main sidebar";
```
### Grid Areas
Here's some sample code on how to define and assign grid areas
```css
.site {
display: grid;
grid-template-areas: /* applied to grid container */
"head head" /* you're assigning cells to areas by giving the cells an area name */
"nav main" /* how many values kind of depends on how many cells you have in the grid */
"nav foot";
}
.site > header {
grid-area: head;
}
.site > nav {
grid-area: nav;
}
.site > main {
grid-area: main;
}
.site > footer {
grid-area: foot;
}
```
### The `fr` unit
Grid introduces a new `fr` unit, which stands for _fraction_. The good thing about using the `fr` unit is that it takes care of calculations for you. Using `fr` avoids margin and padding issues. With `%` and `em` etc. it becomes a math equation when calculating `grid-gap`. If you used `fr` unit, it’ll automatically calculate both column and gutter sizes and adjust the size of the columns accordingly, plus there will be no bleeding gaps at the end either.
### Examples
#### Changing the order of elements based on screen size
Let's say you want to move the footer to the bottom on small screens and to the right on bigger screens, and there's a bunch of other HTML elements in between the two.
The simple solution is to change the `grid-template-areas` based on the screen size. You can also **change the number of columns and rows based on the screen size**, too. This is a much cleaner and simpler alternative to Bootstrap's Grid system (`col-xs-8 col-sm-6 col-md-4 col-lg-3`).
```css
.site {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title title"
"main header"
"main sidebar"
}
@media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */
.site {
grid-template-columns: 2fr 1fr 1fr;
grid-template-areas:
"title title title"
"main header header"
"main sidebar footer"
}
}
```
See the Pen [CSS Grid by example - 2 (grid areas + grid gap)](https://codepen.io/aamnah/pen/RLVVoE/) by Aamnah Akram ([@aamnah](https://codepen.io/aamnah)) on [CodePen](https://codepen.io).
#### More Information:
- [CSS Grid Palyground by Mozilla](https://mozilladevelopers.github.io/playground/) Great starting point if you're new to CSS Grids. It has visuals to help you understand the terminology easily
- [YouTube: Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts)](https://www.youtube.com/watch?v=txZq7Laz7_4) This presentation will convice you in less than an hour why CSS Grids are cool and why/how you should use them
- [Videos: Learn Grid Layout Video Series by Rachel Andrew](https://gridbyexample.com/video/) Rachel Andrew is considered an expert on the subject. The video titles may look alien and overwhelming, but the content is short and to the point
- [Book: Get Ready for CSS Grid Layout by Rachel Andrew](https://abookapart.com/products/get-ready-for-css-grid-layout)

15
guide/english/css/layout/index.md Normal file
View File

@@ -0,0 +1,15 @@
---
title: Layout
---
## Layout
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/css/layout/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->

14
guide/english/css/layout/inline-block/index.md Normal file
View File

@@ -0,0 +1,14 @@
---
title: Inline Block
---
## Inline Block
Inline-block is a possible value of the display property.
Elements marked as _inline-block_ behave like inline elements (_spans_, for example), but can have width and height.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href="https://css-tricks.com/almanac/properties/d/display/#inline-block" target="_blank">This is a great article</a> to read up to understand more about creating layouts with inline-block elements.

24
guide/english/css/layout/the-position-property/index.md Normal file
View File

@@ -0,0 +1,24 @@
---
title: The Position Property
---
## The Position Property
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
The position property specifies the type of positioning method used for an element.
The position proprty isn't generally used to create layouts, but instead it is used to position elements that somehow stand out from the page flow.
There are five different position values:
* static
* relative
* fixed
* absolute
* sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
<a href="https://www.w3schools.com/css/css_positioning.asp" target="_blank">The is a good article</a> to read up to understand more about the position property.