CSS Framework By Nyros Developer


Published on

CSS Framework By Nyros Developer

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

CSS Framework By Nyros Developer

  1. 1. Welcome CSS Framework
  2. 2. Topics <ul><li>What is a CSS Framework . </li></ul><ul><li>Difference between CSS and CSS Framework </li></ul><ul><li>Advantages and disadvantages. </li></ul><ul><li>Creating your own CSS Framework. </li></ul><ul><li>Uses of each CSS file in a Framework. </li></ul>
  3. 3. What is a CSS Framework <ul><li>A CSS framework is a pre-built structure of CSS styles and properties that you </li></ul><ul><li>can use to generate specific looks on your Web pages, it is also known as web </li></ul><ul><li>design framework. it is a pre-prepared library that is meant to allow for </li></ul><ul><li>easier, more standards-complaint styling of a webpage using the </li></ul><ul><li>Cascading Style Sheets language. Just like programming and scripting </li></ul><ul><li>language libraries, CSS frameworks (usually packaged as external .css sheets </li></ul><ul><li>inserted into the header) package a number of ready-made options for </li></ul><ul><li>designing and outlaying a webpage. </li></ul>
  4. 4. Advantages <ul><li>1.They can help you learn CSS. </li></ul><ul><li>2. Provide ready made code </li></ul><ul><li>3. Cross browser compatibility </li></ul><ul><li>4. You increase your productivity and avoid common mistakes. </li></ul><ul><li>5. They encourage grid based design. </li></ul><ul><li>6. You have a clean, well-structured and complete code. </li></ul><ul><li>7. Documentation </li></ul>
  5. 5. Disadvantages <ul><li>1.In order to really benefit, and actually save time, you’ll need to </li></ul><ul><li>use one framework over and over. </li></ul><ul><li>2. Significant amount of time & effort required to learn the framework </li></ul><ul><li>3. A framework may contain unnecessary code that you will never use </li></ul><ul><li>4. You might inherit someone’s bugs or mistakes. </li></ul>
  6. 6. Creating your own CSS Framework. <ul><li>You can create your own CSS framework. But before you </li></ul><ul><li>begin first try few popular CSS frameworks or go through the </li></ul><ul><li>documentation to see what they offers. </li></ul><ul><li>Most popular CSS frameworks </li></ul><ul><li>1.Blueprint </li></ul><ul><li>2.YAML </li></ul><ul><li>3.YUI Grids Css Foundation </li></ul><ul><li>4.960 Grid System. </li></ul>
  7. 7. Why Build Your Own CSS Framework? <ul><li>1.More Productive </li></ul><ul><li>2.Better Design Compatibility </li></ul><ul><li>3.Fewer Headaches </li></ul><ul><li>4.Greater Flexibility </li></ul>
  8. 8. Types of CSS Framework <ul><li>1.Complete CSS Framework </li></ul><ul><li>This type of framework attempts to cover most of the things a developer may </li></ul><ul><li>need. To find that whether it is a complete css framework or not </li></ul><ul><li>simply check that it has reset.css and layout.css or not. These two files are </li></ul><ul><li>most important two be like a completed css framework. </li></ul><ul><li>Examples </li></ul><ul><li>1.Blueprint </li></ul><ul><li>2.YAML(Yet Another Multicolumn Layout) </li></ul><ul><li>3. YUI Grids CSS Fondation </li></ul><ul><li>4.960 Grid System </li></ul>
  9. 9. Limited CSS Frameworks <ul><li>As the name suggest this type of framework only covers limited needs </li></ul><ul><li>or have specific purpose. Some of the frameworks we list under this </li></ul><ul><li>category may be work in progress towards a Complete CSS </li></ul><ul><li>Framework. </li></ul><ul><li>1.Tripoli </li></ul><ul><li>2. SenCSS – Sensible Standards CSS Framework </li></ul><ul><li>3. The 1Kb CSS Grid </li></ul><ul><li>4. jQuery UI CSS Framework </li></ul>
  10. 10. Stylesheets and their uses <ul><li>Reset.css </li></ul><ul><li>This file sets sensible defaults across all browsers. If we are starting a new project first of </li></ul><ul><li>all we goes to our main CSS file and add a few default styles to the body selector, such </li></ul><ul><li>as ‘margin: 0; padding:0; font-family: Helvetica, Arial, sans-serif;’ or something along </li></ul><ul><li>those lines. This is what reset.css does, and more. It resets default styles for spacing, </li></ul><ul><li>tables, fonts, etc. so you can work from a clean slate. </li></ul><ul><li>Typography.css </li></ul><ul><li>This file sets up some nice default typography. The typography.css also sets up some </li></ul><ul><li>really nice styles around font sizes, line-heights, default styling of tables, etc. </li></ul><ul><li>Grid.css </li></ul><ul><li>This file handles the grid layout portion of our css framework. By default it uses a width of </li></ul><ul><li>950px, with 24 columns each having a width of 30px and a 10px margin between </li></ul><ul><li>columns. but if this is not the layout you want, you can always use a Blueprint Grid CSS </li></ul><ul><li>Generator to generate a custom grid layout. </li></ul><ul><li> </li></ul>
  11. 11. Stylesheets and their uses <ul><li>Ie.css </li></ul><ul><li>We all are commonly facing problems with browser compatability,mainly with ie6 and </li></ul><ul><li>Other related advanced versions of ie.to avoid all these compatability issues this ie.css </li></ul><ul><li>file is useful. </li></ul><ul><li>Print.css </li></ul><ul><li>This file sets some default print styles, so that printed versions of your site looks better </li></ul><ul><li>Than they usually would. </li></ul><ul><li>Forms.css </li></ul><ul><li>This file provides nice looking default forms as well as classes for error notifications or </li></ul><ul><li>even flash notifications.In this file there is default styles for all input types in your website. </li></ul>
  12. 12. <ul><li>Thank You </li></ul>