CSS - Baukasten

Ziel des Abschnittes CSS-Baukasten ist es verschiedene CSS-Skripte vorzuhalten, die für verschiedene Projekte eingesetzt werden können.

Standard Layouts

Typo3 Standard-CSS mit YUI

CSS-Grid Systeme

Links

http://www.tripwiremagazine.com/2009/06/45-css-grid-systems-layout-generators-and-tutorials-that-every-designer-should-know.html

hiervon sind die engl. Beschreibungen

1140 grid

• optimiert für 1280px
• skaliert bei kleineren Bildschirmen (inkl. Bilder)
• css3 queries sorgen dafür, daß es bei smartphones funktioniert

http://cssgrid.net/

960gs

CSS Framework that worth a look. The download includes templates for Fireworks, Photoshops, Inkscape and etc. so that you can start designing your web template immediately. The PSD file that comes with guides ready save designers a lot of time.

Blueprint

Blueprint: A CSS Framework

Blueprint includes a CSS reset that eliminates the discrepancies across different browsers. There are a lot of external tools and templates to aid your web development with Blueprint. See some live Demos http://www.blueprintcss.org/tests/

YAML

YAML is another bulletproof CSS Framework that has a very good documentation. You can easily get started by downloading the PDF documentation and the sample project from the official site. There are some tools that will help you on your development too. For example, the YAML Builder can visually create YAML-based CSS layouts.

Tripoli Framework

Tripoli had been tested and supports virtually all available browsers, including IE5! It comes with some base files, and some plugins such as “Layout”, “Visual”, “Type”, and “Negative”. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind.

Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

BlueTrip

BlueTrip is a full featured and beautiful framework that combines advantages from different CSS Framework. The official site has a complete Documentation and Demos.

Blueprint: A CSS Framework

Blueprint includes a CSS reset that eliminates the discrepancies across different browsers. There are a lot of external tools and templates to aid your web development with Blueprint. See some live Demos

960 Grid System

CSS Framework that worth a look. The download includes templates for Fireworks, Photoshops, Inkscape and etc. so that you can start designing your web template immediately. The PSD file that comes with guides ready save designers a lot of time.

Tripoli Framework

Tripoli had been tested and supports virtually all available browsers, including IE5! It comes with some base files, and some plugins such as “Layout”, “Visual”, “Type”, and “Negative”. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind.

Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

YAML – Yet Another Multicolumn Layout

YAML is another bulletproof CSS Framework that has a very good documentation. You can easily get started by downloading the PDF documentation and the sample project from the official site. There are some tools that will help you on your development too. For example, the YAML Builder can visually create YAML-based CSS layouts.

BlueTrip

BlueTrip is a full featured and beautiful framework that combines advantages from different CSS Framework. The official site has a complete Documentation and Demos.

YUI Grid CSS

YUI Grids CSS support fluid-width layouts as well as fixed-width layouts. This is the advantage of YUI Grids CSS over the other CSS Frameworks. To get started with YUI Grids CSS, you can download the cheat sheet and YUI Grids Builder from the official site.

Elastic CSS Framework

Elastic provides a declarative language to define the layout structure and behavior. This is a young framework, and the best site to demo the usage of Elastic is the official site itself. The Elastic CSS Framework has a lot of classes and helpers that will aid in the process of webdesign.

SenCSS

SenCSS doesn’t include a layout system, but it does provide other things such as baseline, fonts, paddings, margins and more. It comes with a commented version and a minified version which suitable for production use.

The Golden Grid

The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites.

Content With Style

This is a fixed width layout and the zip files contains a few layouts such as vertical navigation with 1 content column, vertical navigation with 2 content columns, and etc.

CSS-boilerplate

As one of the original authors of Blueprint CSS I’ve decided to re-factor my ideas into a stripped down framework which provides the bare essentials to begin any project. This framework will be lite and strive not to suggest un-semantic naming conventions. You’re the designer and your craft is important.

Typogridphy

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.

Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS.

Logicss

The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates.

   * Common cross-browser rendering behavior approach (not a reset).
   * Beautiful font stacks.
   * Typography with text resizing capabilities and vertical baseline/rhythm.
   * Three totally flexible layout grid templates, customizable with the toolset.
         o Elastic layout using EMs.
         o Liquid layout with percentages.
         o Fixed layout using pixel dimensions.

Bausteine für die CSS - Navigation

ToDo Bilder machen

Tipp ein umschließendes Div mit Klassen wie .nav-v, .nav-h etc. um die Code-Schnipsel leicht einbinden zu können

CSS-Navigation: Vertikale Liste

Beispiel 1 (basierend auf TYPO3)

.nav-v {

	float:left;
	margin:0 0 0 -50px;
	padding:0;
}
.nav-v #nav-sub{

}
.nav-v ul {
/*padding:0 0 10px 0;*/
/*ie8..*/
float: left;
width:180px;
background: url("../media/nav-divider.png");
background-repeat: no-repeat;
background-position: bottom;
/*padding-bottom: 1px;*/
font-size: 12px;
}

.nav-v li.first{
	
}

.nav-v li {
	background: url("../media/nav-divider.png");
	background-repeat: no-repeat;
	font-weight:normal;
	list-style-position:outside;
	margin: 0;
	padding: 0;
	/* ie8 */
	width:180px;
	float: left;
}

.nav-v li.last {
margin-bottom: 1px;
}

.nav-v li a {
display:block;
height: 23px;
line-height:23px;
text-decoration:none;
}


.nav-v li a, 
.nav-v li a{
color: #333;
}

.nav-v li a:hover,
.nav-v li.cur a,
.nav-v li.act a
{
color: #FFF;
background: url("../media/bg-over.png");
background-repeat: no-repeat;
background-position: 0 1px;
}

/* Level 2 */
.nav-v ul ul{
	padding: 0;
}
.nav-v li li {
	display: inline;
	font-size:11px;
	/* ie8 */
	border-bottom: 0px; 
	
}
.nav-v li li a{
	border-top: 1px dotted #e4e5e6;
	background:#014674;
	height: 24px;
	line-height: 24px;
}

.nav-v li.act li a,
.nav-v li.cur li a{
	color:#e4e5e6;
}

.nav-v li li a:hover, 
.nav-v li li.cur a:visited,
.nav-v li li.cur a:link
{
	color: #FFF;
}
.nav-v li li.act a:visited,
.nav-v li li.act a:link{
	
}

.nav-v li li.act {
}
.nav-v li li.act a:link, 
.nav-v li li.act a:visited {
}

CSS-Navigation: Horizontale Liste

Beispiel

CSS-Navi: Verschachtelte Rollover Liste

aus: http://css.maxdesign.com.au/

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

CSS
#navcontainer { margin-left: 30px; }

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0 0 1px 0; }

#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #fff;
background-color: #036;
text-decoration: none;
}

#navcontainer a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}

#navcontainer ul ul li { margin: 0 0 1px 0; }

#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #fff;
background-color: #369;
text-decoration: none;
}

#navcontainer ul ul a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}


ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.

In Anlehnukng an YAML werden die Dateien möglichst Modular vorgehalten und über ein Zentrales Sylesheet eingebunden

Konzept-Richtlinien

ToDo - evt. verwerfen erhalten bleibt das Konzept BAukastenmäßig das CSS zu verteilen. Evt. so daß man für sich funkionsfähige Skripte macht und diese durch einen Div Wrap später auf den Bereich beschränkt wo sie eingesetzt werden.

Struktur

/main.css ToDo

Zentrales Stylesheet base.css

Hier werden die verschiedenen benötigten Dateien eingebunden und einige Grundeinstellungen definiert. In einer späteren Ausbaustufe werden diese evt. ebenfalls ausgelagert In Typo3 Projekten könnten die CSS-Dateien auch über TypoScript eingebunden werden dann entfällt die base.css

/* 
### "CSS-Baukasten (c)2006 Stephan Schlegel" ###
### Version: 0.1
### Datei       : base.css
### Funktion    : Zentrales Stylesheet, Grundeinstellungen + Einbindung der CSS-Module
*/

@import url(main/base.css);
@import url(mods/basemod.css);
@import url(mods/basemod_layout_xcol_xyz.css);
@import url(navi/nav_slidingdoor.css);
@import url(main/content.css);
@import url(print/print_003.css);