Can anyone tell me about CSS frameworks, and how to use them?
From Wikipedia:
A CSS framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML . They provide a number of ready-made options for designing and laying out the web page. While many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is appropriate to each published site without the design, maintenance and download overhead of having many unused features in the site's styling.[29]
There is a lot of material on SO (which framework to use, whether to use one at all....)
CSS frameworks are just CSS files. They provide pre-written CSS that you apply to your HTML by using the class names defined by the framework in its CSS file.
Some frameworks are focused on one particular task, e.g. page layout. 960.gs is a good example of this.
Some frameworks are more extensive, and include pre-written CSS for typography, form layout, print styles etc. Blueprint is a good example of this.
Some frameworks also include reset styles, which attempt to reset all styles for all HTML elements to very neutral defaults. These are automatically applied to all HTML elements, so you don’t add classes to your HTML to apply them. A lot of them are based on Eric Meyer’s CSS reset.
CSS frameworks address some or all of the following aspects:
Browser reset. This brings all browsers back to the same baseline styles so that you don't get surprised by something rendering differently in different browsers.
Layouts. They can provide pre-prepared styles that allow you to achieve certain layouts in a simple way. These include columns and also grid layout techniques.
Design. Some provide colour schemes, font selections, typography (line spacings etc.) to quickly give your page an appealing design.
Important to realize that you can mix and match - as long as you're careful.
For instance I don't particularly like YUI's Grid framework (not flexible enough for what I need) - and I don't particularly like Blueprint's typography (because I don't understand what it's doing and I think it's trying to do too much).
So I'm using YUI CSS Reset with YUI Typography and Blueprint grids !
CSS framework is a "wrapper" for all the styles and layouts on your Mark-Up (HTML etc) pages.
An example would be: http://www.blueprintcss.org/
Predefined functionality that has been created intended to serve as a guide for building of something useful.
There different frameworks with different functionality often a (programming tools)layered structure indicating what kind of functionality can be built and how they would work.
CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language.
For more info on how to use each framework, please consult the official documentation of that framework.
Examples of popular CSS frameworks :
960 Grid System
Blueprint
Bootstrap
Cardinal
Cascade Framework
Chopstick
Columnal
Emastic
Floatz
Fluidable
Foundation
Gumby Framework
Ink
Jaidee Framework
KNACSS
Kube
Kule CSS Lazy
Malo
Pure
Responsive Grid System
Semantic UI
Skeleton
uikit
Unsemantic
YAML
Yet Another CSS Grid System
YUI CSS grids
Zass
Related
All guides and video tutorials just show how easy and fast it is to achieve the styling using Tailwind CSS, none of them explain why they apply those classes or choose a nested <div> tag.
Take the first Banner template in below URL as an example, https://tailwindui.com/components/marketing/elements/banners Why a simple Banner has so many nested tag ? can not they be combined into 1 or 2 <div> tags to make it much simpler and easy to read/maintain ? I just do not understand why ?
Since Tailwind is a utility framework that essentially maps 1-to-1 to vanilla CSS, understanding why they are applying certain Tailwind classes is the same as understanding the underlying CSS rules.
I would highly recommend learning to create websites using just plain HTML/CSS, and not worry about using Tailwind or other frameworks. Gaining a solid understanding of how HTML/CSS works will make it a lot easier to learn to use Tailwind and see its strengths and weaknesses.
Web.dev has a great course on CSS fundamentals as well as MDN. There are also plenty of other resources online that can meet you where you are.
Will amp-story work fully with Normalize.css and Basscss? I ask because AMP Start is built on top of these two existing open-source projects:
https://www.ampstart.com/howitworks
Normalize.css
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. This provides a clean slate to define clear and consistent styles for AMP Start across devices.
Basscss
AMP start is built using Basscss, a low level CSS toolkit. Basscss is a very light weight toolkit, that provides lots of CSS utility classes help us do things like layouts, responsive Grids etc, without having to write any custom css.
Basscss was out-of-the-box lean and responsive, which was important for AMP Start. We used Basscss as the base (sans addons) but we removed any instances of “!important” from CSS rules because "!important" is incompatible with AMP. By using the existing Basscss classes, we were able to write a lot less CSS and still make great looking pages, even with AMP’s 50Kb CSS limitation.
On top of the foundation provided by these two projects, we added a set of more opinionated styles to the CSS, so that the components and templates would inherit a consistent look for AMP Start.
All told, the CSS takes up less than half of the 50kB quota in AMP, so you should have plenty of room to customize your pages with Basscss and AMP Start classes.
Yes, these both result in plain CSS, which can be used in amp-story. Like all AMP documents, the CSS will need to be inlined, in the <style amp-custom> block.
See the "Add styles to a page" section of the AMP Style & layout documentation.
I were looking for a CSS Framework to help me built website, when I struck with Compass.
Now, while I understand what a CSS Framework is, I don't understand what's a CSS Authoring Framework.
Expecially, I don't understand if it "replaces" a CSS Framework (like blueprint) or you should use it with a CSS Framework.
I'm building a website using Ruby On Rails, and I use SASS but no CSS Frameworks at the moment. If anyone can point me in right direction after answering the question, it will be really appreciated.
Edit 1:
Also, which is the difference between a CSS Framework and a CSS Authoring Framework
A CSS Framework is (in most cases) a fixed set of basic CSS definitions.
f.e. it brings definitions for some classes which make a basic div-based HTML-layout usable for different screen-widths. (aka liquid layout)
A CSS Authoring Framework (in meaning of Compass) brings no fixed set of CSS definitions. In opposite to a standard CSS Framework, it helps to write CSS rules with various helpers - but you have to write almost every CSS definition by your own. Some examples for helpers: Compass helps you to fix some common browser issues (IE floats ..). And you can create CSS sprites from existing images with all the CSS definitions on the fly.
You can write your own CSS Framework with the help of a CSS Authoring Framework, or you can simple build on top of a existing CSS Framework.
CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language.
Layout-grid-related CSS frameworks include Bootstrap, Blueprint, 960 grid, YUI CSS, and other grids.
Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML .
They provide a number of ready-made options for designing and laying out the web page. While many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is appropriate to each published site without the design, maintenance and download overhead of having many unused features in the site's styling.
Somehow, CSS framework == CSS Authoring framework
Please tell me the difference between CSS Frameworks and CSS Grids.
CSS Framework can also be CSS Grid Framework. CSS Grid Frameworks are used for building CSS Layout. There are some frameworks who have other purpose then building layouts, example Hartija http://code.google.com/p/hartija/ is build for web printing.
Also the word "Framework" or "CSS Framework" is not precisely defined, there is one part of the CSS Community who believes that CSS Framework can be only CSS Layout system and the other part refers to any CSS Library.
CSS Grid is specification (set of rules which browser has to follow and understand). It's like a language between you and browser.
CSS Framework is like a wrapper, which includes set of specification,like CSS Grids, Flexbox, CSS2/3 and so on, which provide additional features.
For example: build a layout by grid. CSS Frameworks have own syntax, but actually it's just syntax sugar, which uses CSS specification the the code anyway.
If I prefer semantic naming then shouldn't i use any CSS Framework and grid approach?
Which approach is better Grid or Freehand?
Is any CSS Frameworks really can save time and make semantic code even for Experienced CSS developer?
Many CSS Frameworksd are popular in static PSD 2 XHTML+CSS conversion and in wordpress/drupal/joomla theme development.
Can we make CSS XHTML development as faster as with CSS frameworks but without using CSS Grid Frameworks?
What makes development with CSS frameworks faster which we can't do without frameworks?
Semantically named classes are a particular pet-peeve of mine, so the approach I adopted was using 960 Grid System and Sass. The grid system reduces the time I spend creating the layout while Sass allows me to simulate inheritance by using mixins. Something like:
=grid_19
width: 750px;
#main-content
+grid_19
In this example, #main-content inherits the properties of .grid_19, it's a div with 750px of width (19 columns) with a semantic id. Sure I had to adapt the grid system's CSS to use it with Sass, but once it was made I can reuse its declarations without having to use its non-semantic class names.
I didn't tried any other CSS framework or grid system. I prefer grid systems over doing it by freehand because it's easier and faster. What makes development with CSS frameworks faster? Well, it's already done. I don't need to reinvent the weel. :)