CSS Frameworks
•Download as KEY, PDF•
0 likes•1,890 views
An introduction to CSS Frameworks presented by Mario Hernandez for Socal Code Camp 2012
Recommended
More Related Content
What's hot
What's hot (20)
Similar to CSS Frameworks
Similar to CSS Frameworks (20)
More from Mario Hernandez
More from Mario Hernandez (12)
Recently uploaded
Recently uploaded (20)
CSS Frameworks
- 1. CSS Frameworks An Introduction MARIO HERNANDEZ DesignsDrive.com 2012 SoCal CodeCamp by Mario Hernandez @DesignsDrive San Diego .Net User Group - June 19, 2012
- 2. Mario Hernandez Web Designer & Front-end Developer Web: http://designsdrive.com Email: designsdrive@gmail.com Twitter: @designsdrive
- 3. Agenda • Choosing the right framework • Working with Grid Systems • Rapid Prototyping MARIO HERNANDEZ DesignsDrive.com 2012 SoCal CodeCamp @DesignsDrive
- 4. Choosing the right CSS Framework MARIO HERNANDEZ DesignsDrive.com 2012 SoCal CodeCamp @DesignsDrive
- 5. Choices, Choices, Choices BlueBird Golden Grid System 960 Grid System Elastic CSS Twitter Bootstrap YAML Framework BlueTrip Foundation Zurb BoilerPlate SEN CSS LESS Fluid 960 Grid System Source: DevSnippets.com
- 6. What to look for? • Project requirements determine the framework
- 7. What to look for? • Project requirements determine the framework • Fluid Grid System
- 8. What to look for? • Project requirements determine the framework • Fluid Grid System • Responsiveness a plus
- 9. 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-defined styles for typography, tables,
- 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-defined styles for typography, tables, • Great documentation
- 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-defined styles for typography, tables, • Great documentation • Maintained regularly by the community or creator
- 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-defined styles for typography, tables, • Great documentation • Maintained regularly by the community or creator • Open Source (free)
- 13. Working with Grid Systems
- 14. How do grid systems work? • Grid systems are built using rows & columns • A fluid grid uses percentages instead of pixels MARIO HERNANDEZ DesignsDrive.com 2012 SoCal CodeCamp @DesignsDrive
- 15. How do grid systems work? Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system
- 16. The concept of grids header sidebar • Page regions (header, sidebar, content, etc.,) are defined by column width • As in: “The header is twelve columns wide” Example based on 960.gs (12 columns)
- 17. Gutters (margins) • Margins are used to create gutters between columns • These margins provide gutters between page regions Example based on 960.gs (12 columns)
- 19. The Basics <div class="row"> 12 columns </div>
- 20. The Basics <div class="row"> <div class="eight columns"> Eight columns </div> <div class="four columns"> Four columns! ! ! ! ! </div> </div><!-- /end of row -->
- 21. Offsets Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system
- 22. Source Ordering Example based on Foundation Zurb Framework (http://foundation.zurb.com). A 12 column grid system
- 24. Contact me • Web: http://designsdrive.com • Email: designsdrive@gmail.com • Twitter: @designsdrive
Editor's Notes
- \n
- \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
- 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
- First introduced in 2009 by Ethan Marcotte who has also written a book with the same title and which I also recommend.\n\nI&#x2019;ve spent the last two years learning about and really digging into responsive Web design and I&#x2019;ve gotta say, It is the beginning of a new era in the Web.\n\n\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
- 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
- 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