Divshot forenkler å bygge nettgrensesnitt med Bootstrap

Jeg er en stor tilhenger av Bootstrap, fordi det gir et utmerket rammeverk for å bygge kraftige og responsive webapplikasjoner. Bootstrap er relativt grei, selv om det er en læringskurve, og det krever å grave i detaljene i koden under design. Det er her verktøy som Divshot kommer inn i bildet.

Å se er å tro

Divshot gir et visuelt, dra-og-slipp-grensesnitt for å bygge webapplikasjoner ved hjelp av Bootstrap. Figur A viser det grunnleggende Divshot-grensesnittet for arbeid med individuelle websider. Den har et stort område for sideoppsett, med en sidefelt som inneholder Bootstrap-komponenter sammen med verktøy og andre alternativer. Den venstre delen av skjermen viser prosjektkomponenter: filer, bilder osv. Figur A viser en eksempelside med én komponent lagt til: Hero Unit med teksten og knappen TechRepublic.com. Divshot-grensesnittet gir en delt skjermvisning med den visuelle designen øverst og koden nederst, slik at du kan redigere designet i hvert av områdene i grensesnittet.

Figur A


Utforme en webside med det grunnleggende Divshot-grensesnittet.

Når du har lagt til Bootstrap-elementer og vil se resultatene, kan du kjøre forrige-ikonet (det ser ut som en avspillingsknapp og er rett under tilbakestill-knappen) for å forhåndsvise det gjeldende arbeidet. I tillegg lar ikonet til høyre for Kjør forrige-ikonet deg vise / skjule kodefeltet (ikonet ser ut som mindre enn og større enn symboler). De to diagonale pilene lar deg velge forhåndsvisningsplattformen ( figur B ); kan du forhåndsvise designen på forskjellige skjermstørrelser, inkludert telefon, nettbrett og stasjonær. En nyttig funksjon som fortjener omtale, er Tilbake-knappen øverst på siden; den lar deg gå tilbake til tidligere lagrede versjoner av siden.

Figur B


Divshot gir alternativer for tidligere design på forskjellige plattformer.

Når du designer en side i Divshot-grensesnittet, gir inspektørområdet på skjermen (øverst til høyre) granulær kontroll av spesifikke designelementer. Når et element er valgt, vises de tilknyttede alternativene i inspektørområdet. For eksempel viser figur C en knapp valgt med tilgjengelige alternativer vises - du kan blant annet endre stil, størrelse, bredde og CSS-oppførsel. Valg som stil, størrelse, flyt og synlighet gir valg via rullegardinmenyen, og alle endringer blir umiddelbart presentert i sideoppsettet, så det er enkelt å teste forskjellige innstillinger.

Figur C


Kontrolløralternativer avhenger av elementet som er valgt på siden.

Komponentdelen i Divshot-grensesnittet (nede til høyre) gir mer enn det som er vist i figur A. Nedtrekksfeltet rett under komponentområdet lar deg velge hvilken type Bootstrap-elementer som vises - figur D viser det utvidet. Den kategoriserer elementene som skjemaer, layout, media, diverse, navigasjon og typografi, og du kan alltid velge hele biblioteket for å se alt.

Figur D


Divshot kategoriserer komponenter for å gjøre dem enklere å finne.

Du kan legge til flere websider i applikasjonen, så vel som andre filtyper. Divshot støtter JavaScript, CoffeeScript, CSS, LESS og mer. I tillegg kan du laste opp andre filer til et prosjekt, og du kan eksportere prosjektet som en komprimert fil.

Hvor signerer du?

Divshot er gratis for en utvikler som jobber med ett prosjekt, og det er det jeg har brukt til skjermbildene i denne artikkelen. De tilbyr andre pakker for de som jobber med flere prosjekter, samt organisasjoner eller team som samarbeider om utviklingsarbeid. Få detaljer om Divshots planer og priser.

Flott for raske mock-ups

Jeg elsker Divshot for raskt å håne design for kunder - tross alt er ingenting som slår visuell kommunikasjon, og det er lett å dele slike design med klienten. Det er også et flott verktøy for å sette sammen rammer. I tillegg, siden det er nettbasert, kan forskjellige team lett samarbeide om et design.

Mens grensesnittet er intuitivt og enkelt å bruke, er onlinehjelpen en god referanse når det er problemer. Imidlertid innrømmer jeg at jeg vender tilbake til lokal utvikling ved å bruke favorittverktøyene mine når jeg dykker ned i det pittige i å bygge applikasjonen. Gamle vaner er vanskelig å bryte.

Flere tilgjengelige alternativer

Jeg foretrekker Divshot, selv om det er andre alternativer for å opprette og redigere i nettleseren. Staffelien er et godt eksempel, men jeg tror ikke grensesnittet er enkelt. Andre alternativer som jeg ikke har undersøkt så mye er Pingendo, som er et verktøy som er installert lokalt, og Jetstrap.

Jeg er sikker på at det vil være enda flere alternativer når Bootstrap-følget fortsetter å vokse.

© Copyright 2021 | pepebotifarra.com