Responsive WAT Design

WAT?

Grid System

OMG System

Bootstrap

BOOMstrap

@media Query?

@media screen and (min-width: 3656px) {
/* How about 4K resolution */

}

@media QUIT!

聖光啊,
看到那 margin 了嗎?

margin EVIL!

WHY? It just works.

     parentNode without overflow
 +    margin: 1em auto;
                        BOOM!

`inherit` just like a SHIT!

`hidden` just work fine!

`box-sizing` isn't SUPER!

`margin` is fucking SUPER!

Fluid vs. Responsive

Fluid
A style of Grid System

Fluid: `margin` + `float`

Fluid: `break-flow` = GG!

SO WHAT?

OMG!
Twitter Bootstrap+
Golden Grid System

OTBGGStrap

簡稱脫褲子放屁

GGStrap

Teng-Kou

  • Use SCSS/SASS
  • Base on Bootstrap
  • Replace Grid System with GGS
  • Rebuild [email protected]` with @Mixin
  • DO NOT Support IE<10

BUT

not done yet

Why not {less}?

I do not like.

Why not IE<=9?

Why IE?

Thank you!
Q & A