Ten Living Style Guide Tools voor webontwerpers - het beste van
EEN leefstijlgids is een documentatie van UI-elementen en patronen verzameld van een site of applicatie met het doel om ontwikkelaars toe te staan deze te gebruiken consistente stijlen voor hun hele project. In het verleden hebben ontwikkelaars stijlhandleidingen handmatig gemaakt, wat een hoop werk is. Na een tijdje begonnen ze met het automatiseren van de workflow en stijlgidgereedschappen die de front-end code transformeren goed georganiseerde UI-bibliotheken zijn begonnen te verschijnen.
Leefstijlgidsen zijn anders dan codestijlgidsen, omdat de laatste regels bevatten over het schrijven van leesbare en onderhoudbare code, terwijl de richtlijnen voor woonstijlen dat wel zijn collecties van front-end patronen, zoals CSS-klassen voor knoppen, widgets en typografische elementen. Gidsen voor codestijl zorgen ervoor codeconsistentie, terwijl levende stijlgidsen ervoor zorgen visuele consistentie over een site.
In dit bericht hebben we 10 handige hulpmiddelen samengesteld die u kunnen helpen genereer uw eigen gids met woonstijlen.
1. Stylify Me
Deze tool is heel leuk: plak gewoon de link van de website die je wilt analyseren en kijk hoe de stijlgids met één muisklik wordt gegenereerd. Met Stylify Me, u kunt snel een overzicht krijgen van de patronen van een site, inclusief kleuren, lettertypen, grootte en afstand. Zodra het proces is voltooid, kunt u download de stijlgids in PDF.
2. Fabricator
Constructeur stelt u in staat om uw eigen UI-toolkit te bouwen, uw ontwerpsysteem te organiseren en een stijlgids te genereren met uw toolkit-code. Als je in een team werkt, kun je de documentatie in Markdown schrijven om het voor andere ontwikkelaars gemakkelijker te maken om te gebruiken. Het kan je helpen om organiseer je ontwerp / codeerroutine op de manier zoals jij dat wilt.
3. Frontify
Frontify omvat alles van digitale mockups tot wireframing. Ze hebben ook een gereedschap voor stijlgidsen, dat een eenvoudig, minimalistisch ontwerpproces biedt zonder gedoe. U kunt zich gratis aanmelden en alle benodigde informatie handmatig invoegen. Het proces moet een kleurenpalet, lettertypekeuze, pictogrammen, logo's, mogelijk slogans of een voorkeurswebkopie bevatten.
4. Aigis
Met Aigis, u kunt stijlhandleidingen maken van tekstbestanden (bijv. .css, .SCSS, .styl, .md). U kunt ook documentatie in Markdown schrijven en uw sitethema aanpassen.
5. Hologram
Hologram is gemaakt door Trulia en is een geweldige oplossing voor het maken van stijlgidsen. Het is een Ruby juweeltje dat parseert opmerkingen in uw CSS om geweldige stijlgidsen te genereren. Hologram heeft een sjabloneringssysteem met enkele basisstijlen en navigatie om uw stijlgids nog eenvoudiger te maken.
6. Styledown
Met Styledown, je kunt gemakkelijk CSS-stijlgidsen schrijven, omdat het een is Markdown-generator op basis van markdown. Het werkt met de meeste web-ontwikkelingssetups, omdat het platformneutraal is. Het vereist heel weinig om het in de lucht te krijgen. De opmerkingen die u aan uw CSS moet toevoegen, zijn ook zeer minimaal. U kunt uw CSS-documentatie maken in inline CSS-opmerkingen of als een afzonderlijk Markdown-bestand.
7. KSS
KSS (Knyle-stijlbladen) is in de eerste plaats een documentatie specificatie en een stijlgids-indeling die dat heeft zijn eigen syntaxis voor opmerkingen. KSS bevat ook een Ruby-bibliotheek die parseert .sass, .SCSS, en .css bestanden gedocumenteerd met de KSS-richtlijnen in een nette stijl gids. KSS is voor meer gevorderde gebruikers en professionele teams, want het genereren van een stijlgids vereist codeerkennis.
8. SC5 Stijlgids-generator
Met de SC5 Stijlgids-generator u kunt stijlhandleidingen rechtstreeks in uw browser maken en bewerken. Het is gebaseerd op KSS met een aantal coole functies inbegrepen, zoals een door AngularJS aangedreven UI waarmee je je stijlen kunt bekijken, doorzoeken en testen. SC5 gebruikt dezelfde documentnotatie als KSS. Het ondersteunt SASS, LESS, PostCSS en pure CSS-stylesheets.
9. Styledocco
StyleDocco is een handige Node.js-app die maakt stijlgidsen van uw stylesheets. U kunt het met npm installeren. In de gegenereerde styleguide toont StyleDocco een voorbeeld met de stijlen die u hebt toegepast en een voorbeeld van de HTML-code.
Op de startpagina van StyleDocco vindt u twee voorbeelden van stijlgidsen, een voorbeeld uit een standaard stylesheet en een uit een voorbeeld van een Bootstrap-site. De voorbeelden kunnen u ook helpen bij het ophalen van de systeemsyntaxis die SytleDocco gebruikt.
10. Patroonlab
Pattern Lab is een verzameling hulpprogramma's die u helpen bij het maken van een modulair ontwerpsysteem. Pattern Lab is een aangepaste statische-sitegenerator die alle stijlelementen op een site samenvoegt, en formuliersjablonen en pagina's daarvan. Het kan dienen als uw project patroonbibliotheek en frontend stijl gids. Met Pattern Lab kunt u uw stijlcomponenten tegelijkertijd bekijken abstract en in context.
