framework

Bootstrap 4 Alpha 6 Major Components in Flexbox

Posted on by Mario

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.

Introducing Micro-Interactions, A Secret to Great Design

Posted on by Mario

introducing-micro-interactions-a-secret-to-great-design

 

 

 

 

 

With the advancement of technology, you will notice how people create small things to achieve bigger things. And love it or hate it, we have to experience this kind of activity every day. In fact, micro-interaction may happen right when we wake up, for example, turning off the alarm on your mobile phone. So, have you got a good understanding of Micro-Interaction anyway? Below is deep explanation about Micro-Interaction. If you are web designers, this info may come in handy for you.

What is a Micro-Interaction?

As it is stated above, we experience micro-interaction every time we interact to our gadget. It can be from the toggle of an on-off switch to skipping from one song to the next on a music player. It also can be from liking a social media post to replying to a text message.

But most of all, Micro-interactions tend to do, or help you do, several different things:

  • Communicate a status or bit of feedback
  • See the result of an action
  • Help the user manipulate something

So in practice, micro-interactions include moments or actions for elements. Stop and think about all the times you come in contact with a micro-interaction every day.

Microinteractions impact things like:

  • Accomplishing any single task
  • Commenting in any digital medium
  • Changing a setting or process
  • Viewing a notification or message
  • Connecting devices, such as those for multi-player games, or printing from your laptop
  • Sharing or liking a photo or video on a website
  • Sliding down the “screen” on a mobile device to refresh content

To create micro-interactions, one should focus on a four-part structure. It contains, trigger, rules, feedback, and loops and modes.

  • Trigger: Initiated an action
  • Rules: what happens in the interaction
  • Feedback: How you know what’s happening
  • Loops and Modes: what happens next

Details with a Purpose

As in micro-interactions design, the design elements are so small and can happen so quickly that designers often forget about the details. To avoid this, you better keep a few things in mind:

  • Micro-interaction must live on through repeated use.
  • Give each micro-interaction a human voice.
  • Don’t overthink it
  • Simplicity rules
  • Create a visual harmony with other elements
  • Consider each detail with care
  • Think about further adaptations or how subsequent micro-interactions will work.
  • Add a fun divot with animation, but don’t go too much.

As a conclusion, in the future, you may see many designers use micro-interactions in almost every digital design project. So, the key is to make these moments become completely functional and in the details.