Essential Extensions for Brackets

Brackets has an extensive array of extensions for enhancing your front-end development workflow.

  • Emmet – The Emmet extension for Brackets, if you take the time to learn it, provides wonderful shorthand snippets for quickly coding in HTML and CSS.
    1. Emmet Plugin
    2. Emmet — the essential toolkit for web-developers
  • Indent Guides – The Indent Guides extension for Brackets adds helpful guides to your code, making it easier to see where one section ends and another begins.
    1. A Brackets extension to show indent guides in the code editor
  • Beautify – The Beautify extension for Brackets does exactly what its name implies. It takes sloppy, unformatted markup and makes it look beautiful by adding spacing and indents that to make it easier to read.
    1. Brackets Beautify 2.x
  • Autoprefixer – The Autoprefixer extension for Brackets parses through your CSS code and adds vendor prefixes to your styles to make it as browser-friendly as possible.
    1. Brackets Autoprefixer
  • Lorem Pixel
    1. Brackets Lorem Pixel
  • CDN Suggestions – Using a Content Delivery Network is a great way to link to commonly used libraries like jQuery and Bootstrap. CDN Suggestions is a plugin that will give you quick access to all of the most popular CDN links available.
    1. CDN Suggestions
  • HTML Wrapper – The HTML Wrapper extension for Brackets provides a great shortcut for surrounding plain text with list item tags, anchor tags, and more.
    1. HTML Wrapper Extension
  • CanIUse – The CanIUse plugin provides a quick-access panel in Brackets where you can search for information about browser compatibility on the CanIUse website.
    1. CanIUse Extension

A First Look at CSS Grid

What is the CSS Grid Layout Module?

According to the W3C Working Draft, The CSS Grid Layout module “defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout module, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.”

In Plain English, CSS Grid lets us draw a grid inside any container and place content wherever you want within that grid, independent of the current semantic structure. In short, CSS Grid gives us the power of classic print-based grid layout systems with the flexibility of responsive web design.

When can we start using CSS Grid?

The short answer is, “Not yet but soon”. Checkout Can I use CSS Grid?

  • Originally proposed by Microsoft in April 2011 and has been available in Internet Explorer 10/11 and Edge 12/13/14 (old spec)
  • Chrome (with experimental feature enabled)
  • Firefox (with experimental feature enabled)

CSS Grid: The Basics

CSS Grid Terminology

Grid

  • Any element with its display property set to grid
  • Grids have rows and columns

Grid Line

  • A Grid Line is the line that makes up the grid.  They can be horizontal or vertical or can be referred to by number or name.
  • The column lines are counted based on the direction of the defined language. So if a page is set to left to right language, the count is left to right for column lines. If the language is right to left the count is from right to left as well.

Grid Track

  • A Grid Track is the space between two grid lines. The grid tracks can be either horizontal or vertical representing rows or columns.

Grid Cell

  • A Grid Cell is the space between four grid lines top, right, bottom and left.

Grid Area

  • A Grid Area is any area within the grid defined by its four outermost grid lines. A grid area may cover multiple lines and contain multiple cells.

Grid Gutters

  • Grid Gutters are the defined space between rows and columns.
  • Upcoming feature not currently supported in browsers.

How to use the experimental CSS Grid features in Chrome

Because the CSS Grid layout module is an experimental module still in working draft, there is no support for this feature in normal browsers. Support for CSS Grid can be enabled in Chrome and Firefox from the backend. To turn CSS Grid support on in Chrome, first open the browser and then, visit the following URL, chrome://flags. Search for web platform and you will find Enable Experimental Web Platform Features, which include CSS Grid.

PostCSS – First Look

Introduction

PostCSS is an engine/tool for processing/transforming CSS with JavaScript. It help’s us writing CSS faster and more efficiently. There are different plugins that we can use with PostCSS. Some of them include cssnano which helps in compressing the CSS files, Autoprefixer which programmatically adds prefixes to the CSS files, making things like Flexbox easier to code for modern browsers, adding future CSS syntax/features that can work with older browsers using cssnext & finally PreCSS pack, which lets us use a Sass-like syntax for working with our projects.

What is PostCSS?

  • PostCSS at its core is an engine for transforming CSS with JavaScript.
  • Uses NodeJS and installs through NPM which allows it to take care of different transformations.
  • It can also work with different build tools like GulpJS, GruntJS, Broccoli, and others to handle the transformation process.
  • It is 3 – 30 times faster than other tools since it uses NodeJS and has a modular architecture which makes it a lot more efficient. Sass in contrast, needs Ruby installed and when you add some extensions they get added as gems which makes the applications run a little bit slower.
  • The first difference that you will notice between PostCSS and Sass or LESS is the super small size of the core engine which makes it more efficient.
  • Another big difference between PostCSS and other tools is that its not just limited to pre-processing. PostCSS can also work as post-processor which means it can convert future CSS syntax to CSS, but also do tasks like adding prefixes to a finished stylesheet.
  • Although PostCSS is new it has a large plugin base.
  • Can handle an amazing number of tasks including support for future CSS features in older browsers like variables or mixins. It can work like Sass providing features like nesting and variables.
  • Because of PostCSS’s modular architecture we can use it with our exisiting tools.
  • Because PostCSS is modular, fast and flexible it’s quickly becoming a serious contender to take care of common tasks.

What you need to work with PostCSS?

  1. NodeJS
  2. In order for PostCSS to work, it needs to be integrated into your workflow through a build tool. We can use many different tools, including Gulp, Grunt, Webpack or Node.js itself.

Resources

  1. PostCSS on GitHub.
  2. Gulp PostCSS Plugin on GitHub.
  3. cssnano and cssnano on GitHub.
  4. Autoprefixer PostCSS Plugin on GitHub.
  5. cssnext PostCSS Plugin.
  6. PreCSS on GitHub.

CSS Frameworks

What is a CSS Framework?

A CSS framework is a collection of CSS files that contain a set of simple CSS-styles such as basic typographic rules, grid-based/general layouts, basic form styling and resets.

Advantages of CSS Frameworks

  • CSS Framework enables developers to rapidly prototype designs
  • Standardizes the organizational structure of your website
  • Web Developers don’t have to worry about browser-compatibility issues

Disadvantages of CSS Frameworks

  • Web Developers need to understand the architecture of the CSS Framework
  • CSS and XHTML go hand in hand, they need to be designed and constructed together. Using a CSS Framework passively removes a great majority of semantic value from the markup of a document.
  • A CSS Framework might be too much for your website that you are designing which results in bloated source code. A large percentage of that code that will never be executed.

Modern CSS Frameworks

  1. Bootstrap
  2. Foundation
  3. 960 Grid System
  4. Blueprint
  5. YUI
  6. jQuery UI
  7. Fluid 960 Grid System
  8. Gridless
  9. Formee
  10. Yet Another Multicolumn Layout (YAML)
  11. 52framework

Flexbox

Flexbox is a set of CSS properties that gives us a flexible way to lay out content. It is one of the advanced methods for laying out webpages. With flexbox we can change the direction, alignment, size and order of elements, regardless of their original size and order in the HTML. We can even stretch and shrink elements and distribute space, all with just a few lines of CSS!

Flexbox Basics and Terminology

  • The two most important elements in flexbox layout are flex containers and flex items.
  • The flex container sets the context for flexbox layout; it contains flex items, the actual elements you layout using flexbox. The flex container can be any block-level or inline element.
  • Every direct child of a flex container is called a flex item; there can be any number of flex items inside a flex container.
  • Once the children are flex items, one can take advantage of flexbox’s powerful alignment properties.
  • Flexbox follows two axes that determine the layout direction of flex items: main axis and cross axis.
  • The main axis is the primary axis along which flex items are laid out; it defines the direction of flex items in the flex container.
  • The cross axis runs perpendicular to the main axis.
  • Each axis has a start side and an end side.
  • The default main-start and main-end direction of the main axis is left-to-right.
  • The default direction of the cross axis is top-to-bottom.

Creating a Flex Container

  • Before you can use any flexbox property, you need to define a flex container in your layout.
  • You create a flex container by setting the display property of an element to one of the flexbox layout values: flex or inline-flex.
  • By default, flex items are laid out horizontally on the main axis from left to right.
  • By default, flex items stretch to fill the flex container’s height.
  • display: flex; creates a block-level flex container.
  • display:inline-flex; creates an inline flex container.
  • Any element outside a flex container is not affected by the flexbox layout.
  • Only children of a flex container automatically become flex items.

Controlling the Direction of Flex Items

  • Some flexbox properties apply to the flex container only, while some apply only to the flex items.
  • The flex-direction property applies to the flex container only.
  • The default value for flex-direction is row.
  • To reverse the direction of flex items in a row, use the value row-reverse.
  • The value column rotates the main axis so that flex items are laid out vertically.
  • Like the row-reverse property, you can swap the top-to-bottom direction of a column with the value column-reverse.

Wrapping Flex Items

  • The flex container lays out flex items on a single line called a flex line.
  • The flex-wrap property is for flex containers only.
  • The flex container tries to fit all items on one flex line, even if it causes its content to overflow.
  • The flex container can break flex items into multiple flex lines and allow them to wrap as needed.
  • With the flex-wrap property, you can control whether the flex container is a single-line or multi-line layout.
  • The value wrap breaks the flex items into multiple lines.

Distributing Space Inside a Flex Container

  • You apply the justify-content property to flex containers only.
  • The justify-content property lets you control the position and alignment of flex items on the main axis and how space should be distributed in a flex container.
  • The default value for justify-content is flex-start, which places items towards the start of each flex line.
  • To place items at the end of the flex line, set justify-content to flex-end.
  • The value center places flex items in the center of the line, with equal amounts of empty space between the line’s start edge and the first item.
  • The value space-between displays equal spacing between flex items.
  • For equal spacing around every flex item, use the value space-around.
  • A margin set to auto will absorb any extra space around a flex item and push other flex items into different positions.

Changing the Order of Flex Items

  • The order property applies to flex items only.
  • We can use the order property to change the order of any flex item.
  • You can structure an HTML document for SEO or accessibility first, then rearrange the content without ever editing the HTML.
  • The default order of all flex items is 0.
  • order places flex items relative to the other items’ order values.
  • To place a flex item before another item, it needs to have a lower order value than the item.
  • To place a flex item after another item, it needs to have a higher order value than the item.

Growing Flex Items

  • The flex-grow property applies to flex items only.
  • flex-grow determines how much of the available space inside the flex container an item should take up; it assigns more or less space to flex items.
  • A flex-grow value of 1 expands flex items to take up the full space of a line.
  • The higher the flex-grow value, the more an item grows relative to the other items.

Smarter Layouts with flex-basis and flex

  • flex and flex-basis apply to flex items only.
  • flex-basis specifies the initial main size of a flex item.
  • You set the initial size you want the flex items to be, then flexbox evenly distributes the free space according to that size.
  • When setting the flex-grow and flex-basis value of a flex item, it’s recommended that you use the flex shorthand property.
  • flex is the shorthand for flex-grow, flex-basis and a less commonly used flex-shrink property.
  • Using only one number value for flex sets the flex-grow value of an item.
  • The second and third values are optional in the flex shorthand.
  • Setting only one number value for flex automatically sets the flex-basis value to 0.

Aligning Flex Items on the Cross Axis

  • The align-items property applies to flex containers only.
  • The align-self property applies to flex items only.
  • align-items aligns flex items vertically in the flex container.
  • To align all flex items to the start of the cross axis, use the align-items: flex-start;
  • align-items: flex-end; packs the items toward the end of the cross axis
  • align-items: center; perfectly centers the items along the cross axis
  • align-self: flex-start; aligns a flex item to the start of the cross axis
  • align-self: flex-end; aligns a flex item to the end of the cross axis
  • align-self: center; aligns a flex item to the center of the cross axis

Vertical and Horizontal Centering

Centering content is one of the trickiest and most difficult things to do in CSS layout. Even vertical centering and centering elements perfectly inside fluid containers is tricky/difficult when using layout properties like float, display, or position. Flexbox is the smartest solution when it comes to centering content.

Three ways to center-align elements using flexbox

  1. Set the flex container’s justify-content and align-items values to center:


    .container{
    justify-content: center;
    align-items: center;
    }

  2. Set the flex container’s justify-content value to center, while setting the flex item’s align-self value to center:


    .container{
    justify-content: center;
    }
    .item{
    align-self: center;
    }

  3. Set the flex item’s margin value to auto:


    .item{
    margin:auto;
    }

Resources

•    A Complete Guide to Flexbox – https://css-tricks.com/snippets/css/a-guide-to-flexbox/
•    A Visual Guide to CSS3 Flexbox Properties – https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
•    Flexbox Playground – https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground
•    Flexbox – latest browser support – http://caniuse.com/#search=flexbox