I'm looking for a CSS framework including:
Layout and grid (like the 960.gs framework) definitions
A dropdown menu (or similar) definitions
Fonts definitions
Icons included (if possible)
OpenSource
Tested on the most common browsers (like Firefox, Chrome, IE, Safari, Opera,..)
I will create a administration system for my application written in JSF 2.0.
For now, I have template(s) which include a dropdown menu, and grid. But I would also like to have some icons and fonts. Thereby the question
Is there any "standard css frameworks" to use? Please, keep in mind that I'm more a backend programmer than a webguy, so the "reset css frameworks around" is not enough =)
Please help me, I'm totally lost in the css jungle =)
B.R
I would recommend taking a look at HTML 5 boilerplate, which you can use along with 960.gs
It's more like an HTML/css foundation for your site, and things like dropdown menus have to be implemented according to your needs, they're not something like grid systems, which are always the same in every site that uses them.
Just take a look at suckerfish and the likes - they can be added to your site easily enough.
I would definitely recommend materialize css framework. I simplifies google's polymer design ideas.
Related
Is there is any feature that enable auto switch of css files based on different browsers.
I don't want to use javascript code for browser detection and switch of css files.
As browser files in asp.net help in loading different css props for different server controls on runtime. Is there is any feature for us to use for auto switching of css files
Thanks
This would bring in a lot of overhead in development and maintenance. The typical way in supporting multiple browsers is by creating a main stylesheet for you site which covers your targeted devices. You also rely heavily on the knowledge stored in those browser files. What if the user agent string is not the actual browser visiting the site?
Use techniques such as:
Utilising vendor prefixes -webkit- -moz- etc.
Media Queries
Ensuring you use percentages as much as possible, fluid layouts.
& Lots of Trial and Error
If this is to cover older versions of IE then you can utilise IE stylesheets and IE selectors.
As described in the Holy Bible for CSS: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
I know this is not the sort of thing you looking for but I feel your going down a very bumpy and messy road.
Thanks,
Mike
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
Skeleton is made to scale to also fit mobile browsers, following the principles of responsive web design. Does Bootstrap offer the same?
Not yet - http://groups.google.com/group/twitter-bootstrap/browse_thread/thread/6db57d09f654a326?pli=1
But it will be, at some point. The Roadmap has this in for version 2.0. It's lightweight enough that in my experience you can add in your own media queries without much trouble.
EDIT - As of 1 Feb 2012, version 2.0 is out, which is responsive down to mobile out of the box.
EDIT - As of 19 Aug 2013, version 3.0 is out, which is not only responsive but takes a mobile-first approach:
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
Apparently it should support it now.
Originally built with only modern browsers in mind, Bootstrap has
evolved to include support for all major browsers (even IE7!) and,
with Bootstrap 2, tablets and smartphones, too.
Source: http://twitter.github.com/bootstrap/#grid-system
If you go to the site and resize your browser, you will se it's fitting nicely.
Yes Twitter Bootstrap's 2.0 version is based on responsive web design. look at their website: http://twitter.github.com/bootstrap/. You will have to play around with it when you download, cause the download version does not have it. You will have to rename the responsive css, best option is to look at their website and try to reverse engineer it.
Mobile-friendly has many meanings. Bootstrap is responsive, which is a mobile-friendly attribute. It's also extremely heavy (it's designed for applications) - which is not mobile-friendly, especially for websites.
The Yahoo Pure framework is about 1/10th the weight, and provides the same feature set for websites. I'd suggest something similar over Bootstrap for a mobile website.
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
I am looking for a 'one-stop' solution/tool to give a Photoshop guy who knows nothing about CSS as a means for him to choose fonts and styles that can be made as CSS.
I'm looking for something very similar to this 'CSS Font and Text Style Wizard', but that will also allow for changes to color, backgrounds, be friendly to a 'Photoshop guy' and preferably have built in styles.
Any better tools out there?
You can start with the oh-so-limited but web-safe font list and the standard CSS text decorations. Then move on to the CSS box model. You're better off learning how to "really" do it than depend on a tool
This should fit the bill: http://www.typetester.org/
The link to generate the CSS style is a bit hard to find - it's just to the right of the sample text box
Maybe http://www.blueprintcss.org/ , it's not a wizard, it's a code base which has lots of predefined values.
If he has no clue about css, I think it's better for him to have a consistent basis like blueprint or http://960.gs and overwrite only the typography and other parts he needs, with help of w3schools docs and some wizards like the one you mention.
It sounds like you want something like Microsoft Frontpage or Adobe Dreamweaver. Generating CSS styles for text only is a really narrow problem domain for a full-fledged application. Aside from perhaps some online scripts, you're not likely to find any programs designed with such a limited scope.
Like Diodeus said, anyone who's interested in doing web design should just learn some basic CSS. If 13-year-olds on Myspace can do it, than so can a "Photoshop guy." Otherwise, just get a WYSIWYG editor. That's what they're there for.
But honestly, the CSS involved in styling text is so simple & basic that if that's all you want to do, then it's hardly worth buying (or even installing) an HTML editor. There are maybe 10 commonly used tags that you need to know (if that), and they all have the same 15-20 attributes that are related to text appearance/formatting.
The web is literally overflowing with online guides & tutorials for CSS/HTML aimed at every level of programming proficiency. Anyone who spends even 2 weeks reading/following them should be able to pick up everything that you are talking about, and then some.