CSS Frameworks: Faster Layout, Consistent Results
Download as PPT, PDF•1 like•1,023 views
The document discusses the advantages and disadvantages of using CSS frameworks, highlighting that they can speed up development and provide consistency across projects while also having a learning curve and potential code bloat. It lists various CSS frameworks, including those for resetting browsers and layout purposes, and provides examples like YUI, Tripoli, and Blueprint. Additionally, it mentions frameworks for specific needs, such as Formy for form management and Hartija for print styles.
![Formy. bit.ly/formycss “Formy is CSS Framework for better form management. [Formy is] universal CSS for forms who will interact in the simple natural way with HTML form and HTML form will work decently well even without CSS."](https://image.slidesharecdn.com/css-frameworks-key-100523113927-phpapp02/85/CSS-Frameworks-Faster-Layout-Consistent-Results-14-320.jpg)
![CSS Drop-Down Menu. bit.ly/cssdropdownmenu "Modular, with themes. Easily deployable. Easily transformable. Cross browser. Javascript only for IE. Super fast. Continuous development. iPhone OS [compatible]."](https://image.slidesharecdn.com/css-frameworks-key-100523113927-phpapp02/85/CSS-Frameworks-Faster-Layout-Consistent-Results-16-320.jpg)
![Contact me. Steve Hong, Senior Web Developer, CrossComm [email_address] linkedin.com/in/stevehong www.crosscomm.net @st3v3hong](https://image.slidesharecdn.com/css-frameworks-key-100523113927-phpapp02/85/CSS-Frameworks-Faster-Layout-Consistent-Results-17-320.jpg)
CSS Frameworks: Faster Layout, Consistent Results
- 1. CSS Frameworks: Faster Layout, Consistent Results by Steve Hong (@st3v3hong) Senior Web Developer CrossComm, Inc. http://slideshare.net/stevehong/
- 2. Benefits. Developers don't need to learn CSS layout techniques. CSS resets provide a common foundation across browsers. Prototyping and site production can be faster with pre-made solutions. Common standards and documentation allow others to pick up your work later.
- 3. Drawbacks. There is a learning curve before you see productivity gains. Sometimes they contribute to code bloat. Designers may have to be on board to use grid systems and common widths. They mix presentation and content with non-semantic class names.
- 4. CSS frameworks for resetting browsers.
- 5. YUI. yhoo.it/yui3framework "YUI 3 is Yahoo!'s next-generation JavaScript and CSS library. It powers the new Yahoo! homepage and incorporates what we've learned in five years of dedicated library development."
- 6. Tripoli. bit.ly/tripolicss "Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects."
- 7. SenCSs. bit.ly/sencss "SenCSs... doesn't include a layout system littered with silly classes and pre-set grids... SenCSs does everything else: baseline, fonts, paddings, margins... All the stuff that's almost the same in every project..."
- 8. Elements. bit.ly/elementscss "Elements is a collection of folders and files that help you work faster. It was made to fit into your exsisting workflow, or be its own workflow. From client files to design to code to getting out on the web"
- 9. CSS frameworks for layout.
- 10. 960gs. bit.ly/960gs The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
- 11. Blueprint. bit.ly/blueprintcss "Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing."
- 12. YUI grids. yhoo.it/yui2grids "The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations."
- 13. CSS frameworks for specific needs.
- 14. Formy. bit.ly/formycss “Formy is CSS Framework for better form management. [Formy is] universal CSS for forms who will interact in the simple natural way with HTML form and HTML form will work decently well even without CSS."
- 15. Hartija CSS Print. bit.ly/hartijacss "I decided to make universal Cascading Style Sheets for web printing by uniting all best CSS printing practises into one."
- 16. CSS Drop-Down Menu. bit.ly/cssdropdownmenu "Modular, with themes. Easily deployable. Easily transformable. Cross browser. Javascript only for IE. Super fast. Continuous development. iPhone OS [compatible]."
- 17. Contact me. Steve Hong, Senior Web Developer, CrossComm [email_address] linkedin.com/in/stevehong www.crosscomm.net @st3v3hong
- 18. Find this online. SlideShare: http://slideshare.net/stevehong/