├── Readme.md
└── wtfcfh.css


/Readme.md:
--------------------------------------------------------------------------------
 1 | # Das Framework WTFCFH 
 2 | 
 3 | (What The Fuck, Client From Hell)
 4 | 
 5 | Das kundenorientierte CSS-Framework WTFCFH (**What The Fuck, Client From Hell**) passt sich den Sprachregelungen unserer Kunden an. Seine Stärke sind kunden-semantische Klassennamen. Der besseren Lesbarkeit wegen nutzen wir CamelCase. 
 6 | 
 7 | Als Erweiterung gibt es ausserdem Designer-affine Klassennamen.
 8 | 
 9 | Das Framework liefert keine fertigen Lösungen, sondern Namenskonventionen, die den Umgang mit den entstehenden Codemonstern während der Projektphase leichter handhaben lassen.
10 | 
11 | WTFCFH ist eine Sammlung an Best Practices aus der täglichen Arbeit von [Jens Grochtdreis](https://twitter.com/flocke), [Nils Pooker](https://twitter.com/pookerman) und [Marc Hinse](https://twitter.com/mademyday). Aber auch aus fremden Projekten wurden Anregungen genommen. Die Klasse ``.ichWaerGernEineUeberschriftDarfAberNicht-h2`` basiert beispielsweise auf der Arbeit der Entwickler bei [Stern.de](http://stern.de):
12 | 
13 | 	<div class="boxContent">
14 | 	  <a class="h2" href="#" title="Das soll eigentlich eine Überschrift sein, aber der SEO-Berater hat es verboten!">
15 | 	    <span>Das ist eine Tagline</span>
16 | 	    <span class="boxHeadline">Hier kommt die eigentliche Überschrift</span>
17 | 	  </a>
18 | 	  <p>Es folgt der Anreisser mit dem unauslöschlichen <a href="#">mehr...</a> Link.</p>
19 | 	</div>
20 | 
21 | 


--------------------------------------------------------------------------------
/wtfcfh.css:
--------------------------------------------------------------------------------
 1 | /**
 2 | * WTFCFH - CSS-Framework
 3 | * (What The Fuck, Client From Hell)
 4 | *
 5 | * @copyright © 1. April 2015, Jens Grochtdreis
 6 | * @license CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
 7 | * @package wtfcfh
 8 | * @version 1.0.0
 9 | */
10 | 
11 | 
12 | /* ---- Feinjustierung ---- */
13 | .einHauchNachLinks {}
14 | .einTuckenNachOben {}
15 | .einWenigDunkler {}
16 | .dasMussZweiMillimeterNachOben {}
17 | .logoHauchTuckenIdeeSonstwohin {}
18 | .einWenigMehrWeissraum {}
19 | .makeMyLogoBigger {}
20 | 
21 | 
22 | /* ---- Konkretes ---- */
23 | .wirHaettenDaNochGern {}
24 | .dieRichtungGefaelltMirSchonMal {}
25 | .siehtSchonBesserAus {}
26 | .dasMussteSchnellGehenGefuddel {}
27 | .koennseMalEbenWrapper {}
28 | 
29 | 
30 | /* ---- Schriften ---- */
31 | .comicSansWuerdeHierAuchPassen {}
32 | .schriftEinenTuckenGroesser {}
33 | 
34 | 
35 | /* ---- Semantik ---- */
36 | .sowasWieUeberschriftAberAnders {}
37 | .istEineUeberschriftAberSeoWollteNicht {}
38 | .keineAhnungWelchesElementHierBesserWaerDiv {}
39 | .ichWaerGernEineUeberschriftDarfAberNicht-h2 {}
40 | .ichWaerGernEineUeberschriftDarfAberNicht-h3 {}
41 | .ichWaerGernEineUeberschriftDarfAberNicht-h4 {}
42 | 
43 | 
44 | /* ---- Inhaltliches ---- */
45 | .abHierWirdDerNutzerVerarscht {}
46 | .kastenMarketingGeblubber {}
47 | .liestEhKeineSau {}
48 | .wofuerDasGutIstWeissNurSeo {}
49 | .bullshitBingoBlaBlaButton {}
50 | 
51 | 
52 | /* ---- Responsive Webdesign ---- */
53 | .visibilityHiddenBitte {}
54 | .aua {}
55 | .grossesAua {}
56 | .MegaAua {}
57 | 
58 | 
59 | /* ---- Rudis Resterampe ---- */
60 | .wasMacheIchHierEigentlich {}
61 | .dieWegeDesHerrnSindUnergruendlichWieDieseKlasse {}
62 | .sollteManNieTun {}
63 | .extraDivFromHell {}
64 | .dannLieberTabellenlayout {}
65 | .bitteTuDasWeg {}
66 | .einTraeumsche {}
67 | .classOnElmstreet {}
68 | .unnuetzAberHaesslich {}
69 | .appleWatchDuMichAuch {}
70 | .istMistAberSieBezahlenDenDreckJa {}
71 | .werNichtHoerenWillMussFuehlenDiv {}
72 | .paragraphMitAbstandUntenAberNurWennKeinBildDazwischen {}
73 | .dasKannsteSchonSoMachenAberDannIssesHaltKacke {}
74 | 
75 | .soTeuerDasIstDochNurEineKleinigkeit {}
76 | .wiesoGehtDasNichtDasGehtInWordAuchDaMuessenSieSichMalInformieren {}
77 | .dasHattenWirGesternEntschiedenHeuteMussDasAnders {}	
78 | 
79 | /* =======================================*/
80 | /*  ========= Die Erweiterungen ======== */
81 | /* =======================================*/
82 | 	
83 | /* ---- Erweiterung "Der Designer" ---- */
84 | .designerDiv {}
85 | .dasDivMachtDenDesignerFroh {}
86 | .ichSeheWieEinButtonAusBinAberKeiner {}
87 | .istDoofAberDesignerWollteDas {}
88 | .neffeVomSchwagerWordArtClass {}
89 | .egalObGelbOderBlauHauptsacheSchwarz {}
90 | 
91 | 
92 | /* ---- Erweiterung "Suchmaschinenoptimierung" ---- */
93 | .leckoMioSeo {}
94 | .jaDasWolltenDieSo {}
95 | .gottUndGoogleSehenDasNichtGern {}
96 | .performancePerduGlueckwunsch {}
97 | 	


--------------------------------------------------------------------------------