Kom godt i gang med Bulma

Finde
(Billedkredit: Bulma)

Vil du komme i gang med at bruge Bulma? Du er på det rigtige sted. Bulma er en populær CSS-ramme med et simpelt flexbox-gittersystem. Det adskiller sig fra andre rammer ved at tage en lettere tilgang og ikke medtage JavaScript - hvilket overlader beslutningen helt til udvikleren (for at udforske andre muligheder, se vores valg af bedste CSS-rammer ).

I denne vejledning demonstrerer vi, hvordan du installerer Bulma og bygger et websted med dets forskellige klasser. For at bevise, hvor alsidige klasserne er i Bulma, er hele tutorialsiden blevet bygget uden at skrive en eneste linje CSS. Vil du have andre muligheder? Prøv en fremragende webstedsbygger . Og for at sikre, at dit websted kører bedst, skal du vælge det rigtige webhosting service.



Generer flash-salg



(Billedkredit: Fremtid)

Generate CSS er den hotteste webhændelse i byen. Fra 20-22 september kan du hente en billet til halv pris ved hjælp af koden FLASHSALE 5. Klik på billedet for at finde ud af mere.

01. Kom i gang

Bulma: kom i gang



(Billedkredit: Bulma)

Opret en ny mappe, og opret en i den index.html fil. Åbn denne fil i en kodeeditor, og opret et simpelt start-HTML-dokument med en DOCTYPE html og et responsivt viewport-tag.

Page Title

02. Find installation

At bruge Bulma ud af boksen er lige så hurtigt som at tilføje en enkelt CSS-fil. Brug et CDN til at tilføje et link i HTML. Hvis det er nødvendigt at ændre variabler og have mere kontrol over rammen, npm installer Bulma kan bruges (se fuld dokumentation ). For den fulde oplevelse bør font awesome 5 også medtages.

03. Byg en side

Bulma: hej verden



(Billedkredit: Bulma)

Inde i body tag skal du oprette et sektionselement og en div med klassen beholder . I containeren skal du oprette en h1 med klassen titel derefter et afsnit med klassen undertekst . Indtast indtil videre 'hej verden' i titlen og lidt tekst i afsnittet. Vi har nu den grundlæggende startskabelon til Bulma.

Hello World

This is the basic starter template for Bulma

04. Opret en topheltbjælke

Lav et nyt afsnit over det forrige og i stedet for klassen afsnit , giv det klassen helt . Heltklassen tillader oprettelse af et banner i fuld bredde med en række muligheder, der styrer højden. Inden for dette nye afsnit oprettes en div med klassen helt-krop og derefter en beholder dette holder indholdet.



...

05. Tilføj titel og undertekster

Inde i container div skal du tilføje et h1- og h2-tag med klasserne titel og undertekst . Dette er typografiklasser, der vil øge størrelsen på deres indhold. Bulma er smart at vide, hvornår en titel og undertekst kombineres, og vil bringe dem tættere på hinanden.



06. Tilføj et stænk farve

Find: farve

bedste fotoapps til Android 2015
(Billedkredit: Bulma)

Tilføj klassen er-primær til helteafsnittet. Dette vil anvende den primære farve til baggrunden og ændre teksten til den lysere variant. I stedet for primær , info , succes , advarsel , fare , lys og mørk kan også vælges



07. Del indholdet i kolonner

Websteds første indholdsområde er opdelt i to kolonner. Lav et nyt afsnit med klasseafsnittet, og tilføj en container. For at oprette kolonnerne tilføjes en div med kolonner klasse. Hver kolonne tilføjes i den overordnede container. Kolonner placerer sig lige meget i det tilgængelige rum med et lille mellemrum mellem, medmindre andet er angivet.

Hvis du har meget indhold, skal du sørge for at sikkerhedskopiere dine aktiver i pålidelig skylagring.

... ...

08. Opret responsive billeder

Bulma: lydhøre billeder



(Billedkredit: Bulma)

Den anden kolonne indeholder et billede. Sæt billedet ind i et figurelement, og giv, hvis det er muligt, figuren en klasse af billedets billedformat. I eksemplet 16by9 er blevet brugt (se fuld liste over tilgængelige forhold ).

09. Foreslå handling med knapper

Knappeklassen opretter farverige knapper og kan anvendes elementer eller elementer i form. Tilføj to knapper til den første kolonne, og anvend farveændringer på dem. Hvis du bruger mere end en knap, skal du pakke dem ind i en div med klassen knapper , som korrigerer kløften og tillader anvendelse af klasser som en gruppe.

Find out more Buy now

10. Opret indhold i boks

Bulma: indhold i boks

(Billedkredit: Bulma)

Tilføj et nyt afsnit nederst på siden med tre kolonner. Inden for kolonnerne tilføjes et feltelement. Kasseelementer er enkle beholdere med en kant omkring dem, der adskiller dem fra baggrunden på en side.

Test

11. Brug ikoniske felter

Bulma integreres med Font Awesome 5, men er kompatibel med alle fontbiblioteker og har klasser til at kalde de mest tilgængelige ikoner. I hver boks skal du tilføje en indholdsbeholder efterfulgt af et span-element med klassen ikon . Brug en i spændvidde element for at kalde de krævede klasser til det ønskede ikon. Ikoner er farvet på samme måde som tekst.

... ...

12. Vær modig

Bulma: Vær modig

(Billedkredit: Bulma)

Opret en ny sektion med to søjler helt nederst på siden, hvilket giver en er info klasse til sektionen. For at få en interessant effekt, anvend også er fed klasse til dette afsnit for en subtil gradient. Denne modifikator fungerer med alle syv hovedfarver.

13. Skift niveauer

Niveauer er en fantastisk måde at sikre, at elementerne er lodret centreret i træk. Inden for et nyt afsnit nederst på siden skal du tilføje en div med niveauklassen og reden inde i fire niveauer. Alt indhold tilføjet inden for et niveauelement justeres lodret.

... ...

14. Tilføj og kontroller formularer

For at tilføje en formular nederst på siden skal du oprette en ny sektion med to søjler med er-primær . Opdel det i to kolonner, og opret en i den højre kolonne Mark klasse. Feltklassen bruges til at gruppere flere formularindgange sammen og sikre, at de er adskilt korrekt. Alle input skal også pakkes ind i et individ .styring klasse.

15. Giv brugerne feedback

Find: feedback

(Billedkredit: Bulma)

Når en formular er sendt, skal den returnere en besked til brugerne, så de ved, hvad der sker næste. Selvom Bulma ikke er i stand til at kontrollere, hvornår denne meddelelse vises, kan frontenden bygges med beskedklassen.

Thank you!

...

Den fleksible sidefodsklasse gør det muligt at tilføje ethvert element i bunden af ​​en side, hvilket giver et sted for copyrightoplysninger og bundnavigation samt en finish på hjemmesiden.

hvordan man vender et enkelt lag i Photoshop

...

17. Tilpas variabler

De fleste projekter ud over prototyper vil have et krav om at arbejde med en brandretningslinje og farver. På samme måde er det sikkert at antage, at en designer skal ændre skrifttyper, farver eller andre aspekter af Bulma. En stor del af Bulma er, at den kan tilpasses og modulær. Ikke kun kan moduler importeres selektivt, men op til 415 Sass-variabler kan ændres inden for rammen.

Brug af variabler betyder, at indstilling af en ny farve som primær vil ændre denne farve over hele Bulma-rammen for det projekt. Det kan først være vanskeligt at konfigurere dette, men guider er leveret ved hjælp af tre forskellige metoder i dokumentationen.

Denne artikel blev oprindeligt offentliggjort i nummer 289 af det kreative magasin for webdesign Webdesigner . Køb nummer 289 eller abonner her .

Læs mere: