Month: October 2014

Front-end Web Development Tools, Resources

ducks

As website development advances with new best practice techniques, the need for helpful tools and resources to assist with your production cycle has arisen.

These resources not only help you build better and more compatible websites, but also save you time with testing and troubleshooting.

Here’s a list of my go-to tools and resources, in no particular order.

Tools

Modernizr

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.


Normalize

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.


BrowserStack

Instant access to all desktop and mobile browsers. Say goodbye to your setup of virtual machines and devices.


Sass: Syntactically Awesome Style Sheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.


Sublime Text

Sublime Text is a sophisticated text editor for code, markup and prose. You’ll love the slick user interface, extraordinary features and amazing performance.


Bitbucket

Host, manage, and share Git and Mercurial repositories in the cloud. Free, unlimited private repositories for up to 5 developers give teams the flexibility to grow and code without restrictions.

Resources

HTML5 Boilerplate

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.


Google Fonts

Google Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers.


Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.


365psd

download a free psd every day


CodePen

CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing.


960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.


Foundation

The most advanced responsive front-end framework in the world.

Filed under: General Musing

Getting Started with Flexbox

Flexbox is looking to be the likely successor to CSS floating containers. It has powerful, intuitive features and finally being adopted by every major browser.

Example of Flexbox in Action

See the Pen Fun with Flexbox by Richard (@barkins) on CodePen.


Here’s a quick three step guide to getting started with Flexbox.

Step 1

Starting with the parent container, include the following styles.

.container {
  background:lightBlue;
  max-width:960px;
}

Then drop in some child elements into the container and include a height.

.content {
  height:50px;
  background:blue;
  margin:25px;
  color:#FFF;
  padding:15px;
}

Here’s what we have so far, without Flexbox styling yet.

noflexbox

Step 2

Now, just add display: flex; inside the container styling and watch happens automatically.

.container {
  background:lightBlue;
  max-width:960px;

  /*FLEXBOX*/
  display:flex;
}

withflexbox

Step 3

Changing the Order

The first cool thing we can do with Flexbox is change the order of the child containers. Just add the following property to the parent container.

/* ORDER */
flex-direction:row-reverse;

flexboxorder

What if we want to specifically target one child container and change its order? It’s as easy targeting and including the following CSS property. This way you can have complete control in which order the child containers appear in.

.content:nth-child(1) {
  order:4;
}

.content:nth-child(4) {
  order:2;
}

.content:nth-child(3) {
  order:3;
}

.content:nth-child(2) {
  order:1;
}

flexboxoneitemorder

Flex Grow

As cool as the boxes look all shifted to the right, lets evenly distribute them across the row. As you resize the container, the boxes will responsively resize.

Include the following CSS property in the child container class.

flex-grow:1

flexboxgrow

Flex Wrap

You might be asking yourself, what happens in a responsive situation? By default, the child containers will automatically resizes themselves on the same row getting very narrow instead of dropping down to the next row. Here’s how we change that.

Add the following CSS property to the parent container in order for the child containers to drop down automatically to the next row as parent container gets smaller.

flex-wrap: wrap;

flexboxwrap

To get an even deeper look into how Flexbox works, check out this complete guide on CSS-Tricks.

Filed under: CSS3, HTML5