janz, janz fiese CSShack

Cascading_Style_Sheets sind Formatbeschreibungen für (hauptsächlich) Webseiten. Eine normale (richtige) Webseite sollte logisch aufgebaut sein (der ganze h1, strong kram). Das sieht erst mal aus wie die homepages von Matheprofessoren, meist recht eintönig. Hier kommt css ins Spiel, css gibt dem browser Anweisung welchen Absatz er wohin stellen soll und mit welcher Schrift und Farbe die Überschrift hervorgehoben werden soll. Kurz gesagt: css verbindet das design mit der Webseite. {DIV(align=>left, width=>25%, float=>right, class="umijabox")}{DIV} Ich will hier gar nicht das 1000 howto für .css aufstellen (da gibt es wesentlich fähigerer Koryphäen) sondern eigentlich nur auf die wirklich guten verlinken und aufzählen was mir am wichtigsten ist.

Grundsätzlich kann man css erst mal auf mit dem Wikibook CSS lernen. Das Standardnachschlagewerk für alle css Referenzen ist selfhtml.org.

Vor allem werkeln steht natürlich der Entwurf, mit diesem kann man sich dann ans Werk machen.

Frameworks

Auch CSS braucht man nicht alles von vorne machen. Es gibt Frameworks die einem die Arbeit abnehmen. Den nicht jede Seite oder Anwendung muss wieder buttons, menues oder gar grids bauen. Mit Responsive Webdesign ist das ganze nochmal schwieriger. Jetzt gibt es zahlreiche front-end-frameworks, die unterschiedliche Leute mit unterschiedlicher Zielsetzung zusammengestellt haben. Und das artet schon wieder in einen Idiologie- und Feature Krieg aus. Good old YAML, gegen die Poser von bootstrap, gegen foundation Häretiker und 1000 andere KISSstyler die sich wieder am besten finden. Dabei machen sich alle gute Gedanken, aber eben unterschiedlich. Wenn ich dann ein framework einsetzen will muss ich mich dann wohl oder übel für eine Seite entscheiden und alles in einem Framework nehmen was drin ist. Aber es wäre besser ich könnte einzeln Module aus einzelnen Frameworks auswählen, denn wenn ich keine iconfonts brauche, dann will ich die auch gar nicht laden müssen

Um markdown einsetzen zu können wäre es gut, die ansprechende class außerhalb von standard HTML-Elementen setzen zu können: nicht ''ul class="menu", denn da kommt man mit markdown nicht rein, sondern ''div class='pure-menu pure-menu-open...'' wie bei z.B. purecss.io.

Fast immer

Was braucht man immer:

  • Reset-Stylesheet, am besten ein einfaches
  • ein grid hilft Spalten sauber anzulegen und kümmert sich in responsive design um umbrechen von Spalten auf kleinen Displays. grids braucht man für Template-elemente wie sidebars, aber auch im Content Bereich. Es gibt individuelles Gridsystems, columnnamed (z.B.''col_11'') oder gridbuilder. Hat man weder sidbars noch contentspalten, kann man sich das grid auch sparen:
  • wenn man nur ein mittel panel (maximale breite) hat und darin selbstfliessenden text
  • Für 2 spaltige key value Tabellen (z.B. Datum-Termin, FAQ etc Assoziatives Datenfeld ist eine einzeilige definition-lists, die bei kleinen displays auf 2 zelige schlaten, vielleicht besser.
  • typography hilft auch wenn man sich an ein strenges Designhalten muss, den welcher Designer gibt einem schon z.B. die Abstände von direkt aufeinander folgenden headings (''h2 + h3'' etc) vor.
  • Helpers: classen wie ''left'', ''hide''

Optional

  • Navigation links, oben quer und auf mobile per menutoggler.
  • iconfonts: fontawesome ist nicht alles, weloveiconfonts.com hat sie (fast;) alle
  • buttons und tooltips: braucht man nie, ausser wenn man sie braucht, dann ist man froh wenn man passende hat.
  • forms: gilt das gleiche, wenn man sie hat ist man froh, sonst nicht
  • JS Animationen wie Accordion oder tabs
  • slideshows etc: wenn ich ein fancybox will, dann binde ich die mir ein. Aber eben nur dann. Wenn ich eine Galerie will, dann bauch ich mir die ein die meine Anforderungen entspricht (thumbs, autoplay, cropping )
  • hashmanagement z.B. hashsplit
  • alerts und meldungen

Speziell

Dinge die gern einzeln zusammen bauen möchte:

builder

Ich will kein 'one and only all mighty framework', sondern sowas wie die Unix-Philosophie, kleine Module "dass sie nur eine Aufgabe erledigen und diese gut machen....., dass sie zusammenarbeiten.".

jsdelivr.com liefert nicht nur framworks mit sehr schnellen CDNs aus, sondern pakt die Datein auch zusammen ''//cdn.jsdelivr.net/g/jquery@2.1.0,99lime@0.94,jquery.sticky-kit@1.0.0''

Tables

Ach ja noch was: Tabellen sind ein Container für Daten in einer Matrix, kein Designgrundbaustein. (flo sagt: tabellen sind tabellen sind tabellen)

Wenn man aber mal doch was links und rechts anordnen muss: * große Proportionen (Menuespalten, TOCs, etc) in divs verpasst und gefloatet: Layoutentwurf 3col_fixed_seo * tabellen__artige__ Dinge mit 2 Spalten (Lebenslauf, Preisliste, etc) am besten in dl und auch horizontal floaten.

Erscheinung

Backgroundbild

Mit dem Hintergrund kann man sehr viel machen. Er wirkt quasi wie wenn man einen Liebesbrief entweder auf Karoausdemblockgerissen-Papier oder auf parfümierten Büttenpapier schreibt. Eine einfache Variante ist es dem Textinhalt eine anständige Schrift, ein bisschen Proportion zu geben und dann den ganzen superblingblingdesignkram raus aus dem photoshop oder gimp und ab in den Hintergrund.

Braucht man eine Fläche mit einem waagerechten oder senkrechten Strich, macht man die Fläche mit background-color und mit einem farbigen png-pixel das x oder y repeated und background-positioniert wird.

icons

icons helfen vor allem bei links dem Auge recht gut anzuzeigen wo es hingehen soll. Mit css kann man icons ohne überflüssige und aufwändige html-Elemente einbauen.

data2css

Die Möglichkeiten sind riesen groß und ermöglichen es strukturierte Daten darzustellen. Allerdings nur wen man diese sich auch identifizieren und damit ansteuern lassen. Definiert man nun das grundsätzliche Element body und alle links mit einer identifizierenden Klasse oder ID, kann fast jeder Inhalt auf einer Seite kaskadierend von dieser aus angesteuert werde. data2css

Print

Zwar kann man auf dem Bildschirm doch so einiges machen, an ein printcss stellen sich aber dann wieder ganz andere Ansprüche. * Den ganzen Navikram, den man auf dem Papier eh net brauchen kann erst mal weg displayen: ( display: none ) * Seitenumbrüche, Schusterjungen und Hurenkinder: de.selfhtml.org - Layouts für Printmedien * Da man auf dem Papier net klicken kann kann man optional Links ausgeschrieben darstellen. link? * Serifen wirken auf dem Bildschirm nicht, beim print sind sie aber hilfreich, so kann man jetzt umstellen.

style-sheets.de - Print-Stylesheets Einführung

IEx

Auch wenn CSS sehr oft Spaß macht, vergiss nie am Schluss kommt immer der IE check. Und der nervt, da er meist nochmal soviel Zeit kostet. Also erst mal mit dem box modell auseinandersetzen oder ein javascript CSS Browser Selector (wobei ich meine: nääähhh).neben vielen Andern werden Conditional Comments empfohlen.

Und dann mit browsershots.org (alle browser, aber langsam) oder netrenderer (nur IE aber fix) per screenshot testen.

Vorlage

Da man nicht alles neu erfinden soll und kann empfiehlt es sich ein fertiges Theme zu verwenden. Inzwischen nutze ich meist Skeleton das es für WordPress, Drupal und als eigenständige Version gibt.

Grundsätzlich empfiehlt sich immer der Eric Meyer CSS Reset

Wie in css-icons erwähnt nutze ich diese gleich für ul ol, daher schalte ich auch den list-style ab.

Das "berühmte" Klappmenu kann man sehr einfach auch ohne JS machen. {CODE()} .menu_top li ul { / klappmenu / display: none; } .menu_top ul li:hover > ul { position: absolute; display: block; } .menu_top li ul li { display: block; }

Designs

Sammlung von designvorlagen oder Teilen die man mal brauchen könnte: * 20060216 evtl Vorlage

heros

Manchmal findet man da draußen Seiten die einfach wunderschönes CSS haben: * Mit dem csszengarden versteht man schnell was man mit css alles machen kann. * ... and than fall in love with CSS. * robert.o-rourke.org gewinnt jetzt nicht unbedingt einen designpreis, aber technisch sehr schön. * AMAZING X-RAY EFFECT MADE WITH CSS AND XHTM

Weblinks