1. A free and open source web application UI framework
Omid Khosrojerdi
omidkh68@gmail.com
۱۳۹۲/۱۰/۳۰

2. ‫‪Semantic - UI‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫2‬
‫فریمورک ‪ css‬چیست؟‬
‫چرا باید از فریمورک استفاده کنیم؟‬
‫معروف ترین و متداول ترین فریمورک ها‬
‫قابلیت ها و امکانات مورد نیاز در فریمورک ها‬
‫امکانات ‪semantic ui‬‬
‫‪ Preprocessor‬ها‬
‫منابع‬
‫سؤال؟‬

3. ‫‪Semantic - UI‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫3‬
‫استاندارد برای ‪web application‬‬
‫سریع تر شدن کد نویسی سمت ‪client‬‬
‫نظم و یکنواختی در کلیه اجزای پروژه‬
‫امکانات متعدد برای زیبایی بیشتر به ‪web application‬‬
‫کمتر شدن کد های اضافه و سریع شدن بارگذاری صفحه‬

4. ‫‪Semantic - UI‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫4‬
‫استفاده از امکانات متعدد‬
‫‪Modal box ‬‬
‫‪Sliders ‬‬
‫‪Dropdown menu ‬‬
‫‪Table design ‬‬
‫‪ ‬و ...‬
‫استفاده کمتر از ‪ plugin‬ها و جلوگیری از کند شدن بارگذاری صفحه‬
‫باالبردن ‪ Seo‬و ‪ Page Rank‬در موتور های جستجو‬
‫استفاده از ‪ Grid‬ها برای طراحی ‪ Responsive‬یا واکنش گرا‬

5. Semantic - UI
Twitter Bootstrap
Titan
Foundation Zurb
Gumby
YAML
Skeleton
Susy
Kendu UI
960 Grid System
Less Framework
Responsive Grid System
5

6. Semantic - UI
6

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. Semantic - UI
8

9. Semantic - UI
Cross
Browser
Best Web
Application
Performance
Even IE 7 :(
Cross
Platform
9

10. Semantic - UI
10

11. Semantic - UI
11

12. Semantic - UI
12

13. Semantic - UI
13

14. Semantic - UI
14

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. 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. 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. Semantic - UI
‫پااین‬
Omid Khosrojerdi
Email : omidkh68@gmail.com
18