Snelle blauwdruk CSS-lay-out met Boks
Vandaag zullen we Boks bekijken, een geweldige kleine tool waarmee je in een mum van tijd een eenvoudige sitelay-out kunt specificeren.
We zullen doornemen wat het is en hoe u het kunt gebruiken om uw ontwikkeling te versnellen, evenals wat de beperkingen en nadelen zijn waarvan u op de hoogte wilt zijn voordat u de app downloadt.
Ontdek ontwerpbronnen
Invoering
Rastersystemen zijn een interessant beest: je houdt van ze of haat ze. Persoonlijk kan ik beide kanten van het argument zien, maar uiteindelijk heb ik er niet teveel tegen, mits je ze aanpast aan je eigen doeleinden in plaats van tonnen onaangeroerde en / of niet-semnatische code achter te laten.
Het echte probleem met rastersystemen is hoe complex ze meestal zijn. Ik heb zojuist een tutorial afgerond bij Six Revisions over het gebruik van het 960 Grid System en de opmerkingen leken unaniem omdat de meeste mensen gewoon iemand nodig hadden om uit te leggen hoe het systeem in duidelijke, gemakkelijk te begrijpen termen moest worden gebruikt. Als je merkt dat je in de war raakt door rastersystemen, lees dan zeker dat artikel.
Als vervolg wilde ik je laten zien hoe je een GUI kunt gebruiken om te creëren om echt complexe CSS- en HTML-codestructuren te maken, gebaseerd op het Blueprint CSS Framework, ongelooflijk snel. We doen dit met een AIR-applicatie genaamd Boks.
Blauwdruk
Gewoon om u te informeren, Blueprint is een gratis framework met tal van geweldige functies. Deze omvatten:
- Een CSS-reset die de verschillen tussen browsers elimineert.
- Een solide raster dat de meest complexe lay-outs kan ondersteunen.
- Typografie gebaseerd op expertprincipes die dateren van vóór het web.
- Vorm stijlen voor geweldige gebruikersinterfaces.
- Afdrukstijlen om elke webpagina klaar te maken voor papier.
- Plug-ins voor knoppen, tabbladen en sprites.
- Tools, editors en sjablonen voor elke stap in uw workflow.
Voor mijn eigen gebruik is Blueprint een beetje te groot, wat we later zullen zien. Tonnen ontwikkelaars gebruiken het echter religieus en vinden het een van de beste frameworks die er zijn.
Of je het nu leuk vindt of niet, dit is wat Boks gebruikt om code te maken. Als de Boks-ontwikkelaars dit lezen, zou ik graag een optie zien om in plaats daarvan het 1KB CSS-raster te gebruiken.
Wat is Boks?
Genoeg introductie al, wat is dit Boks ding eigenlijk? Ik kan me eerlijk gezegd niet herinneren hoe ik het oorspronkelijk vond, maar het was een van die situaties waarin je iets downloadt, het in je toepassingsmap gooit en vergeet dat het bestaat. Ik was onlangs mijn harde schijf aan het zuiveren van zulke onzin toen ik Boks voor het eerst opende en dacht "Hey dit is echt leuk!"
Zoals ik eerder zei, Boks is een AIR-applicatie, dus het zou prima moeten werken met Mac of pc.
Wat Boks doet, is een innovatieve visuele manier bieden om de structurele basisopmaak voor uw site te maken. Ik stop daar om eventuele WYSIWYG-haters te vertellen dat ik bij je ben. Als het coderen van een site helemaal opnieuw lijkt op het naderen van een leeg canvas, voelen WYSISYG's mij altijd een beetje als Paint By Number.
Ik bedoel hiermee dat ze over het algemeen veel te gestructureerd zijn en allerlei onnodige opsluitingen en complicaties toevoegen. Boks is niet een van deze applicaties . Het is zelfs niet eens iets dat u zou gebruiken om een hele site te bouwen. Het helpt je alleen om het skelet te maken waarop je je site bouwt.
Ermee beginnen
Nadat je de gratis download hebt gepakt, open je Boks en zou je de onderstaande interface moeten zien.
Hier geeft u de structuur van uw website visueel weer. Dit doen is net zo eenvoudig als klikken en slepen waar u wilt dat uw kolommen naartoe gaan. Voordat u echter iets anders doet, klikt u op de knop "Rasterinstellingen" . Hier vind je veel aanpassingsopties voor hoe Boks je pagina zal bouwen.
Onder de bovenstaande rasteropties kunt u uw paginabreedte instellen, samen met het aantal kolommen en hoe u de rugmarge en kolommen wilt verdelen. We zien al dat Boks het gebruik van een rasterraamwerk echt flexibel en veel gemakkelijker aan te passen is dan het stuk voor stuk verscheuren van de code.
In de afbeelding hierboven kun je zien dat ik alles heb ingesteld om in wezen te werken zoals de 12-koloms versie van het 960 Grid System. Dit levert me 12 kolommen op die elk 60 pixels breed zijn met een rugmarge van 20 pixels. Als u het er niet mee eens bent, voer dan hier uw eigen voorkeursconfiguratie in.
Andere instellingen
Als u doorgaat naar het volgende tabblad in het instellingenvenster, kunt u hier een aangepaste basislijn instellen voor de lettergrootte en specificeert u alle header-items die u nodig hebt.
Op de CSS- en JavaScript-tabbladen kunt u aangepaste bronnen toevoegen. Deze worden in hun eigen mappen geplaatst of aan de bestaande code toegevoegd.
Als u ten slotte iets verandert in de voorkeuren, zorg er dan voor dat u dit de exportinstellingen maakt . Er zijn hier een aantal belangrijke dingen om op te letten. Stel eerst uw paginatitel en taal in. Zorg er dan voor dat je de juiste DOCTYPE gebruikt. De standaard is XHTML, maar zoals je in het onderstaande scherm kunt zien, wordt HTML5 ondersteund, zodat je Boks nog een tijdje kunt gebruiken.
Ik raad ten zeerste aan om de optie "CSS comprimeren" uit te schakelen . Het is veel gemakkelijker om je code te doorzoeken en aan te passen als je dit doet. Anders wordt alles samen kapotgeslagen. Dit is geweldig voor de bestandsgrootte, maar ongelooflijk vervelend om te proberen te lezen.
Ten slotte, als het de eerste keer is dat je Boks gebruikt, wil je misschien de optie inschakelen om het raster weer te geven, zodat je kunt zien wat er aan de hand is. Het is duidelijk dat wanneer u dit gaat gebruiken om echte sites te maken, u die optie wilt uitschakelen.
De pagina-indeling maken
Nu we al onze instellingen hebben opgelost, is het tijd om de lay-out te maken. Om dit te doen, klikt en sleept u eenvoudig op het rastervoorbeeld om een div te maken.
Er verschijnt een rechthoek die automatisch naar de door u gemaakte rasterstructuur klikt. U kunt zoveel div's maken als u wilt door te klikken en te slepen om er meer toe te voegen. Om een div te verplaatsen, klikt u er eenmaal op en gebruikt u de pijltoetsen. Houd shift ingedrukt terwijl je de pijltoetsen gebruikt om de grootte van een div aan te passen.
Markup toevoegen
Boks bevat tal van functies waarmee u uw lay-out echt kunt aanpassen, net zoals u zou doen als u handmatig codeerde. Je kunt de div bekijken, een rand toevoegen, een voorbeeld bekijken en CSS-klassen toevoegen.
Als je zo ver wilt gaan, kun je zelfs beginnen met het stapelen van HTML-inhoud in een div. Zoals je hieronder kunt zien, typ je het gewoon in zoals je zou doen in een code-editor.
Weet u niet waar u de lay-out op dit moment mee wilt vullen? Geen probleem, je kunt het leeg laten of de ingebouwde Lorem Ipsum-generator van Bok gebruiken om wat dummy-tekst samen te voegen.
Gek worden
Zoals je in de onderstaande afbeelding kunt zien, kun je met Boks lay-outs maken die zo complex zijn als je nodig hebt . De onderstaande lay-out heeft een navigatiegebied, een zijbalk, een inhoudsgebied en een voettekst. Het inhoudsgebied bevat meerdere andere div's die binnenin zijn genest en in afzonderlijke kolommen zijn opgesplitst.
Dit nam letterlijk ongeveer dertig seconden in beslag en kan u dus in de beginfase van de bouw van de site tonnen vooraf coderingstijd besparen.
Geen hoogte?
Zoals ik al zei, is het niet de bedoeling dat Boks hele websites maakt. De horizontale balken die u in de bovenstaande afbeeldingen ziet, vertegenwoordigen alleen de resulterende breedte en hiërarchie van de gemaakte divs. De hoogte van elk wordt dynamisch uitgebreid naarmate u inhoud toevoegt, maar eventuele specifieke hoogtes moeten worden behandeld wanneer u daadwerkelijk doorgaat met het coderen van de site.
Exporteren
Als je klaar bent met het verdelen van je lay-out, druk je op de exportknop en kies je een locatie voor de bestanden. Het resultaat is een HTML-bestand, samen met de CSS, JavaScript en andere bronnen die je hebt opgenomen.
Het eindproduct ziet er op dit moment niet zo veel uit, maar aangezien het slechts enkele seconden kostte en veel van je CSS-layout-hoofdpijn oplost, is dat geen sinecure!
Het nadeel
Het ongelukkige deel is natuurlijk het enorme CSS-bestand dat resulteert. Als je gewend bent om Blueprint te gebruiken, zal dit je niet in het minst storen, maar het kan iedereen gek maken.
Zoals ik al eerder zei, zou het geweldig zijn om een implementatie van Boks van 1 KB te zien die al deze extra code heeft verwijderd. Ondertussen is het CSS-bestand heel duidelijk en bevat het veel opmerkingen. Dit maakt het gemakkelijk om naar binnen te gaan en snel alle code te verwijderen die u niet nodig heeft.
Als je Boks continu wilt gebruiken om je lay-outs te maken, maar niet al deze extra CSS wilt, raad ik aan een paar minuten de tijd te nemen om je eigen aangepaste CSS-bestand te maken dat je steeds opnieuw kunt gebruiken. Om dit te doen, kijkt u gewoon naar het standaard CSS-bestand en verwijdert u alles dat de rasterlay-out niet beïnvloedt. Dit omvat tekststijlen, veldstijlen, resetcode, enz. Nadat u dit eenmaal heeft gedaan, kunt u dit altijd als vervanging voor het door Boks gemaakte CSS-bestand inleveren.
Als je slim genoeg bent, kun je misschien met de rechtermuisknop op de toepassing klikken en naar 'Pakketinhoud weergeven' gaan om rond te snuffelen in de standaardbestanden die hier worden gebruikt en ze naar wens aan te passen (alleen Mac).
Gevolgtrekking
Boks is een handige kleine tool die u helpt bij het maken van de basisopmaak voor uw site met behulp van een volledig aanpasbare versie van het Blueprint framework-kolomsysteem. Het is niet bedoeld om volledige websites te maken, maar om u tijd te besparen aan de voorkant van uw project dat wordt opgenomen door verschillende divs te maken en de juiste klassen toe te passen.
Helaas, omdat je vrijwel vastzit aan het gebruik van het Blueprint-framework, is Boks niet voor iedereen. Laat hieronder een reactie achter en laat ons weten wat je van Blueprint vindt en of je Boks wel of niet gaat gebruiken bij je volgende project.
