Learn Flexbox, Jekyll and Tachyons

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better.

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Create a Landing Page with CSS Grid and Flexbox

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container.  It can also control how the elements are positioned within a flexed container.  

Once you start thinking in `rows` and `columns`, you can control almost any flexed layout with just a few simple flexbox layout primitives.

Get Started with Flexbox CSS Layouts

This playlist covers various aspects of CSS including different rules, selectors, and patterns

CSS Tips and Tricks

Jekyll is a blog-aware static site generator. You can write text in markdown or HTML and Jekyll uses layouts to create a static website. You can tweak how you want the site URLs to look, what data gets displayed on the site, and more.

After watching the collection you'll be able to:

* Install Jeykll and run it locally
* Create a new blog post
* Install plugins to add new features to your blog

Jekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator".

jekyll

Create A Blog With Jekyll

Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!

Flexbox Fundamentals

After setting `display: flex` on a parent element, you can use `flex-direction` to switch the container to be either a `row` or a `column`.

We also switch the body between `row` and `column`.

Flex into a Row or a Column with flex-direction

We can space items inside of a flexed component in the "on-axis" direction, with `justify-content`.

Justify content can take the following values: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, or `space-evenly`

Change the Spacing of Flexed Components with justify-content

We changed the axis layout with 'justify-content', and the "off axis" layout is controlled by 'align-items'.  The most common values are `flex-start`, `flex-end`, or `center`.

Change the off-axis Alignment of a Flexed Container with `align-items`

To set the wrap settings of elements inside of a container, we can set the `flex-wrap` css attribute.  The most common values are: `nowrap`, `wrap`, or `wrap-reverse`

Wrap Elements Inside of a Flexed Container with `flex-wrap`

To stretch individual elements to fit the given space, we can set the `flex-grow` or `flex` attributes to any integer.  Other surrounding elements will grow proportionally to their `flex-grow` or `flex` attributes.

Proportionally Grow a Flexed Element by Setting `flex-grow` or `flex` Styles

We have a parent HTML element that takes up the height and width of the page. We will make that parent element into a flex container, and then vertically center its child element using `align-items: center;`. Finally, we'll use `justify-content: center;` to horizontally center the element.

Center an Element Horizontally and Vertically using Flexbox

Learn the fundamental difference between CSS grid and flexbox layout, and create utility classes for each `display` value. Then begin to apply and expand these concepts to style the landing page navigation.

Choose Between Grid or Flexbox for CSS Layout

See how to use flexbox to layout variable-width content in columns, and take advantage of `justify-content` to keep flex children center-aligned on smaller viewports. We'll also learn how `margin` can be applied to resolve for lack of a well-supported `gap` property in flexbox. At the end of the lesson, we'll have styled both the "Subscribe" section and the site footer.

Use Flexbox to Responsively Layout Variable-Width Content

Jekyll is a blog-aware, static site generator written in Ruby. 

Requirements:
* Ruby version 2.5.0 or above
* RubyGems

Install the Jekyll Ruby gem on macOS quickly with just a few terminal commands and have a blog-aware site running locally.

Install Jekyll and Create a New Project

Blogging is built into Jekyll. You write blog posts as markdown or HTML files and Jekyll turns them blog posts. They follow a specific naming convention to be picked up and used by Jekyll

All blog post files require front matter. Front matter is a snippet of YAML at the top of a file. Front matter is used to set your layouts and meta data.

Create New Blog Post with Jekyll

Jekyll has a plugin system that allows you to add custom features to your site. There are many plugins available or you can even write your own. You can view a list of plugins at [Planet Jekyll](https://github.com/planetjekyll/awesome-jekyll-plugins)

Liquid is a templating language written in Ruby to output to the browser 

[Liquid Documentation](https://shopify.github.io/liquid/)

Install a Jekyll Plugin

CSS Grid and Flexbox are very useful tools for providing the overall layout of a page.  I take a specific design and create the high level layout using css grid and then arrange an individual section using flex box.

Layout a webpage using css grid and flexbox

With just a handful of CSS properties, we can create an intrinsically responsive photo gallery using flexbox. This is accomplished by setting our preferred width as the `flex-basis` value and allowing items to both shrink and grow. The use of `object-fit: cover` on images allows them to fully fill up the list item without distortion or overflow. We finish the gallery with a small animated effect that alters `opacity`.

Create an Automatically Responsive Flexbox Gallery

Demystifying alignment in flexbox children

Flexbox makes it easier to create layouts that can adjust depending on the content that is added and the space available. In this lesson we look at a couple real-world applications of Flexbox in an application and website.

Using Flexbox in Websites and Applications

The flex-basis property allows us to define the dimension (along the flex-direction axis) that a flexbox child should ideally have.

Topics

Instructors

Content Type