andresgalante

On-boarding new users is like parenting

This is my son, his name is Leon and he is an artist.

He is two years old, which means that I haven't been sleeping well (or at all) for the last two years. He is the most time consuming, attention sponge, energetic creature I have ever met. Don't get me wrong, I love him more than anything and he is the joy of my life. Love comes built in babies, it's the way mother nature found to make us survive childhood.

UX Designers [1] are much like parents. We are always thinking about our users. We observe them and try to get into their minds to help them achieve their goals.

andresgalante

Patternfly: Set up instructions

PatternFly is an open interface project that promotes design commonality and improved user experience across enterprise IT products and applications.

A successful set up of the framework will help maintain, organise and help you grow a project.

HEADS UP: This document will use the command line. If you feel uncomfortable with it you can install CodeKit. It does Bower, live reload and less compilation without having to type any command.

Create a project

andresgalante

Gulp guide for designers

Gulp is a Task / Build runner. It's easy to use, has a simple api, and is efficient. Gulp.js makes use of pipes for streaming data that needs to be processed.

But as designer you don't actually need to know any of that. What you do need to know is that Gulp will make your life much easier.

This tutorial will setup Gulp to do 3 things:

• Compress js
• Compile less

andresgalante

<section data-background-transition='zoom' data-transition='concave' data-background='http://ryanjarvinen.com/presentations/shared/img/broadcast_reveal_dark.png' data-state='blackout'>
  <h2>Gist-Powered Andres</h2>
  <h1>Reveal.js</h1>
  <h2>Slideshow Presentations</h2>
  <p class='fragment'><small><a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a>
  <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>registry.hub.docker.com/u/ryanj/gist-reveal.it</a></small></p>
</section>
<section data-background-transition='zoom' data-transition='linear'>
  <h2>Try it out!</h2>
  <p>Create your own deck by forking a copy of <a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>this github gist</a>: <br /><a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>https://gist.github.com/ryanj/af84d40e58c5c2a908dd</a></p>

andresgalante

#Migrating PatternFly from 1.x to 2.0

This week we've release PatternFly 2.0. This guide will go step by step on how to upgrade from PatternFly 1.x to our latest version.

PatternFly 2 is (almost) backwards compatible with v1.x

There are three major changes that you should know about:

• We don't support Internet Explorer 8 anymore.
• We've split the CSS into two files (patternfly.*css and patternfly-additions.*css) to avoid a limitation of Internet Explorer 9 where only 4095 selectors are recognized in a single stylesheet.

andresgalante

    <nav class="navbar navbar-default navbar-pf" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">
          <img src="bower_components/patternfly/dist/img/brand.svg" alt="PatternFly Enterprise Application">

andresgalante

        <div class="col-xs-6 col-sm-4 col-md-2">
          <div class="card-pf card-pf-accented card-pf-aggregate-status">
            <h2 class="card-pf-title">
              <span class="fa fa-shield"></span><span class="card-pf-aggregate-status-count">0</span> Ipsum
            </h2>
            <div class="card-pf-body">
              <p class="card-pf-aggregate-status-notifications">
                <span class="card-pf-aggregate-status-notification"><a href="#" class="add" data-toggle="tooltip" data-placement="top" title="" data-original-title="Add Ipsum"><span class="pficon pficon-add-circle-o"></span></a></span>
              </p>
            </div>

andresgalante

    <div class="container-fluid container-cards-pf">
      <div class="row row-cards-pf">


      </div><!-- /row -->
    </div><!-- /container -->

andresgalante

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>PatternFly Template</title>
    <!-- PatternFly CSS -->
    <link rel="stylesheet" href="bower_components/patternfly/dist/css/patternfly.min.css">
    <link rel="stylesheet" href="bower_components/patternfly/dist/css/patternfly-additions.min.css">
  </head>
  <body><!-- class="cards-pf" -->

andresgalante

.simulate-xs [class^=".col-md-"]{ width:100% }