Semantic ui - web front-end framework
-
Upload
omid-khosrojerdi -
Category
Technology
-
view
1.221 -
download
9
description
Transcript of Semantic ui - web front-end framework
![Page 2: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/2.jpg)
Semantic - UI
فریمورکcssچیست؟چرا باید از فریمورک استفاده کنیم؟معروف ترین و متداول ترین فریمورک هاقابلیت ها و امکانات مورد نیاز در فریمورک ها امکاناتsemantic uiPreprocessorهامنابعسؤال؟
2
![Page 3: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/3.jpg)
Semantic - UI
استاندارد برایweb application سریع تر شدن کد نویسی سمتclientنظم و یکنواختی در کلیه اجزای پروژه امکانات متعدد برای زیبایی بیشتر بهweb applicationکمتر شدن کد های اضافه و سریع شدن بارگذاری صفحه
3
![Page 4: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/4.jpg)
Semantic - UI
استفاده از امکانات متعددModal boxSlidersDropdown menuTable design و...
استفاده کمتر ازpluginها و جلوگیری از کند شدن بارگذاری صفحه باالبردنSeo وPage Rankدر موتور های جستجو استفاده ازGrid ها برای طراحیResponsiveیا واکنش گرا
4
![Page 5: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/5.jpg)
Semantic - UI
5
Responsive Grid System
Less Framework
SusyGumbyTitan 960 Grid System
Kendu UIYAMLSkeletonFoundation ZurbTwitter Bootstrap
![Page 6: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/6.jpg)
Semantic - UI
6
![Page 7: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/7.jpg)
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 …
![Page 8: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/8.jpg)
Semantic - UI
8
![Page 9: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/9.jpg)
Semantic - UI
9
Cross Browser
Cross Platform
Best Web Application
Performance
Even IE 7 :(
![Page 10: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/10.jpg)
Semantic - UI
10
![Page 11: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/11.jpg)
Semantic - UI
11
![Page 12: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/12.jpg)
Semantic - UI
12
![Page 13: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/13.jpg)
Semantic - UI
13
![Page 14: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/14.jpg)
Semantic - UI
14
![Page 15: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/15.jpg)
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
![Page 16: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/16.jpg)
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;
}
![Page 17: Semantic ui - web front-end framework](https://reader030.fdocuments.net/reader030/viewer/2022020206/54869412b4af9fb55d8b4d7d/html5/thumbnails/17.jpg)
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