Tag Archives: flexbox

Bootstrap 4 Alpha 6 Major Components in Flexbox

Bootstrap-4-Alpha-6

Alpha 6 has just launched and it becomes the biggest ships to date.  Hence, in this article we will describe its grid system and major components in flexbox. If you are web developers who are currently working on WordPress, this article is for you. Discover what’s new with Bootstrap 4 Alpha 6, here!

Embracing Flexbox
As bootstrap is now flexbox by default, you can control your grid system and core components and provide unparalleled flexibility. However, it may be dropping IE9 support yet brings significant improvements to component layout, alignment, and sizing.

If you have no idea about Flexbox, here are some benefits that you can have when applying Bootstrap 4:

  • No more HTML white space or broken table-style rendering
  • Auto margins for easy spacing
  • Automatic equal-width grid columns (e.g., two columns are automatically 50% wide)
  • Equal height and equal; width cards
  • Utility classes for easily changing display, direction, alignment, and more.
  • Justified navigation and button groups
  • Vertical and horizontal centering without hardcoding values with translate or margin

In fact, almost every component now takes advantage of flexbox. This is because less reliance on clearfix, more control over Dom, and visual order, and fewer bugs. Even, Carousels, a more complex component has used Flexbox in some areas.

Responsive Utilities and the Great Infix
Among so many advantages that Alpha 6 offered, they also made two important changes to their naming scheme.

  • First, we’ve dropped the –xs infix from our lowest (extra small) breakpoint. However, xs isn’t a responsive breakpoint just like sm, md, lg, and xl. This is because it doesn’t start applying styles at a min-width and up. It can be applied to everything as there’s no bounding @media query.
  • Second, to better articulate their property value pairings, we’ve renamed several classes. Instead of pull, we use float. You can start with the property name, instead of creating new names for the various flexbox properties.

Combine them together and you’ll get updated class, such as .col-6, .d-none, .float-right, .d-md-flex, .justify-content-end, and .text-lg-left. With these classes, you can have immense power and customization to folks building with Boothstrap.

More Grid Improvements
You will also have more grid improvements. By adding responsive auto sizing columns, more container padding options, and add any number of .col-* classes, the result will automatically be equal in width.

To remove gutters from grid rows and their columns, you can use the .no-gutters modifier.

Updated Navbar
If you find that the Alpha 5 navbar still needs more improvement, you’ll see that the Alpha 6 is done perfectly. The navbar has been rewritten and it provides better built-in responsive behaviors and improved layout customization.

Here are some of the lists of the updates:

  • The responsive navbar toggle, .navbar-toggler, has also been updated. The icon is once again a child element, .navbar-toggler-icon, for improved customization. It also includes easy modifiers for absolutely aligning it to the top right or top left.
  • Navbar navs no longer require the .nav base class. While it provided a starting point, these shared styles often got in the way of navbar behaviors. Now it’s just .navbar-nav and utilities for alignment.
  • Navbars are built with flexbox! Instead of floats, you’ll need flexbox and margin utilities.
  • The .navbar-toggleable classes are now applied to the .navbar instead of the .collapse within. This allows us to provide better responsive behavior with just one class change.

Create the Perfect Website Layout System

create-the-perfect-website-layout-system

If you are web developers or web designers who are looking for ways that can create sites that work on any device, this article is for you. In this opportunity, we are going to discuss about how to create the perfect website layout system. Take a look!

Multi-Column

You may not see multi-column as the most-used CSS columns in many websites. This is quite surprising, since it’s one of the most highly flexible techniques. In fact, this would be terribly suitable to be used by those who want perfection for lists of links, like navigations, footers, search results or photo blog.

However, multi-column may not be beautiful to be used for long passage article. This is because CSS columns will require people to scroll down and up again while reading.  The only wat to present your article nicely in CSS columns is by convincing your users to scroll horizontally.

To create a simple horizontally scrolling multi-column layout by setting the height of the article to a maximum of 100 percent of the viewport, and by telling it to use columns of no less than 20em. These few line is what it takes to create good multi-column:

article {
columns: 20em; /* never be smaller than 20em */
height: 100vh; /* be as high as the viewport */
width: 75vw; /* be 75% of the width of the viewport */
}

Flexbox and the Viewport

It may seem a bit like float, but much more powerful. With Flexbox, you can tell items what to do with any leftover white space. You can leave it at one of the ends, you can distribute it evenly between (or around) them, or you can choose to stretch the items – which basically gets rid of the white space. You can use this code to simply fit as many items on each row as possible.

ul {
display: flex;
flex-wrap: wrap;
font-size: 2.5em;
}

Viewport-relative units

You can use the vw unit, instead of using em and media queries to make sure our layout works in different viewports. However, in terms of text, viewport has a serious usability problem with using the viewport width as a unit for text though. At one point it can become too small to read on very small screens. The problem gets bigger when the user can’t increase the font size.

To avoid the font size becomes too small, you can use a calc function: font-size: calc(1em +1vw).

Viewport Calculations

To fit any text into any viewport with CSS, there’s a brilliant CodePen, such as explained in this line below:

font-size: calc(4vw + 4vh + 2vmin);

With this specific calculation, this one sentence, set in a certain font, will always fit in any viewport.

Quantity Selectors

By applying this technique, you can order the browser to behave in a certain manner. Instead of designing every possible layout for every possible screen size, you let the browser and the content figure it out together.

Container Queries

We can’t use element queries, but we might be able to use container queries. However, you cannot style the element itself; you could only style its children which cause something like this:

article:media( min-width: 30em ) screen {

}

Quantity Selectors

Quantity selectors are quite handy for search results, where you don’t know if there will be one single result or hundreds of them. Moreover, you can also change the way they look through the number of results. The selectors that make this possible look quite complex at first. At first, I didn’t understand how they worked at all. You can apply a fantastic job in explaining quantity selectors in this article:

article {
flex-basis: 100vmax;
}
article:nth-last-of-type(n + 2),
article:nth-last-of-type(n + 2) ~ article {
flex-basis: 50vmax;
}
article:nth-last-of-type(n + 6),
article:nth-last-of-type(n + 6) ~ article {
flex-basis: 33.33vmax;
}

The Magnificent Flexbox

FLEXBOX

Today, there are many design layout method that can help you do many things, but among those methods there is a method that is worth it to try for, named Flexbox, or the Flexible Box Layout. It is a powerful CSS layout module that gives web designers and developers an efficient and simple way to place, align and distribute elements in a container.

Flexbox Basics

Basically, Flexbox is formed by two elements, a flex container (flex parent) and flex items (flex children). A flex container is a containing element (like a div) given the display property flex. Flex items are child elements of a flex container, which can be manipulated through various display properties.

Flex containers and flex items each have their own range of properties that can be combined in different ways to create a range of complex layouts. Items inside a flex container can be laid out horizontally or vertically, aligned and distributed in various ways, and stretched or shrunk to fit the available space. All these options let you easily create responsive layouts.

How to use Flexbox

In order to start using flexbox, you need to first create your flex container (the parent element that will contain your flex items), for example a div block. Let’s add three more div blocks inside our flex container to act as the flex items before we style the element. The items will be stacked at this point.

We can set the parent container’s display property to flex with our child divs in place.

{
display: flex;
}

Layout Directions

The direction your elements will distribute themselves is known as the layout direction. Row acts as the default direction of a flex container, which will display the child elements horizontally. You can switch the layout to vertical by setting the direction to column.

Flex Container {
display: flex;
flex-direction: row;
}

Flex Container {
display: flex;
flex-direction: column;
}

The ‘main’ direction you set on your flex container is referred to whichever direction, while the ‘cross’ direction refers to other direction you didn’t choose. Due to this, the main direction will be horizontal and the cross direction will be vertical.

Flexbox also lets you reverse the layout; Children of a flex container will be laid out right-to-left (if direction is row) or bottom-to-top (if direction is column).

Flex Container {
display: flex;
flex-direction: row-reverse;
}

Flex Container {
display: flex;
flex-direction: column-reverse;
}
This can come in handy, especially if you wish to reserve the layout on smaller screens. For instance, you want to show text on the left side of the screen and an image on the right on desktop screens. This will move the image below the text on mobile. But, you can ensure that the image appears above the text by reversing the direction.

Flex Sizing

Flex users can modify their width or height (depending on the container’s layout direction) to fill available space.

Three options are given by Webflow for flex sizing: shrink if needed, fill empty space, and don’t shrink. Note that each child element can have its own settings, which allows for a plethora of design options.

Flex Item {
flex-shrink: <number>;
flex-grow: <number>;
flex-basis: <length> | auto;
}

Let’s take a look at what each of these options does:

  • Shrink if needed: sizes the item based on its width/height or its content since the item won’t grow larger than it needs to but may shrink to its minimum size to prevent overflow.
  • Fill empty space: ensure the item to fill all available space inside its parent. But, if you set this on all items in a flex container, they’ll expand to take up equal amounts of empty space.
  • Don’t shrink: sizes the item based on its width/height or its content, but doesn’t allow it to shrink, even if that will cause overflow.

Flex items can also have their own alignment settings, which override the default alignment set by their parent flex container. These alignments behave as explained previously.

Flex Item {
display: flex;
flex-direction: row;
align-items: flex-start | flex-end | center | baseline | stretch;

}

Flex items display in the same order as they appear in the source code by default. You can ignore this behavior to ensure elements display with flexbox, in the same order as you want.

There are four main options that you can use:

  • Auto: The default value, which order items as they are in the source
  • First: Item appears first in its flex container
  • Last: item appears last in its flex container
  • Custom: you can customize the order your item will be displayed in

Custom order can be defined as a number. This number will define the order in which the flex item appears inside a flex container.

Flex Item {
order: <integer>;
}