0
A free and open source web application UI framework

Omid Khosrojerdi
omidkh68@gmail.com

۱۳۹۲/۱۰/۳۰
‫‪Semantic - UI‬‬

‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬

‫2‬

‫فریمورک ‪ css‬چیست؟‬
‫چرا باید از فریمورک استفاد...
‫‪Semantic - UI‬‬

‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬

‫3‬

‫استاندارد برای ‪web application‬‬
‫سریع تر شدن کد نویسی سمت ‪clien...
‫‪Semantic - UI‬‬

‫‪‬‬

‫‪‬‬
‫‪‬‬
‫‪‬‬

‫4‬

‫استفاده از امکانات متعدد‬
‫‪Modal box ‬‬
‫‪Sliders ‬‬
‫‪Dropdown menu...
Semantic - UI

Twitter Bootstrap

Titan

Foundation Zurb

Gumby

YAML

Skeleton

Susy

Kendu UI

960 Grid System

Less Fra...
Semantic - UI

6
Semantic - UI

1. Grid System (for responsive design)
2. Cross Browser
3. Forms Friendly
4. Forms Validation
5. Menus & Dr...
Semantic - UI

8
Semantic - UI

Cross
Browser

Best Web
Application
Performance

Even IE 7 :(

Cross
Platform
9
Semantic - UI

10
Semantic - UI

11
Semantic - UI

12
Semantic - UI

13
Semantic - UI

14
Semantic - UI

•

Element
1. Buttons
2. Divider
3. Header
4. Icon
5. Images
6. Inputs
7. Labels
8. Loaders
9. Progress
10....
Semantic - UI

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decora...
Semantic - UI

•
•
•
•
•
•
•
•
•

Semantic-ui.com
getbootstrap.com
Foundation.zurb.com
Awwwards.com
Sitepoint.com
Net.tuts...
Semantic - UI

‫پااین‬
Omid Khosrojerdi
Email : omidkh68@gmail.com

18
Upcoming SlideShare
Loading in...5
×

Semantic ui - web front-end framework

1,571

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,571
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Semantic ui - web front-end framework"

  1. 1. A free and open source web application UI framework Omid Khosrojerdi omidkh68@gmail.com ۱۳۹۲/۱۰/۳۰
  2. 2. ‫‪Semantic - UI‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫2‬ ‫فریمورک ‪ css‬چیست؟‬ ‫چرا باید از فریمورک استفاده کنیم؟‬ ‫معروف ترین و متداول ترین فریمورک ها‬ ‫قابلیت ها و امکانات مورد نیاز در فریمورک ها‬ ‫امکانات ‪semantic ui‬‬ ‫‪ Preprocessor‬ها‬ ‫منابع‬ ‫سؤال؟‬
  3. 3. ‫‪Semantic - UI‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫3‬ ‫استاندارد برای ‪web application‬‬ ‫سریع تر شدن کد نویسی سمت ‪client‬‬ ‫نظم و یکنواختی در کلیه اجزای پروژه‬ ‫امکانات متعدد برای زیبایی بیشتر به ‪web application‬‬ ‫کمتر شدن کد های اضافه و سریع شدن بارگذاری صفحه‬
  4. 4. ‫‪Semantic - UI‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫‪‬‬ ‫4‬ ‫استفاده از امکانات متعدد‬ ‫‪Modal box ‬‬ ‫‪Sliders ‬‬ ‫‪Dropdown menu ‬‬ ‫‪Table design ‬‬ ‫‪ ‬و ...‬ ‫استفاده کمتر از ‪ plugin‬ها و جلوگیری از کند شدن بارگذاری صفحه‬ ‫باالبردن ‪ Seo‬و ‪ Page Rank‬در موتور های جستجو‬ ‫استفاده از ‪ Grid‬ها برای طراحی ‪ Responsive‬یا واکنش گرا‬
  5. 5. Semantic - UI Twitter Bootstrap Titan Foundation Zurb Gumby YAML Skeleton Susy Kendu UI 960 Grid System Less Framework Responsive Grid System 5
  6. 6. Semantic - UI 6
  7. 7. Semantic - UI 1. Grid System (for responsive design) 2. Cross Browser 3. Forms Friendly 4. Forms Validation 5. Menus & Dropdowns 6. Typography 7. Modular 8. Tables Design 9. Messages And Labels 10.And More … 7
  8. 8. Semantic - UI 8
  9. 9. Semantic - UI Cross Browser Best Web Application Performance Even IE 7 :( Cross Platform 9
  10. 10. Semantic - UI 10
  11. 11. Semantic - UI 11
  12. 12. Semantic - UI 12
  13. 13. Semantic - UI 13
  14. 14. Semantic - UI 14
  15. 15. Semantic - UI • Element 1. Buttons 2. Divider 3. Header 4. Icon 5. Images 6. Inputs 7. Labels 8. Loaders 9. Progress 10. Reveal 11. Segments 12. Steps • Collections • 1. Breadcrumb 2. Form 3. Grid 4. Menu 5. Message 6. Table 7. Pagination Views 1. Comments 2. Feed 3. Items 4. list • Modules • 1. Accordion 2. Checkbox 3. Dimmer 4. Dropdown 5. Modal 6. Popup 7. Rating 8. Shape 9. Slider 10. Transitions 11. Form Validation Design 1. Flat Design 2013 2. Realism Design (old) 3. Not Have Slider 4. Not Have Carousel 5. Not Pagination in tables 15
  16. 16. Semantic - UI #header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; } #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } Sample To Use Sass OR Scss http://css-tricks.com/conical-gradients-css/ 16
  17. 17. Semantic - UI • • • • • • • • • Semantic-ui.com getbootstrap.com Foundation.zurb.com Awwwards.com Sitepoint.com Net.tutsplus.com W3schools.com Lesscss.org compass-style.org 17
  18. 18. Semantic - UI ‫پااین‬ Omid Khosrojerdi Email : omidkh68@gmail.com 18
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×