Artikel-Schlagworte: „CSS“

Sample Markup for CSS Authors

Freitag, 9. Oktober 2009

Have you ever written a CSS file? Have you heard about this “lorem ipsum” thing? Or do you regularly transform designs into CSS & XHTML? If you answer one of these questions with ‘yes’, then this is for you.

What is the first thing you do when it’s time to create a new CSS file? You might start from scratch with a blank CSS every time. You might use Eric Meyer’s reset.css. You might probably work with one of the numerous CSS-frameworks, such as Blueprint CSS or YAML or even use the CSS stuff from that YUI framework. You might even start with your CMS’s standard theme and adjust things from there…

One thing you might forget when you hack in the first lines of CSS (and this happens to the best of us) is to use reallife markup instead of that boring “Lorem ipsum…” designers seem to have a faible for. This is where this markup snippet comes into play: it should help you with filling your wireframe layout with some actual HTML-markup.

So just plain HTML, huh?

This snippet provides a wide range of commonly used markup, that should be supported by most rich editors (a.k.a. WYSIWYG editors).
Since every coder has his own preferences towards class names. I decided to leave out the fancy stuff you could do with classes at all, as this would force some people to spot, delete, or rename those classes afterwards, which would be counterproductive. So this is plain HTML.

Download

Since each and every CMS treats the markup you insert into its page editor differently, I decided to provide both: a version with regular HTML and one without the paragraphs for those CMS that come with their own paragrapher-functionality.
Sample Markup v0.2 (text file, 8 KB)
Sample Markup v0.2 without paragraphs (text file, 8 KB)

Some notes: the HTML-elements included in the snippet are: p, a, abbr, acronym, samp, code, pre, ol, ul, li, blockquote, cite, q, table, caption, thead, tfoot, tbody, tr, td, th, em, strong, sup, sub, div, span

That’s basically it. Just create a code snippet in your favorite editor and remember: Sample markup is the new lorem ipsum.
Am I missing something? Looking forward your improvement suggestions.

Changelog:

  • v0.2 fixed a sad error, my bad.
    additionally set up a subversion repository for these files (2010-05-05)
  • v0.1 Initial version. (2009-10-9)

Schlagworte:, , , , , , , ,
Veröffentlicht in CSS, Design, Markup | Keine Kommentare »

jQuery is fun :)

Mittwoch, 30. September 2009

Sliding Header Animation with jQuery There are probably a dozen pre-made image gallery plugins for jQuery that do the same thing, or could be hacked to do so… but actually I wanted to see how hard it is to code a scrolling header animation similar to the one i found on www.freshtilledsoil.com.
So here’s my own approach for the same thing: See the Demo here. Instead of writing proper plugins for jQuery, I actually got used to writing global Javascript functions. Although these may or may not use jQuery functionality themselves and mostly do project-specific stuff - it’s not really reusable in the next project. So hacking together a jQuery plugin would be mandatory. That said, this is the result of that practice. Easy.

So what this does is: First, it requires you to set up a list with images and another div with links (the controls). have a wrapper div surround this. When clicking on a ‘pager’ link, it will then slide the whole list in its parent div.

Schlagworte:, , , , , ,
Veröffentlicht in CSS, Design, Entwicklung, Webwork | Keine Kommentare »

Bikubische Bildskalierung in IE6 und IE7

Donnerstag, 19. März 2009

Es gibt einen schönen, auch mir bisher unbekannten Weg die Darstellung von skalierten Bildern im IE6 und IE7 zu verhübschen:

  1. img { -ms-interpolation-mode: bicubic; }

Das ganze kann man bei css-tricks.com ansehen und nachlesen. Die Anweisung selbst ist natürlich proprietär, also außerhalb der CSS-Standards. Der Vollständigkeit halber sollte man (vielleicht) auch noch anmerken, dass Bilder, die man über die Attribute width und height skaliert suboptimal sind, da sie mehr Ressourcen verbrauchenals nötig - ein letztes Mittel, wenns mal schnell gehen muss, sozusagen.
(via IlT)

Schlagworte:, , , ,
Veröffentlicht in CSS, Software | Keine Kommentare »