Your SlideShare is downloading. ×
  • Like
Semantic ui - web front-end framework
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Semantic ui - web front-end framework

  • 1,206 views
Published

 

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,206
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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