introduction

Long time ago

Horrible Things HAPPEN in The Past

• No Standardisation
• No Design Patterns
• No Strong Foundations
• Less Brand Identity
• Not efficiency

After Years

• Bad Design Experience
• Bad User Experience
• Products / Website
  looks like Unprofessional

CSS Framework

960 Grid System

Twitter Bootstrap (Responsive)

UI KIT

Flat UI by Design Modo

http://designmodo.github.io/Flat-UI/

UI Kit Marketplace

CSS preprocessor

Technical Approach

Stylus, etc...

$prefix: "mobil";

.#{$prefix} {
    color: red;
    &.ford {
        color: black;
    }

    &.toyota {
        color: white;
        width: 120px;
        .innova {
            width: 100px;
            height: 100px;
        }
    }
}

With

.mobil {
    color: red;
}

.mobil.ford {
    color: black;
}

.mobil.toyota {
    color: white;
    width: 100px;
}

.mobile.toyota--innova {
    width: 100px;
    height: 100px;
}

Without

<<<<   Auto Compile   >>>>

Primary Button

Secondary Button

Error Button

$white: #ffffff;
$blue: #22c0f2;
$grey: #e6e6e6;
$black: #000000;
$red: #d74848;

.button {
    color: $white;

    &--primary {
        background: ligthen($blue, 100);
    }

    &--secondary {
        color: $grey-text;
        background-color: ligthen($black, 10);
    }    

    &--error {
        background-color: $red;
    }
}

<a class="button button--primary">Primary Button</a>
<a class="button button--secondary">Secondary Button</a>
<a class="button button--error">Error Button</a>

BEM (Block Element Modifier) METHODOLOGY

http://getbem.com/

Block

Elements

Modifiers

<div class="block">
    <div class="block__element">
        <a class="block__element__link block__element__link--active"></a>
    </div>
</div>

.block {
    &__element {
        /* Styles here */

        &__link {
            /* Styles here */

            &--hover {}
            &--active {}
        }
    }
}

Example: Form with input

Type Your Email & Join with 80,000 Subscribers

<div class="optin-form">
    <input class="optin-form__input" />
    <button class="optin-form__button" />
</div>

.optin-form {
    /* Styles here */
    &__input {
        /* Styles here */
    }
    &__button {
        /* Styles here */
        &:hover {
            /* Hover styles here */
        }
    }
}

Imagine Tree Structure

block
|__ first-element
|__ another-element

<div class="block">
    <div class="block__first-element"></div>
    <div class="block__another-element"></div>
</div>

.block {
    &__first-element {}
    &__another-element {}
}

Folder Structures

Main.scss

File Utama, import file partials dari folder

Abstracts

Kumpulan Variable, Function dan Mixins. e.g colors

Base

Kumpulan Base Style. e.g Typography, Font

Components

Kumpulan Components. e.g buttons, input, etc

Pages

Kumpulan Pages. e.g home, about-us, contact-us

themes

Kumpulan Themes. e.g app, admin, customer-support

LAYOUT

Kumpulan Layouts. e.g header, footer, sidebar

VENDOR

Kumpulan SASS dari vendor. e.g masonry, swiper, owl-carousel, etc

styleguides

Design Approach

Untuk Mempersulit Designer

Design Bukan Matematika

Standarisasi, Brand Identity, BERPRINSIP, Mempercepat Workflow

Simple StyleGuides

Detailed styleguides

https://polaris.shopify.com/

https://atlassian.design/

MORE DETAILED STYLEGUIDES

Click Next

Hey man you see that guy over there

He is lazy to explain more about styleguides on the current slide

Design system

Design Language or Design Patterns

ATOMIC DESIGN

http://bradfrost.com/blog/post/atomic-web-design/

We’re not designing pages, we’re designing systems of components.—Stephen Hay

ATOMS

molecules

Organism

Templates

pages

Google Material Design

https://material.io/​

Microsoft Fluent

http://fluent.microsoft.com/​

references

awesome design system

https://github.com/alexpate/awesome-design-systems

atomic Design

http://bradfrost.com/blog/post/atomic-web-design

styleguides list

http://styleguides.io

block-element-modifier methodology

http://getbem.com

css framework list

https://github.com/sotayamashita/awesome-css#frameworks-art

learn basic sass

http://sass-lang.com/guide

50%

Developer

50%

Designer

Some people don't like change, but you need to embrace change if the alternative is disaster.

Elon Musk