Group Training

1. Mart – 2016
Css Framework'leri
@aniliyidogan

2. Framework Nedir?
Uygulama geliştiricisine, kullanabileceği bazı
özellikleri önceden hazırlanmış biçimde sunan
faydalı kütüphanelere sahip yapılardır.
https://en.wikipedia.org/wiki/Framework

3. Cascading Style Sheets
Nedir?
Basamaklı Stil Şablonları,
HTML'e ek olarak metin ve
format biçimlendirme alanında
fazladan olanaklar sunan bir
Web teknolojisidir.
https://en.wikipedia.org/wiki/Cascading_Style_Sheets

4. Burada da mı
Framework?
+ Hızlı başlanıç sağlar.
+ İstediğimiz componentleri kullanabiliriz.
+ Özelleştirebiliriz, geliştirebiliriz.
- Kullanacağımızdan fazlasını içerebilir.
- Projeye uygun olmayabilir.

5. Bootstrap
● En yaygın kullanıcıya sahip
● Gelişmiş component'leri var
● bootstrap.css(146 kb), bootstrap.min.css(121 kb)
● bootstrap.js(69 kb), bootstrap.min.js(36,9 kb)
● Stabil sürüm 3.3.6 (Bootstrap 4 Alpha)
http://getbootstrap.com/

6. Materialize Css
●
Google'ın materyal tasarım anlayışını içerir.
●
Dalgaların gücü adına
●
Hem Css hem Js componentleri içerir
●
materialize.css(191,9 kb),
materialize.min.css(148,9 kb)
●
materialize.js(278,6 kb),
materialize.min.js(130,6 kb)
●
Sürüm 0.97.5(alpha)
http://materializecss.com/

7. Semantic UI
●
Bu componentler bir harika!
●
Js ve Css'de seçenekler fazla
● semantic.css(718,8 kb), semantic.min.css(522,3
kb)
● semantic.js(693,9), semantic.min.js(261,8 kb)
●
Boyutlarından dolayı component'lerine de
ayırmışlar.
●
Sürüm 2.1
http://semantic-ui.com/

8. Maxmertkit
● Dolu Dolu Component
● maxmertkit.css(886,4 kb),
maxmertkit.min.css(752 kb), gzip(71,8)
● maxmertkit.js(91,8 kb),
maxmertkit.min.js(51,5 kb), gzip(8,1 kb)
● Sürüm 1.0.5
www.maxmert.com

9. Pure Css
● Simple
● Grids,Forms,Buttons,Tables,Men
us
● pure.min.css(17,3 kb), gzip(4 kb)
● Sürüm 0.6.0
http://purecss.io/

10. Milligram
● Simple
● Typography, Blockquotes, Buttons, Lists,
Forms, Tables, Grids, Codes
● milligram.css(16,2 kb),
milligram.min.css(14,7 kb), gzip(2 kb)
● Sürüm 1.1.0
http://milligram.github.io/

11. Kube
● Simple
● Typography, Grid, Blocks, Forms,
Tables, Buttons, Notifications, Labels
● kube.css(38,1 kb), kube.min.css(31,9
kb)
● Sürüm 5.0
https://imperavi.com/kube/

12. Güzel Bağlantılar
● https://github.com/sindresorhus/awesome
● http://usablica.github.io/front-end-frameworks/c
● http://mashable.com/2013/04/26/css-boilerplate
● http://www.awwwards.com/what-are-framework

13. Teşekkürler