semantic ui - web front-end framework
DESCRIPTION
TRANSCRIPT
Semantic - UI
فریمورکcssچیست؟چرا باید از فریمورک استفاده کنیم؟معروف ترین و متداول ترین فریمورک هاقابلیت ها و امکانات مورد نیاز در فریمورک ها امکاناتsemantic uiPreprocessorهامنابعسؤال؟
2
Semantic - UI
استاندارد برایweb application سریع تر شدن کد نویسی سمتclientنظم و یکنواختی در کلیه اجزای پروژه امکانات متعدد برای زیبایی بیشتر بهweb applicationکمتر شدن کد های اضافه و سریع شدن بارگذاری صفحه
3
Semantic - UI
استفاده از امکانات متعددModal boxSlidersDropdown menuTable design و...
استفاده کمتر ازpluginها و جلوگیری از کند شدن بارگذاری صفحه باالبردنSeo وPage Rankدر موتور های جستجو استفاده ازGrid ها برای طراحیResponsiveیا واکنش گرا
4
Semantic - UI
5
Responsive Grid System
Less Framework
SusyGumbyTitan 960 Grid System
Kendu UIYAMLSkeletonFoundation ZurbTwitter Bootstrap
Semantic - UI
6
Semantic - UI
7
1. Grid System (for responsive design)2. Cross Browser3. Forms Friendly4. Forms Validation5. Menus & Dropdowns6. Typography7. Modular8. Tables Design9. Messages And Labels10.And More …
Semantic - UI
8
Semantic - UI
9
Cross Browser
Cross Platform
Best Web Application
Performance
Even IE 7 :(
Semantic - UI
10
Semantic - UI
11
Semantic - UI
12
Semantic - UI
13
Semantic - UI
14
Semantic - UI
15
• Element1. Buttons2. Divider3. Header4. Icon5. Images6. Inputs7. Labels8. Loaders9. Progress10. Reveal11. Segments12. Steps
• Collections1. Breadcrumb2. Form3. Grid4. Menu5. Message6. Table7. Pagination
• Views1. Comments2. Feed3. Items4. list
• Modules1. Accordion2. Checkbox3. Dimmer4. Dropdown5. Modal6. Popup7. Rating8. Shape9. Slider10. Transitions11. Form Validation
• Design1. Flat Design 20132. Realism Design (old)3. Not Have Slider4. Not Have Carousel5. Not Pagination in tables
Semantic - UI
16
Sample To Use Sass OR Scsshttp://css-tricks.com/conical-gradients-css/
#header {h1 {font-size: 26px;font-weight: bold;
}p { font-size: 12px;a { text-decoration: none;&:hover { border-width: 1px }
}}
}
#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;
}
Semantic - UI
17
• Semantic-ui.com• getbootstrap.com• Foundation.zurb.com• Awwwards.com• Sitepoint.com• Net.tutsplus.com• W3schools.com• Lesscss.org• compass-style.org
