[Rikkeisoft] CSS Frameworks

[Rikkeisoft] CSS Frameworks - MinhTQ & ChienLV

Transcript

1. CSS FRAMEWORKS By MinhTQ, ChienLV
2. CONTENT  Css frameworks introduction  Bootstrap  Foundation  Other frameworks  Conclusion
3. CSS FRAMEWORKS INTRODUCTION  Problem 1: Today web experience
4. CSS FRAMEWORKS INTRODUCTION  Problem 2: Cross browsers
5. CSS FRAMEWORKS INTRODUCTION  Problem 3: Rapid development Front­end developement
6. CSS FRAMEWORKS INTRODUCTION  Definition  “Pre­prepared libraries that are meant to allow for easier, more standards­compliant styling of web pages using the Cascading Style Sheets language ”  Make front­end development easier, faster, stronger.  “No need to reinvent the wheel”
7. WHAT CSS FRAMEWORKS CAN DO?  CSS source code to create a grid system  Responsive  Solutions for cases of browser incompatibility  Typography style definitions for HTML elements  Creation of standard CSS classes for styling advance user interface  UI elements
8. CSS FRAMEWORK DISADVANTAGES  Unused code leftover  Time to learn that framework  You don’t learn to do it yourself  Fix the bugs aren’t yours
9. BOOTSTRAP  Twitter Bootstrap is the most popular responsive design framework for building web sites and web applications. (set of JavaScript, CSS, and images)  Open Source project  Supports HTML5 and CSS3  Supported by all major browsers
10. BOOTSTRAP FEATURES: COMPONENTS  Buttons:  Tabs:  Breadcrumb:  Pagination:  Alerts:  Progress bar:
11. BOOTSTRAP FEATURES: JAVASCRIPT
12. BOOTSTRAP GRID SYSTEM
13. BOOTSTRAP FEATURES: GRID SYSTEM
14. BOOTSTRAP FEATURES: CUSTOMIZATION  http://getbootstrap.com/customize/  http://lesscss.org/
15. FOUNDATION  The most advanced responsive front­end framework in the world.  It is the 13th most starred project in all of GitHub.
16. WHAT FOUNDATION INCLUDES?  Responsive design with a fully functional grid system, media query, interchane ...  Base CSS includes standardized styling for forms, buttons, images, headings, navigation systems, ...  jQuery­driven components include dropdown menus, tooltips, popovers, image carousel, site tour, tabs, accordion ....
17. FOUNDATION COMPARES WITH BOOTSTRAP Bootstrap Foundation UI Elements Almost everything you want Limited Size unit PX REM Responsive approach Web first Mobile first Community Big Small Customize Normal Flexible
18. OTHER CSS FRAMEWORKS  Complete frameworks  Skeleton  YAML 4  Gumby  …  Simple frameworks:  Responsive Grid System  960 Grid System  …
19. CONCLUSION  CSS frameworks:  Rapid development  Responsive  Cross browser  There are hundred of them and master all is impossible  Consider some disadvantage before using a css frameworks
20. THANKS FOR LISTENING!