Flexbox #32

cmigz · 2017-10-27T13:28:32Z

Hope you like it! Let me know if you notice anything that needs to be fixed =)

Did a brief tutorial on flexbox, want to expand more on it but has the basics for now.

flexbox/flex-basics.md: - Made directory to store files on topic - Wrote basic starter structure for md - Create - Header with topic - Start of table of contents - Introduction with content and quote from MDN

flexbox/flex-basics.md: - Create sections for basics on flex box - Add two new display values with visual examples and css examples

flexbox/flex-basics.md: - Fix grammar on Display: inline-flex section - Create Section Manipulating Contents of Flexbox Container - Fill with ol of methods and sub categories - Fill content of Order & Direction with write ups/examples - Start section on Alignment, got as far as Flex-Start

flexbox/flex-basics.md: - Create sections flex-end, center, space-between, and space-around - Filled each with related snippets and visual examples

flexbox/flex-basics.md: - Playing with new idea to expand on section - Define default value, possible values per attribute, and a brief write up on what the attribute's purpose is.

- Fill remaining content - Create rest of table of content - Create Sources and External Resources - Ran all text through grammarly

laurpaik-zz · 2017-11-03T15:22:16Z

Hey @cmigz ! I want to introduce myself before looking over this, since it's your first time contributing (and since Ben seems to be a bit busy right now)! My name is Lauren, and I was in Boston's WDI-016. Let me know if you have any questions on the feedback when I send it!

cmigz · 2017-11-03T15:27:53Z

Hi @laurpaik! It's nice to speak with you, my name is Christian. Looking forward to your feedback, thanks for looking it over!

laurpaik-zz · 2017-11-03T14:51:25Z

flexbox/flex-basics.md

+    display: inline-flex;
+  }
+  ```
+  ![alt text](https://i.imgur.com/NtlTQyC.png "display: inline-flex;")


This section seems a bit long visually since the images are kind of large. Would it be easier to just put a gif or something?
This is the gif I made testing this out-- Had a hard time figuring out inline-flex, so my inline-flex example isn't very good.

laurpaik-zz · 2017-11-03T14:54:19Z

flexbox/flex-basics.md

+
+Ok! So FlexBox!
+
+Flexbox or "Flexible Box" is a relatively new set of CSS properties we can utilize to distribute space among elements and align content exactly how we want.  It's never been easier to set up grids and organize content, I assure you once you get the swing of Flexbox you will never bother with float or any other grid system again.


This can probably be broken down into two sentences :)

- It's never been easier to set up grids and organize content, I assure you once you get the swing of Flexbox you will never bother with float or any other grid system again. + It's never been easier to set up grids and organize content. I assure you once you get the swing of Flexbox you will never bother with `float` or any other grid system again.

laurpaik-zz · 2017-11-03T14:57:42Z

flexbox/flex-basics.md

+  ```
+  ![alt text](https://i.imgur.com/NtlTQyC.png "display: inline-flex;")
+
+  These display properties create flex containers which make a "flex formatting context" for its content.  Similar to making a block formatting context but the flex layout is the replacement with flexbox's built-in ability to adjust automatically.


I had to read that second sentence a few times. Is there a better way to rephrase it for accessibility's sake?
Suggestion, if my meaning is the same as yours:

-Similar to making a block formatting context but the flex layout is the replacement with flexbox's built-in ability to adjust automatically. + It's similar to making a block formatting context, but here we use flex layout for that built-in ability to adjust automatically.

laurpaik-zz · 2017-11-03T15:01:36Z

flexbox/flex-basics.md

+
+  These display properties create flex containers which make a "flex formatting context" for its content.  Similar to making a block formatting context but the flex layout is the replacement with flexbox's built-in ability to adjust automatically.
+
+## Manipulating Contents of Flexbox Container


Love that you include the default values here! Could you please use tic-marks for all the keywords in the values, defaults, and descriptions?
example:

- * **flex-flow:** row nowrap || column-reverse || column wrap || row-reverse wrap-reverse; + * **flex-flow:** `row nowrap` || `column-reverse` || `column wrap` || `row-reverse wrap-reverse`; - * _Default:_ row nowrap + * _Default:_ `row nowrap` - * Since flex-direction and flex-wrap are often used in tandem we have the flex-flow property to use as a shortcut for setting the two in one property. + * Since `flex-direction` and `flex-wrap` are often used in tandem we have the `flex-flow` property to use as a shortcut for setting the two in one property.

laurpaik-zz · 2017-11-03T15:20:27Z

flexbox/flex-basics.md

+
+### Justify Content
+
+This property allows for the alignment of children along the primary axis of the flex container.  So if we have a parent container with row we will be justifying content along the X-Axis while if it were a column we'd be justifying it along the Y-Axis.


-So if we have a parent container with row we will be justifying content along the X-Axis while if it were a column we'd be justifying it along the Y-Axis. + So if we have a parent container with `flex-direction: row` we will be justifying content along the X-Axis while with `flex-direction: column` we'd be justifying it along the Y-Axis.

laurpaik-zz · 2017-11-03T15:22:40Z

flexbox/flex-basics.md

+
+A lot of this walkthrough has come from three sources I used to pick up and practice the basics of flex-box.  You will find much more in-depth information from these links and the chance to practice and play with all the different properties.  Please get in touch if you find any additional resources you think would make a good addition to this repository!
+
+- [CodeSchool: "Craking the Case with Flexbox"](https://www.codeschool.com/courses/cracking-the-case-with-flexbox)


- "Craking the Case with Flexbox" + "Cracking the Case with Flexbox"

laurpaik-zz · 2017-11-03T15:25:30Z

flexbox/flex-basics.md

+A lot of this walkthrough has come from three sources I used to pick up and practice the basics of flex-box.  You will find much more in-depth information from these links and the chance to practice and play with all the different properties.  Please get in touch if you find any additional resources you think would make a good addition to this repository!
+
+- [CodeSchool: "Craking the Case with Flexbox"](https://www.codeschool.com/courses/cracking-the-case-with-flexbox)
+  - Comes with the silly songs that go along with all of code school's content.  All joking aside this is the most in-depth and best source I found for really getting into the details with flexbox but more importantly the chance to practice use the properties and see them in real time.


- all of code school's content. + all of CodeSchool's content.

Last sentence is crazy long! Lol, suggestion:

- All joking aside this is the most in-depth and best source I found for really getting into the details with flexbox but more importantly the chance to practice use the properties and see them in real time. + All jokes aside, this is the most in-depth source I found for getting into the details of Flexbox. It gives you a chance to practice using the properties and see the changes in real time.

laurpaik-zz · 2017-11-03T15:28:01Z

flexbox/flex-basics.md

+- [Flexbox Froggy](http://flexboxfroggy.com/)
+  - A great little game/practice site.  It has 24 levels that teach/test use of each of flexbox's properties.  Really good for solidifying what you've learned.
+- [Flexbox Cheat Sheet](https://yoksel.github.io/flex-cheatsheet/)
+  - My go-to source when I forget what it is specifically I'm trying to accomplish.  It's really useful in that it has a section for each property and interactive example where you can select a property value and see how it affects the container and it's children.


Also really long sentence!
Suggestion:

- It's really useful in that it has a section for each property and interactive example where you can select a property value and see how it affects the container and it's children. + It has a section for each property with interactive examples.

laurpaik-zz · 2017-11-03T15:32:24Z

flexbox/flex-basics.md

+```
+![alt text](https://i.imgur.com/Gzc2uEn.png "justify-content: space-around;")
+
+## Sources and External Resources


Another great resource, if you want to add it: WesBos has a free, 20-minute tutorial called What The Flexbox?!. His courses are kind of code-along style, with example files you can fork and clone on GitHub.
This is another great resource too :)

cmigz · 2017-11-04T12:45:46Z

Haha @laurpaik I'm so glad to have had another set of eyes go over this, I never realize in the moment how much I tend to write run-on verbose sentences lol. Also love the suggestions for the tic marks for the property values and such, great idea. Soon as I get the chance I'll make all the suggested changes/additions and submit a new PR. I appreciate the fine-tooth combing, love this kind of collaboration =)

laurpaik-zz · 2017-11-06T13:18:18Z

@cmigz you actually won't need to submit a new PR if you push changes to the same branch. The new commits will simply be added to this PR, which'll be nice because I can see my suggestions before your changes too and we'll both get a sort of history log 😄 If you want an example, you can check out some of the closed pull requests that have a bunch of comments on them, like this.

flex-basics.md => - Splits run on in intro paragraph into two sentences - Replaces display: flex, and display:inline-flex w/ gif examples

flex-basics.md => - Surrounds all keyword values in tic marks - Fixes run on sentence in display inline-flex paragraph

flex-basics.md => - Updates all example images with smaller examples and gifs where useful

flex-basics.md => - Fixes a few more run on sentences - Adds thanks to Lauren for her suggestions - Adds suggested resource from Lauren's noes - Adds tics where they were missed

cmigz · 2018-01-05T16:04:36Z

Hey @laurpaik!

Sorry I didn't do your fixes sooner! Hope you had a great holiday and new year!

Hope I hit all your suggestions, feel free to let me know anything I missed or any new edits when you get a chance.

cmigz added 6 commits October 26, 2017 07:20

Create Directory / File

51f017c

flexbox/flex-basics.md: - Made directory to store files on topic - Wrote basic starter structure for md - Create - Header with topic - Start of table of contents - Introduction with content and quote from MDN

Create Section: The Basics

59840b1

flexbox/flex-basics.md: - Create sections for basics on flex box - Add two new display values with visual examples and css examples

Finish remaining content for Alignment

10df8df

flexbox/flex-basics.md: - Create sections flex-end, center, space-between, and space-around - Filled each with related snippets and visual examples

Start expansion on manipulation sec points

02dfaed

flexbox/flex-basics.md: - Playing with new idea to expand on section - Define default value, possible values per attribute, and a brief write up on what the attribute's purpose is.

Finish Content

fff755a

- Fill remaining content - Create rest of table of content - Create Sources and External Resources - Ran all text through grammarly

laurpaik-zz self-assigned this Nov 3, 2017

laurpaik-zz self-requested a review November 3, 2017 13:50

laurpaik-zz reviewed Nov 3, 2017

View reviewed changes

laurpaik-zz added the Status: Revision Needed label Nov 6, 2017

cmigz added 4 commits January 5, 2018 09:57

Fixes Run On Sentence, Replaces Static Ex w/ Gif

adb9181

flex-basics.md => - Splits run on in intro paragraph into two sentences - Replaces display: flex, and display:inline-flex w/ gif examples

Adds tics to keywords for values, defaults, descr

62ea1d1

flex-basics.md => - Surrounds all keyword values in tic marks - Fixes run on sentence in display inline-flex paragraph

Updates Example Images

bfc0fe5

flex-basics.md => - Updates all example images with smaller examples and gifs where useful

Adds More Tics, Updates Title, Adds Resource

2e8fdf3

flex-basics.md => - Fixes a few more run on sentences - Adds thanks to Lauren for her suggestions - Adds suggested resource from Lauren's noes - Adds tics where they were missed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Flexbox #32

Flexbox #32

cmigz commented Oct 27, 2017 •

edited

Loading

laurpaik-zz commented Nov 3, 2017

cmigz commented Nov 3, 2017

laurpaik-zz Nov 3, 2017 •

edited

Loading

laurpaik-zz Nov 3, 2017

laurpaik-zz Nov 3, 2017

laurpaik-zz Nov 3, 2017

laurpaik-zz Nov 3, 2017

laurpaik-zz Nov 3, 2017

laurpaik-zz Nov 3, 2017 •

edited

Loading

laurpaik-zz Nov 3, 2017

laurpaik-zz Nov 3, 2017

cmigz commented Nov 4, 2017

laurpaik-zz commented Nov 6, 2017

cmigz commented Jan 5, 2018


		Ok! So FlexBox!

		Flexbox or "Flexible Box" is a relatively new set of CSS properties we can utilize to distribute space among elements and align content exactly how we want. It's never been easier to set up grids and organize content, I assure you once you get the swing of Flexbox you will never bother with float or any other grid system again.


		These display properties create flex containers which make a "flex formatting context" for its content. Similar to making a block formatting context but the flex layout is the replacement with flexbox's built-in ability to adjust automatically.

		## Manipulating Contents of Flexbox Container


		### Justify Content

		This property allows for the alignment of children along the primary axis of the flex container. So if we have a parent container with row we will be justifying content along the X-Axis while if it were a column we'd be justifying it along the Y-Axis.


		A lot of this walkthrough has come from three sources I used to pick up and practice the basics of flex-box. You will find much more in-depth information from these links and the chance to practice and play with all the different properties. Please get in touch if you find any additional resources you think would make a good addition to this repository!

		- [CodeSchool: "Craking the Case with Flexbox"](https://www.codeschool.com/courses/cracking-the-case-with-flexbox)

Flexbox #32

Are you sure you want to change the base?

Flexbox #32

Conversation

cmigz commented Oct 27, 2017 • edited Loading

laurpaik-zz commented Nov 3, 2017

cmigz commented Nov 3, 2017

laurpaik-zz Nov 3, 2017 • edited Loading

Choose a reason for hiding this comment

laurpaik-zz Nov 3, 2017

Choose a reason for hiding this comment

laurpaik-zz Nov 3, 2017

Choose a reason for hiding this comment

laurpaik-zz Nov 3, 2017

Choose a reason for hiding this comment

laurpaik-zz Nov 3, 2017

Choose a reason for hiding this comment

laurpaik-zz Nov 3, 2017

Choose a reason for hiding this comment

laurpaik-zz Nov 3, 2017 • edited Loading

Choose a reason for hiding this comment

laurpaik-zz Nov 3, 2017

Choose a reason for hiding this comment

laurpaik-zz Nov 3, 2017

Choose a reason for hiding this comment

cmigz commented Nov 4, 2017

laurpaik-zz commented Nov 6, 2017

cmigz commented Jan 5, 2018

cmigz commented Oct 27, 2017 •

edited

Loading

laurpaik-zz Nov 3, 2017 •

edited

Loading

laurpaik-zz Nov 3, 2017 •

edited

Loading