Udemy Eng

Hamza Erbay @Udemy

Process

Style guideline
Css migration (v4 to v5)
Css performance issues
Wordpress (about,blog,press,teach...)
Mail templates
Engineering: Front-End Implementations

Working on

Framework
- Bootstrap, Foundation, Flexible.gs, Purecss, Semantic ui...
Css preprocessor
- Less, Sass, Stylus
Font-icons & Sprites
- font-awesome, icomoon ...

Hardware

getbootstrap.com

Bootstrap

Normalize.css
Grid system (responsive)
font-icons (font-awesome, glyphicons)
Components (modal, tooltip, pagination, tabs ...)

lescss.org

Less

Variables
Mixins
Loops
Nested
Minify

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

// Usage with nested
a {
  color: @link-color;
  &:hover {
     color: @link-color-hover;
  }
}

//mixins
.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}

//loops
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

Sprites

290 Kb (udemy sprite.png)
Fixed size
Custom icons
Pixel based
Complex

Web-font

59 Kb (fontawesome)
519 icons
Scalable (Vector based)
Popular icons
Simple

Style guideline & Cheat sheet
Css migration (v4 to v5)

Udemy Side

Style Guideline

udemy.com/docs/style-guide/css

Angular UI (https://angular-ui.github.io/bootstrap)
Buttons, typography, themes, grid, tables, form elements

Cheat Sheet

udemy.com/docs/style-guide/cheat-sheet

Color codes
General components
- header, footer, cards, tabs, form elements ...
Sample codes

Css Migration

V4

V5

Less packages (page, component)
- home,discover,course-taking...
Duplicate rules
Font-awesome v3.2.1
-
Sprite (png)
A lot of colors
Unlimited space settings
- mt3, mt5, mt12...
Unlimited font size
- fs13, fs14, fs18...
Flexbox
- fxw,fxac,fxjc

Less packages (component)
- udemy.css
Theme (Discover)
- Business,technology,education...
Font-awesome v4.3.0
-
Icomoon (udemy icons)
-
Svg
14 colors
7 space settings
- 0,5,10,15,20,30,60
Flexbox
- fx-lt, fx-lc, fx-ct
Bem Method

BEM Method

<form class="site-search  full">
    <input type="text" class="field">
    <input type="Submit" class="button" value ="Search">
</form>

<form class="site-search  site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit"  class="site-search__button" value ="Search">
</form>

Bem

Normal

//Less
.site-search {
    ...
    &--full {...}
    &__button {...}
    &__field {...}
}
//Css
.site-search {...} /* Block */
.site-search--full {...} /* Modifier */
.site-search__field {...} /* Element */
.site-search__button {...} /* Element */

//Less
.site-search {
    ...
    .field {...}
    .button {...} 
    &.full {...}
} 
//Css
.site-search {...}
.site-search .field {...}
.site-search .button {...}
.site-search.full {...}

Course cards sample

http://bit.ly/1TiEOQr

https://en.bem.info/method/

https://css-tricks.com/bem-101/

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/