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
Udemy Eng
- 457