Scribd
Upload
117 views10 pages

Advanced CSS: Layout: by Syeda Roshni Ahmed

This document discusses CSS frameworks and grid systems. It explains that CSS frameworks provide pre-built CSS classes and tools to make working with CSS easier. There are two main types of CSS frameworks - grid systems and CSS preprocessors. Grid systems make it easier to create multi-column layouts using predefined grid structures. CSS preprocessors allow developers to write CSS code that takes advantage of programming concepts like variables, inheritance, and functions to avoid duplication.

Uploaded by

Ravi Shankar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
117 views10 pages

Advanced CSS: Layout: by Syeda Roshni Ahmed

This document discusses CSS frameworks and grid systems. It explains that CSS frameworks provide pre-built CSS classes and tools to make working with CSS easier. There are two main types of CSS frameworks - grid systems and CSS preprocessors. Grid systems make it easier to create multi-column layouts using predefined grid structures. CSS preprocessors allow developers to write CSS code that takes advantage of programming concepts like variables, inheritance, and functions to avoid duplication.

Uploaded by

Ravi Shankar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Advanced CSS : Layout

BY SYEDA ROSHNI AHMED


CSS Framework

•A CSS framework is a precreated set of


CSS classes or other software tools that
make it easier to use and work with CSS.
•They are two main types of CSS framework:
•Grid systems
•CSS preprocessors
Grid systems

• Grid systems make it easier to create multicolumn


layouts.
• There are many CSS grid systems; some of the most
popular are Bootstrap twitter.github.com
• /bootstrap),Blueprint (www.blueprintcss.org),
and 960 (960.gs).
• The most important of these capabilities is a grid
system.
Grid systems

• CSS frameworks provide similar grid features.


The
960 framework uses either a 12- or 16-column grid.
• Bootstrap uses a 12-column grid.
• Blueprint uses a 24-column grid.
• The grid is constructed using <div> elements with
classes defined by the framework.
• The HTML elements for the rest of your site are then
placed within these <div> elements.
Bootstrap classes
CSS preprocessor

• CSS preprocessors are tools that allow the


developer to write CSS that takes advantage of
programming ideas such as variables, inheritance,
calculations, and functions.
• A CSS preprocessor is a tool that takes code
written
in some type of preprocessed language and then
converts that code into normal CSS
• The advantage of a CSS preprocessor is that it can
provide additional functionalities that are not
available in CSS.
CSS preprocessor

•In a programming language, a developer can


use variables, nesting, functions, or
inheritance to handle duplication and avoid
•copy-and-pasting and search-and-replacing.
•CSS preprocessors such as LESS, SASS, and
Stylus provide this type of functionality.

You might also like