Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5/CSS3 classless framework

Tags:

html

css

Does anyone know of a simple HTML5/CSS3 framework which applies a minimum of formatting with no need for custom class names? Ideally it would take only properly laid-out HTML5, and would position elements with a minimum of flexibility, using common rules for, say sidebar widths and the like.

With HTML5 there much less need for custom class names, with elements like header, nav or aside, but I haven't yet seen a framwork taking full advantage of that. Any ideas?

Clarification: I've been through all the usual suspects (Bootstrap, HTML% Boilerplate, Shim and the like), and none of them scratches my itch. And that itch is a simple combo of plain HTML5 structure which assumes nothing about the design but defines everything semantically, with a simple CSS3 stylesheet which defines the actual layout. I can envision it using several stylesheets, with a base one defining the layout of elements and separate one(s) for actual design. It would be used as a simple starting point for various projects, which could be later customized individually.

Apparently, I might need to go the way proposed by Wesley and write one myself...

like image 960
Berislav Lopac Avatar asked Jun 19 '12 19:06

Berislav Lopac


People also ask

What is classless CSS?

"Classless" means a style sheet does not define special classes you must add to your HTML elements to style these elements. As a result, you can style any plain-HTML page just by linking to the style sheet. This is useful, for example, in prototyping.

What is framework in HTML and CSS?

With a CSS framework, the user has a completed CSS stylesheet, and they only have to code the HTML with accurate classes, structure, and IDs to set up a web page. The framework already has classes built-in for common website elements – footer, slider, navigation bar, hamburger menu, column-based layouts, etc.

What is an example of a CSS framework?

Two notable and widely used examples are Bootstrap and Foundation. CSS frameworks offer different modules and tools: reset style sheet. grid especially for responsive web design.


2 Answers

There's a good list of classless and classlight CSS themes over at https://github.com/dbohdan/classless-css, complete with screenshots! Also, you can preview several different themes using the dropdown on https://dohliam.github.io/dropin-minimal-css/, nice to see what each of them look like.

like image 189
weiji14 Avatar answered Oct 20 '22 00:10

weiji14


It sounds like what you want is not a CSS framework, but just a simple custom stylesheet.

Not to discourage your effort in looking for something that already exists, but you're better off writing it yourself. Perhaps start off with one of the many existing reset.css. Default styles without the ability to hook in (or out) via class names are not very flexible.

You really shouldn't avoid classes, you should take advantage of them. No framework is going to know where and how your HTML elements are nested or what they're supposed to look like based on tag name alone, that's one reason why we usually use classes.

If you pay close attention to the semantics of the new HTML5 elements, you'll see that header doesn't always mean "the top of your page with your logo", footer is not just an element for the bottom of your whole page, and aside doesn't always equate to "sidebar".

like image 20
Wesley Murch Avatar answered Oct 20 '22 01:10

Wesley Murch