A Complete Guide to Flexbox | CSS-Tricks

After reading several articles and tutorials, I finally started to understand CSS flexbox as explained in this awesome CSS Tricks article

 

From the article:

The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommendation) 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 (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

Read the full article at CSS-Tricks

Polyfills as a service

Use the latest JavaScript features without worrying about polyfills: include this script tag to automatically polyfill based on browser user agent

 

Essentially, what you want from a polyfill delivery system is a way of sending one single copy of each of the best polyfills, in the right order (respecting dependencies), to just the browsers that lack a native implementation. The polyfill service does this by reading the User-Agent HTTP header and then using it to find the list of polyfills that are suitable for that browser and its specific version. Typically once a browser version is released, its feature set does not change until its next release.

Get started today with this one line:

Read the full article at ft.com

CSS Variables Land in Firefox 31

An uncertain future: Firefox implements CSS variables even though other browser vendors have not committed either way.

 

Craig takes a look at native CSS variables, which can now be used in Firefox 31. Has the technology become redundant before we can use it?

Preprocessors such as Sass, Less, and Stylus provide variable functionality with many other benefits.

Read more from the source: SitePoint

CSS Shapes Editor is now on the Chrome App Store

You know how magazine layouts often wrap text around non-square pictures? It is now possible in CSS3 and Chrome has a plugin that will create the CSS code for you.

 

Interactive editor for CSS Shapes.

Create and adjust CSS Shapes values with an interactive editor overlapping the selected element.

Requires Chrome 37+

Shapes sidebar:

The extension adds a new sidebar to the DevTools Elements panel called “Shapes”. It offers controls to create and edit CSS Shapes values like polygon(), circle() and ellipse() on the selected element.

Polygons:

Click the edges of the shape to add new points. Drag points to change the shape. Double-click an existing point to remove it. Select the transform tool to move, scale and rotate the polygon shape.

Circles & ellipses:

Drag the shape to move it around. Pull on the edges and corners to scale and resize.

Read more from the source: google.com

WordPress 4.0 “Benny”

No breaking changes but lots of UI and UX improvements for editors

 

Version 4.0 of WordPress, named “Benny” in honor of jazz clarinetist and bandleader Benny Goodman, is available for download or update in your WordPress dashboard.

Don’t be afraid of breaking changes. It seems this 4.0 release should really be a 3.10 release because there are no breaking changes. See http://semver.org/ for proper semantic versioning.

Improvements cover three main areas:

1. Better editing experience including a fixed right bar, auto embedding of videos and tweets, and more intuitive editor.

2. An improved plugin browser that will speed up the process of finding good plugins.

3. A better experience for uploading, editing, and viewing media library assets.

Read more from the source: WordPress News