Be Friends With

Your Designers And

Style Guides

Hans Christian Reinl

Front-End Developer, Freiburg/Germany

drublic.de • info@drublic.de • @drublic

Projects

and others: github.com/drublic

Slides

drublic.github.io/fec-styleguides/

Be Friends With

Your Designers And

Style Guides

Friendship.

History of Style Guides.

What are Style Guides and how can we use them?

Friendship

© ~

Friendship builds great teams

© ~

© ~

© ~

Friendships are hard

Are you even listening?

You never admit you’re wrong!

Use helpers

Style Guides

© ~

History

Corporate Identiy

Christianity

Judaism

© ~

© ~

© ~

© ~

Publishers

© ~

Lufthansa

© ~

Online Styleguide

© ~

Why do we need them?

Keep the friendship.

Work faster.

A styleguide

~

Code Conventions

Why?

Maintenance.

Improve readbility and understanding.

How?

Best practices.

Use resources.

GitHub Styleguide

Components

Module, Widget, …

Component-based software engineering is a branch of software engineering that emphasizes the separation of concerns in respect of the wide-ranging functionality available throughout a given software system.

It is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems.

~ Components in Software Engineering

Advantages

Separation of concerns

Sharing & reuse

No context

Separation within a team

Faster development

Front-end

Different parts on a web page

Like jQuery plugins

When to use?

Large websites (“wide-ranging functionality”)

Web applications

Style Guides

Small web projects?

Structure

Markup

Styles

Functionality

Example:CSS Modal

Code on GitHub • Website

Component Libraries

User Interface Libraries

Forms, buttons, lists, messages, …

Bootstrap

(Is this DRY?)

Bower

A package manager for the web

Manage components automatically

$ npm install -g bower

Install easily

$ bower install css-modal

Think beyond

Use your own Git repositories

component

Yeoman

Wrap-up

Build friendships with your co-workers

Use style guides to maintain the friendship

Style guides for your code!!1!!11

We can be a team

Why is it STILL about the fight between designer and developers? Its 2013, we all want to get the best result, right? #uxmunich

Questions?

♥