CSS Framework By Nyros Developer
Upcoming SlideShare
Loading in...5

CSS Framework By Nyros Developer



CSS Framework By Nyros Developer

CSS Framework By Nyros Developer



Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

CSS Framework By Nyros Developer CSS Framework By Nyros Developer Presentation Transcript

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