De 960 Grid System Toolbox & bronnen
Het 960-rastersysteem is door Nathan Smith ontworpen als een manier om de webontwikkelingsworkflow te stroomlijnen door veelgebruikte dimensies te bieden, gebaseerd op een breedte van 960 pixels.
De 960.gs (of een CSS-raamwerk) was in de eerste plaats ontwikkeld voor rapid prototyping, het verminderen van repetitieve en vervelende taken, maar is ook meer dan geschikt om voor elk webontwerpproject te worden gebruikt.
Het geeft uw site een gestructureerde en solide basis waarop u uw ontwerp kunt bouwen en vormgeven.
In dit artikel vind je tutorials, een showcase van sites die zijn ontworpen met behulp van de 960.gs, spin-offs, eenvoudige WP-thema's die zijn gebouwd op de 960.gs en mogelijke alternatieve frameworks, als je om wat voor reden dan ook niet van het 960-raster houdt. systeem.
Binnen het downloadpakket zijn er afdrukbare schetsbladen, ontwerplay-outs en een CSS-bestand met identieke metingen.
U hebt twee sjablonen, een raster van 12 kolommen verdeeld in gedeelten van 60 px en een raster van 16 kolommen verdeeld in 40 px. Elke kolom heeft links en rechts 10 pixels marges, die 20 pixel brede goten tussen kolommen vormen.
Startpagina : 960.gs Homepage .
Downloaden: Download de 960.gs .
Demo: Bekijk de demo-pagina van 960.gs .
960.gs zelfstudies
960 CSS Framework - Leer de basisprincipes
Dit is een geweldige basiscursus om je op weg te helpen, geschreven door Stefan Vervoort van divitodesign. Je wordt door de basis van het laden van het framework gehaald, zodat je snel kunt beginnen met het ontwikkelen van 960.gs.
Werken met 960.gs
Nog een tutorial die je meeneemt door de basisprincipes van het installeren van de 960.gs, met name handig voor de uitgedaagde CSS.
Een gedetailleerde kijk op het 960 CSS Framework
Zodra u van de gelegenheid gebruik maakt om wat tijd met 960.gs door te brengen, zult u versteld staan hoeveel tijd mogelijk kan worden bespaard bij het ontwikkelen van uw webprojecten.
Prototyping met het Grid 960 CSS Framework
Dit artikel behandelt het hele proces van prototypen, het verklaart de basis van Grid 960, het rooster plannen voor een ontwerp en het prototype coderen. Zo snel als dat.
Bouw een krantenthema met WP_Query en het 960 CSS Framework
In deze zelfstudie leer je hoe je WP_Query gebruikt om een 3-koloms krantenthema te maken met al je hoofdblogposten in de hoofdkolom en een reeks berichten uit een geselecteerde categorie. Met behulp van het 960 CSS-framework voor de lay-out en rest van het thema, wordt u getoond hoe dit uw productiviteit enorm zal versnellen.
Ontwerp een fris blogthema op het 960-raster
Deze zelfstudie leert je een blogthema in Photoshop te bespotten dat is ontworpen om te worden gebruikt binnen het 960-framework. Deze tutorial is meer ontworpen voor webdesigntheorie dan de Photoshop-techniek, maar besteedt aanzienlijk meer tijd aan ontwerptheorie en -toepassing.
960 spin-offs
Typogridphy - Een CSS-framework voor typografische en rasterlay-out
Typogridphy is een CSS-framework dat is ontworpen om webontwerpers en front-end ontwikkelaars in staat te stellen typografisch aangename grid-lay-outs snel te coderen. Hiermee kunt u rasterlay-outs maken die veelzijdig en aantrekkelijk zijn, en die strikte xHTML en CSS valideert. Het gebruikt ook een typografische methode die bekend staat als 'het creëren van verticaal ritme' , waarbij alle aangrenzende tekstregels horizontaal worden uitgelijnd, ongeacht regeleinden en nieuwe paragrafen.
Demo: Typogridphy Demo
Overture - Fluid 960 rastersysteem 1.0
Ontwikkeld door Stephen Bau uit Design7 , hij heeft een bibliotheek met veel gebruikte HTML-elementen gebouwd, deze gecombineerd met CSS voor typografie en lay-out en enkele basiseffecten toegevoegd van populaire JavaScript-bibliotheken (voornamelijk MooTools). Na het downloaden kunt u kiezen uit drie sjablonen: vaste breedte van 960 px , 12-koloms vloeistofbreedte of 16-koloms vloeistofbreedte . Deze sjablonen zijn geweldig, je moet de details zien om het te geloven.
Demo: Overture Demo .
vitrine
Alle prachtige onderstaande sites zijn gebouwd met behulp van het 960-rastersysteem:
WordPress Thema's
Net als de eigenlijke 960.gs zijn deze WP-thema's vrijwel onstabiel en met zeer eenvoudige functionaliteit, maar ze werden gebouwd met behulp van de 960.gs. Zeer nuttig voor elke WP-ontwikkelaar.
5 jaar WordPress-thema
Een eenvoudig WP-thema gebouwd met behulp van de 960.gs.
960bc WordPress Theme
Het 960bc-thema is in wezen een leeg canvas met minimale styling en geen afbeeldingen op basis van het 960-rastersysteem (alleen 12 kolommen) voor WordPress-ontwikkelaars die willen werken binnen een traditionele op rasters gebaseerde lay-out.
Mogelijke alternatieven
Het kiezen van een CSS Framework kan moeilijk zijn, als de 960.gs niet de juiste is, kun je misschien een aantal van de onderstaande frameworks proberen.
Blueprint: A CSS Framework
Blueprint is een CSS-raamwerk dat tot doel heeft om uw CSS-ontwikkelingstijd te verkorten. Het geeft je een solide basis voor CSS om je project bovenop te bouwen, met een eenvoudig te gebruiken raster, een goede typografie en zelfs een stylesheet voor afdrukken. Het is veel minder opgeblazen dan het YUI-framework en staat mogelijk op één lijn met de 960.gs qua gebruiksgemak.
CSS-Boilerplate
Van een van de auteurs van Blueprint. Hij heeft een uitgekleed raamwerk gecreëerd dat de absolute essentie biedt om met elk project te beginnen. Dit raamwerk is licht en streeft er niet naar niet-semantische naamgevingsconventies te suggereren.
Elementen - Een down-to-earth CSS-raamwerk
Het is gebouwd om ontwerpers te helpen sneller en efficiënter CSS te schrijven. Elementen gaan verder dan alleen maar een raamwerk te zijn, het is zijn eigen projectworkflow. Het heeft alles wat je nodig hebt om je project te voltooien.
WYMstyle - CSS-framework - Overzicht
Het doel van dit project is om een set goed geteste modulaire CSS-bestanden te bieden die kunnen worden gebruikt voor het snel ontwerpen van websites.
Nog een andere lay-out met meerdere kolommen | YAML
"Yet Another Multicolumn Layout" (YAML) is een (X) HTML / CSS-raamwerk voor het maken van moderne en flexibele zwevende lay-outs. De structuur is zeer veelzijdig in de programmering en absoluut toegankelijk voor eindgebruikers.
CleverCSS
CleverCSS is een kleine markup-taal voor CSS, geïnspireerd door Python, die kan worden gebruikt om een stylesheet op een schone en gestructureerde manier te bouwen. In veel opzichten is het schoner en krachtiger dan CSS2.
sparkl CSS Framework
Sparkl combineert POSH-markup, Bulletproof CSS en onopvallend JavaScript in een eenvoudig te gebruiken webontwikkelingsraamwerk dat het eenvoudig maakt om kogelvrije websites te maken die voldoen aan de webstandaarden. Het maakt gebruik van een modulair raamwerk, waardoor je kunt gebruiken wat je nodig hebt en weglaten wat je niet doet.
Het jQuery UI CSS-framework
Gebruikersinterface voor query's bevat een robuust CSS-framework dat is ontworpen voor het maken van aangepaste jQuery-widgets. Het framework bevat klassen die een breed scala aan gemeenschappelijke gebruikersinterfacebehoeften dekken en die kunnen worden gemanipuleerd met behulp van jQuery UI ThemeRoller. Door uw UI-componenten te bouwen met behulp van het jQuery UI CSS Framework, past u gedeelde markup-conventies toe en zorgt u voor gemak van code-integratie over de hele plugin-community.
Exclusief geschreven voor WDD door Paul Andrew uit Speckyboy.com
Gebruikt u de 960gs voor uw websites? Wat zijn de belangrijkste voordelen? We zouden graag van je horen…