Designer's Toolbox: Blank CSS Template
16 maart 2008 door chriscoyier · 11 Reacties 
Als je een redelijk aantal websites van nul ontwerp, vind je jezelf bezig met een heleboel dezelfde setup werk over en over en voorbij. Maak de map met afbeeldingen map. Maak indexbestand, schrijf content type aangifte, schrijf elementaire pagina structuur. Maak CSS-bestand, schrijf CSS-reset, schrijf elementaire CSS structuur. Alleen dat setup kunt u een behoorlijk stuk van de tijd en verdorren uw enthousiasme voor het krijgen in het vlees van uw ontwerp.
In de volgende aflevering van Designer's Toolbox, bieden wij u een manier om al die verloren tijd met een blanco CSS Template voorkomen. 
Net deze map houden op uw systeem en elke keer dat u een nieuw project, kunt u gewoon dupliceren deze map en de slag te gaan met de echte codering / ontwerpen.
Dus je weet wat je zou kunnen krijgen in, laten we eens kijken naar de HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>PAGE TITLE HERE</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="page-wrap"> </div> <!-- Put Google Analytics Code Here --> </body> </html> Zoals u kunt zien, het is heel erg eenvoudig. Net de pagina aangifte (XHTML 1.0), content type verklaring (UTF-8), pagina titel, stylesheet link, en eenvoudige structuur (body met een pagina-wrap div). Ik ook een kleine herinnering aan uw Analytics-code op de bodem, ook als u wordt het bijhouden van gegevens bezoeker op uw site.
Nu is hier de CSS:
/* AUTHOR: YOUR NAME HERE you@domain.com */ /* ------------------------------------------ */ /* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */ /* ------------------------------------------ */ * { margin: 0; padding: 0; } html { overflow-y: scroll; } body { font: 62.5% Helvetica, sans-serif; } ul { list-style: none inside; } p { font: 1.3em/1.3em; margin-bottom: 1.3em; } a { outline: none; } a img { border: none; } /* END RESET */ /* ------------------------------------------ */ /* TOOLBOX CSS */ /* ------------------------------------------ */ .floatleft { float: left; } .floatright { float: right; } .clear { clear: both; } .transpBlack { background: url(transpBlack.png); } /* END TOOLBOX */ /* ------------------------------------------ */ /* PAGE STRUCTURE */ /* ------------------------------------------ */ #page-wrap { width: 775px; margin: 0 auto; } /* END STRUCTURE */ Ook heel simpel, meestal gewoon een uitgebreide CSS Reset. The Star Selector (*) heeft de zware opheffing van de reset, maar er is een paar extra raakt te noemen. Instellen van de font-size in het lichaam tot 62,5% kun je em grootte te gebruiken, zoals je zou pixels (px) maten. 1,0 em = 10px, 1.1em = 11px, en zo verder. De overflow-y krachten een verticale schuifbalk op vele browsers te elimineren sprongen in horizontale centrering.
Er is een aantal eenvoudige "Toolbox CSS" voor zaken als drijvende, clearing, en het vullen gebieden met transparante kleur. De pagina-wrap CSS is opgenomen om naar het midden van uw pagina-inhoud.
Dit ziet er zeker als het een hoop werk bespaart. Kan worden gebruikt op Wordpress sites? Ik heb een paar projecten die op en het lijkt alsof het zou komen in het echte handig.
Voor een "kaal" template voor wordpress, check out Elliot Jay Stocks "Starkers [http://elliotjaystocks.com/blog/archive/2008/free-starkers-wordpress-theme/]" thema.
Het idee van een standaard sjabloon is goed. De manier waarop het is hier gedaan is dat niet.
Bijvoorbeeld: vertraagt de selector * rendering beneden. Ook verwijdert wilde marges en paddings van velden vormen input in bepaalde OS's / browsers, die niet kunnen worden aangebracht.
De overflow-y is ook onzin, omdat je pagina niet altijd scrollable worden, waardoor de scrollbar verouderde (en verwarrend voor sommige).
Ik heb nog zie geen harde bewijzen op de ster selector merkbaar vertragen rendering. Ik twijfel er niet dat het iets doet, omdat de ster selector letterlijk zal toepassen zelf aan elke element op de pagina. Maar ik heb ernstige twijfels dat de lichte vertraging is zelfs merkbaar op zelfs zeer complexe pagina's.
Ook is het niet de marge en opvulling worden verwijderd met de ster selector die verpesten velden standaard input, het is de grens, en zien hoe de grens hier niet is gezet. Standaard input stijlen zal intact blijven (bv de glowy knoppen in Safari of de geblokte afgeschuinde knoppen in FF of IE). Je bent juist wel dat als je strippen grens op deze manier kunnen deze standaard stijlen niet worden aangebracht.
Overflow-y is ook geen onzin. Het geldt een lege verticale schuifbalk in browsers die nog niet hebben dat (IE standaard al doet dit). Dit kan up scherm onroerend goed, indien niet af en toe nodig is, maar het elimineert de onhandige "sprong" in de horizontale centrering bij navigatie tussen een pagina met rollen en een pagina die niet.
bedankt voor de verfijnde blanco css en html-template. Deze gids zal me helpen!
Groot RES voor de website editpadders like me!
Kunt u verklaren het nut van de. TranspBlack (background: url (transpBlack.png);) denken?
Ik zie niet in waarom je zou moeten gebruiken 1.3em (~ 13px) voor de p-selectors lettergrootte. Als er iets lelijk maakt, die op oudere browsers (vooral zonder ClearType of soortgelijke functies), is het een lettertype grootte op 13.
Het is beter om te werken met even nummers, zoals 8, 10, 12, 14 en 16. Betere leesbaarheid> fancy ontwerpen. (Persoonlijke mening, en kan worden gesteld tot het einde van de tijd)
@ Frederic: Ik gebruik ook dat als een deel van mijn "gereedschapskist" CSS. Het is eigenlijk een one-pixel alpha-transparante PNG, zodat ik een transparant zwart vullen kunt toepassen op een doos zonder de Dekking attribuut te gebruiken. Dekking is groot soms, toe te passen op een element van alle krachten van het kind elementen om dekking ook. Als die kind elementen zijn tekst, dat kan een slechte zaak zijn. Op deze manier kunt u het toepassen van een transparante achtergrond en volledig ondoorzichtig tekst te houden.
@ koew: Ik was eigenlijk niet van bewust dat zelfs pixel formaten gesmolten beter .... Ik ga nog naar kunnen kijken.
opmerkingen koew over de lelijkheid van lettertypen op oneven pixelgrootte is een geldige een gebaseerd op mijn eigen ervaring met oudere browsers op oudere platformen.
Misschien ben ik vast in een Timewarp, maar ik voel me nog steeds de noodzaak om zelfs pixel grootte te gebruiken, vooral bij kleinere eind van de schaal.
Anders dan dat ik denk dat dit een zeer nuttig sjabloon en ik vind uw CSS-Tricks site een uitstekend lezen. Bedankt Chris.
Sante
Dank u voor uw geweldige idee om te voorkomen dat veel fouten en tijd verspillen met een standaard xhtml en css-template ...
Ik zou denken over dit idee voor mijn webprojecten, ook
Ralph
Chris - Ik ben met u over de universele selector kwestie. Ik ben niet van overtuigd dat het allemaal zo slecht, en ik nog steeds op grote schaal gebruik het zonder problemen.