Front-end meetup - September 2012

Events happening in the community are now at Drupal community events on www.drupal.org.
mindewen's picture
Posted by mindewen on September 20, 2012 at 5:01am
Start: 
2012-09-20 18:00 - 19:30 America/Los_Angeles
Organizers: 
mindewen
penguininja
abelb
Event type: 
User group meeting

This month we're switching things up a bit and doing a hands-on meetup! Bring your laptop and build some HTML/CSS style tiles with us! We'll incorporate a lot of what we've covered in the last few months, including responsive designing, CSS preprocessors, and--of course--style tiles.

Meeting location:
Funny Monkey
2410 E Burnside St.
Portland, OR 97232

Parking is on the street and the #20 bus has a stop right in front of the door / across the street. Please signup if you're interested since the space is a bit limited. We look forward to seeing you there!

Comments

Is it okay to attend if I

Posted by laughnan on September 20, 2012 at 5:20am
laughnan's picture

Is it okay to attend if I haven't been able to before?

Yes!

Posted by mindewen on September 20, 2012 at 6:04pm
mindewen's picture

Please do attend! I just added a comment with some links that might be helpful to browse ahead of time. People with a wide variety of skill levels and sets attend these meetups; nobody know everything and everybody has something to give, so don't worry about not knowing all that we've talked about. I'm sure you can walk away having learned something new. And, who knows, maybe you can share some of your own knowledge with us. :)

Links + rough outline

Posted by mindewen on September 21, 2012 at 12:36am
mindewen's picture

What are style tiles and why?

  • Style Tiles - "Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web."
  • Style Tiles and How They Work - "Style tiles act as paint chips and color swatches for the interface that we can execute on any device or at any dimension. It’s a truly responsive solution to visual design."
  • Style Tiles: An Alternative to Full Design Comps - "Where an interior designer may present their client with a mood board comprising paint chips, fabrics and magazine clippings, the progressive web designer can present their stakeholders with a set of Style Tiles."
  • Style Tiles as a Web Design Process Tool - "In the end the style tile has a very practical purpose: it helps the designer to establish an important psychological connection with the client that they are contributing to the process."
  • Style Tiles: The Flip Side of Wireframes - "Style Tiles allow you to nail down the look of your elements without worrying about specific device dimensions or breakpoints."

HTML/CSS frameworks we can use

These are two we talked about last meetup, but I'm very happy to add to this list! Please bring suggestions!

We can also use Andrea's adaptation of Foundation as a starting point for our style tiles.

Download: https://github.com/abelb/styletiles
Preview: http://abelb.github.com/styletiles/

The instructions on getting it running are in the README.md You will also need to set up a local domain to point to that directory.

CSS preprocessors

Additional tasty links

Video tutorials:

General outline / process of what we're doing

Posted by mindewen on September 21, 2012 at 12:48am
mindewen's picture
  1. Overview the goal and options
    • What is a style tile and how can it be useful? Knowing your overall goal is important.
  2. Everyone decides what they want to do and how, so they can know what they need
    Questions to ask yourself:
    • Do you want to use a pre-setup framework, start with a bare framework, or build your own structure?
    • Do you want to use a CSS preprocessor? If so, which one?
    • Do you want to use Git (or another VCS)?
    • What elements do you want to include in your style tile?
    • Do you want your style tile to be responsive or adaptive?
    • Do you know what your design "requirements" are, such as colors, typography?
    • What elements do you want to include in your style tile?
  3. Start gathering materials based on the answers to the above questions. For example, if you decide to use Andrea's Foundation style tile as a starting point, you need to download it and put it in the right spot on your computer.
  4. Set up the tools
  5. Start building the HTML structure / get it into place
    • For the elements, you can either build them yourself, use something prebuilt (like Andrea's Foundation style tile), or grab markup from what Drupal spits out. Or a combination.
  6. Incorporate CSS/styling. This is where it gets fun.

I really dig the

Posted by mpgeek on September 21, 2012 at 3:18am
mpgeek's picture

I really dig the workshop-style meetup from this evening. I wonder if it would be interesting to look at going from a styletile to a base theme, i.e. taking bootstrap/foundation/whatever and turning it into a base.

Would LOVE if we could do

Posted by laughnan on September 21, 2012 at 4:09am
laughnan's picture

Would LOVE if we could do that!

Looks like

Posted by mpgeek on September 21, 2012 at 3:49pm
mpgeek's picture

Looks like someone has already taken a whack at a Foundation-based subtheme: http://drupal.org/sandbox/ishmaelsanchez/1332338. Might be worth a look.

There's also this theme,

Posted by jhedstrom on September 24, 2012 at 3:29pm
jhedstrom's picture

There's also this theme, linked from the Foundation README:

https://github.com/drewkennelly/foundation7

I haven't tried it out.

Nice catch

Posted by mpgeek on September 24, 2012 at 5:33pm
mpgeek's picture

Ahhhh, thats much closer to what I was looking for. Fork it i must. Gracias.

Portland (Oregon)

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds: