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
    • ​​<i class="icon-instagram"></i>
  • 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
    • <i class="fa fa-instagram"></i>
  • Icomoon (udemy icons)
    • <i class="ud_development"></i>
  • 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/

Udemy Eng

By Hamza Erbay