CSS Framework + Progressive Enhacements
โขDownload as KEY, PDFโข
1 likeโข1,310 views
Mario Hernandez presented on CSS frameworks and progressive enhancements with CSS3. The presentation covered choosing the right CSS framework based on factors like project requirements, fluid grid systems, responsiveness, documentation, and maintenance. Frameworks like Foundation and 960 Grid System were showcased. Grid systems use rows and columns to layout content. Progressive enhancements with CSS3 focus on widely supported properties to enhance the user experience without sacrificing functionality. Additional resources on grids, CSS3, and responsive design were provided.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to CSS Framework + Progressive Enhacements
Similar to CSS Framework + Progressive Enhacements (20)
More from Mario Hernandez
More from Mario Hernandez (11)
Recently uploaded
Recently uploaded (20)
CSS Framework + Progressive Enhacements
- 1. - CSS Frameworks - Progressive Enhancements with CSS3 by Mario Hernandez San Diego .Net User Group - June 19, 2012
- 2. Mario Hernandez Front-end Developer and Web Designer Web: http://designsdrive.com Email: designsdrive@gmail.com Twitter: @designsdrive LinkedIn: http://linkedin.com/in/designsdrive
- 3. Agenda โข โขCSS Frameworks Choosing the right framework โข Working with Grid Systems โข Rapid Prototyping โข โขProgressive Enhancements with CSS3 Supported CSS3 properties โข Styling Forms โข Additional Resources
- 4. Choosing the right CSS Framework
- 5. Choices, Choices, Choices BlueBird Golden Grid System 960 Grid System Elastic CSS Twitter Strap YAML Framework BlueTrip Foundation Zurb BoilerPlate SEN CSS LESS Fluid 960 Grid System Source: DevSnippets.com
- 6. What to look for?
- 7. What to look for? โข Project requirements determine the framework
- 8. What to look for? โข Project requirements determine the framework โข Fluid Grid System
- 9. What to look for? โข Project requirements determine the framework โข Fluid Grid System โข Responsiveness a plus
- 10. What to look for? โข Project requirements determine the framework โข Fluid Grid System โข Responsiveness a plus โข Offer more than just a grid buttons, navigation, forms elements, etc.) (pre-de๏ฌned styles for typography, tables,
- 11. What to look for? โข Project requirements determine the framework โข Fluid Grid System โข Responsiveness a plus โข Offer more than just a grid buttons, navigation, forms elements, etc.) (pre-de๏ฌned styles for typography, tables, โข Great documentation
- 12. What to look for? โข Project requirements determine the framework โข Fluid Grid System โข Responsiveness a plus โข Offer more than just a grid buttons, navigation, forms elements, etc.) (pre-de๏ฌned styles for typography, tables, โข Great documentation โข Maintained regularly by the community or creator
- 13. What to look for? โข Project requirements determine the framework โข Fluid Grid System โข Responsiveness a plus โข Offer more than just a grid buttons, navigation, forms elements, etc.) (pre-de๏ฌned styles for typography, tables, โข Great documentation โข Maintained regularly by the community or creator โข Open Source (free)
- 15. Working with Grid Systems
- 16. How do grid systems work? โข Grid systems are built using rows & columns โข Columns are grid systemโs smallest unit of measurement Example based on 960 Grid System (http://960.gs). Showing the 12 column version of the grid system
- 17. How do grid systems work? Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system
- 18. The concept of grids header โข Page regions (header, sidebar, content, etc.,) are de๏ฌned by column width โข As in: โThe header is twelve sidebar columns wideโ, โThe sidebar is four columns wideโ Example based on 960.gs (12 columns)
- 19. Gutters (margins) โข Margins are used to create gutters between columns โข These margins provide gutters between page regions Example based on 960.gs (12 columns)
- 20. The Basics <div class="container"> <div class="row"> <div class="eight columns"> Eight columns </div> <div class="four columns"> Four columns! ! ! ! ! </div> </div><!-- /end of row --> </div><!-- /end of container -->
- 21. Nesting <div class="container"> <div class="row"> <div class="eight columns"> <div class="row"> <div class="six columns"> Six columns (nested) </div> <div class="six columns"> Six columns (nested) </div>
- 22. Offsets Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system
- 23. Source Ordering Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system
- 25. Progressive Enhancements with CSS3
- 26. Great design โข A well designed product gives the impression that it works well Source: Apple.com
- 27. Great design โข Better designed websites appear easier to use โข Generally people associate great design with something that works well Source: http://mailchimp.com Source: MailChimp.com
- 28. Elements of great web design
- 29. COLOR
- 30. Texture
- 31. white space
- 32. Typography
- 33. CSS3 โข Use CSS3 to target the experience layer โข Focus on the properties that are widely supported โข Do not sacri๏ฌce functionality for looks Critical Non-critical Branding Interaction Usability Visual rewards Accessibility Feedback Layout Movement Source: CSS3 for web designers book by Ethan Marcotte
- 34. Do websites need to look exactly the same in every browser? http://dowebsitesneedtolookexactlythesameineverybrowser.com/
- 35. Supported CSS3 Properties Property Supported In border-radius 3+ 3+ 1+ 10.5+ 9+ text-shadow 1.1+ 2+ 3.1+ 9.2+ box-shadow 3+ 3+ 3.5+ 10.5+ 9+ opacity 1.2+ 1+ 1.5+ 9+ 9+ RGBA 3.2+ 3+ 3+ 10+ 9+
- 37. Letโs do this!
- 38. Additional Resources โข 960 Grid System: http://css-tricks.com โข CSS3 Resources: http://www.css3๏ฌles.com By Dan Cederholm By Dan Cederholm By Ethan Marcotte
- 39. Contact me โข Web: http://designsdrive.com โข Email: designsdrive@gmail.com โข Twitter: @designsdrive Download slides at: http://www.slideshare.net/marequi
Editor's Notes
- \n
- \n
- \n
- I have been designing website for about 10 years. For the past 6-7 years I have been doing it as a full time web developer for the federal government. During this time, I have also been running my own independent freelance business and that&#x2019;s where I get to be a little more creative.\nI specialize in front-end web design and I use Drupal exclusively as my development platform. The reason for it is that Drupal does all the heavy lifting for me. Later on I will be presenting on Drupal as a CMS. You&#x2019;re welcome to join me.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- There is a 24 column but it&#x2019;s not widely used as the 12 or 16 columns version. There is also a fluid version which is gaining a lot of traction especially when it comes to responsive web design which allows for the grid to be resized automatically based on the size screen it&#x2019;s being looked at.\n
- \n
- You no longer measure your regions in pixels. You use columns as the measurements unit\n
- You don&#x2019;t have to do the math yourself. All the calculations have already been made for you so you can focus on design.\n
- The grid is built around three key elements: containers, rows, and columns. Containers create base padding for the page; rows create a max-width and contain the columns; and columns create the final structure.\nWhat you need to know is that columns don't have a fixed width: they can vary based on the resolution of the screen, or the size of the window\n
- In the Grid you can nest columns down as far as you'd like. Just embed rows inside columns and go from there. Each embedded row can contain up to 12 columns.\n
- Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven.\n
- Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using these source ordering classes you can shift columns around on desktops and tablets.\n
- There are various grid systems out there. Today we will be briefly talking about my personal favorite one, 960 grid system\n
- \n
- You no longer need to spend time hacking IE.\nCross browser compatible out of the box\n
- In the 16 column version each column is 40px wide. Everything else remains the same\n
- All elements float to the left by default. If you know a little about floating elements you&#x2019;ll know that floating elements to the left automatically aligns everything horizontally.\n
- \n
- \n
- \n
- \n
- \n
- The premise of this session is not to teach you all there is to know about great web design, but to introduce you to principles and techniques that will help you become a better designer. \n
- Example of this are apple products. The opposite is also true, a poorly designed product (whether is a website or not), does not inspire confidence or trust. That&#x2019;s just the way it is. \n
- Example of this are apple products. The other side of the coin is also true. Personally when I visit a poorly designed website, I become skeptical or suspicious whether it works well or I make a pre-assumption that this website may not work well. Better yet, I question the company&#x2019;s reputation or trust if I am about to do business with them.\n
- These elements are true not only to web design but design in general\n
- It&#x2019;s how you use color. It doesn&#x2019;t mean using every color in the spectrum. Some of the most beautiful website are those who only use two or three colors effectively. Sometimes the lack of color can also be a great way to enhance design.\n
- Don&#x2019;t over do it.\n
- Negative space (White space). A great design is not the one where there is nothing else to add but instead where there is nothing else to remove.\n\nMany people make it a goal to pack every single pixel in the canvas. They can&#x2019;t stand the fact that a section of the page doesn&#x2019;t have something on it. You&#x2019;ll see today how you can effectively use negative space to enhance your design.\n
- Using helvetica font. Talk about the helvetica documentary. Talk about shopping at Target or The Gap.\n\nToday you will see that what makes this website attractive is the typography. It&#x2019;s not about using all the fonts in the world but instead using a hand-full of fonts effectively (2-3 fonts tops)\n
- Before we get into it. I would recommend you get a hold of the following 3 books. Start with HandCrafted CSS then to get a good foundation on CSS in general. Then move on to CSS3 for web designers and finally, Responsive web design. You will become a better designer after you have gone through these books.\n
- Talk about the fact that css3 is a series of modules that run independently from each other. This is a good thing. This means you can implement only those properties that are widely supported.\n\nThe notion is that because some properties of CSS3 are not widely supported you should not use CSS3 at all. That&#x2019;s the wrong approach. Embrace the properties that are supported.\n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n