Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

[HTML/CSS] HTML5 Boilerplate, Twitter Bootstrap och dylikt

1
Skriv svar
Permalänk
Medlem
●

[HTML/CSS] HTML5 Boilerplate, Twitter Bootstrap och dylikt

Hej SweC!

Jag är bombsäker på att många här använder sig utav - eller iallafall känner till - ramverk för CSS såsom HTML5 Boilerplate och Twitter Bootstrap. Min fråga är, kort och gott, varför gör ni det, och hur använder ni er av det?

Jag har hört argument såsom "ramverk sparar tid" och "ramverk standardiserar utvecklingsprocessen", vilka för all del är fantastiskt goda argument, men exakt hur påverkar det ert arbete?

Intrycket jag har fått av att arbeta i ett ramverk är att redan från designen ta hänsyn till det fördefinierade grid och anpassa sitt innehåll därefter. När markup sedan skrivs använder man de classnamn knutna till de regler man designade efter och modiferar ramverkets CSS för övriga stilregler. Är det en någorlunda korrekt beskrivning av arbete i ett ramverk?

Idag finns det förmodligen fler än 200 webbplatser med unik design ute på nätet som jag har skrivit. Majoriteten av de webbplatserna är relativt små; det rör sig ofta om hemsidor till lokala företag. Att skriva markup och CSS (samt integrering i ett CMS) för sådana projekt tar mig, i snitt, mellan 1-2 timmar. Det är naturligtvis kraftigt beroende på sidans storlek, men det är ett rimligt snitt. Jag skriver givetvis inte allt från scratch varje gång utan utgår från en egen liten "boilerplate" preparerad med ofta återkommande regler, men i jämförelse med storleken på ovan nämnda ramverk är det i princip ingenting.

Tror ni att anamma ett ramverk kan göra mig något gott? Vilka fördelar finns det egentligen med att använda ett ramverk?

Visa signatur

Min webbyrå

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag använder HTML5 Boilerplate som grund till det mesta. Paul Irish har gjort massor med video klipp där han går genom de olika best practice exempeln för hur man kommer runt olika problem och servar sina sidor så effektivt som möjligt.

Bootstrap (ej twitter längre) är ett större framework med färdig klientkod för olika widgets och funktioner (responsiv design, grid, knappar, formulär etc). Bootstrap är likvärdigt med Zurb Foundation, dessa stora system brukar jag inte förlita mig på då jag tycker om att själv ha kontroll over mina assets och inte bygger så stora sidor att funktionaliteten är nödvändig.

Dock tycker jag att man idag borde titta närmare på SASS, LESS eller likande som kan spara en för mycket arbete. Det är i dag viktigt att ha en bra bygg process för css, bilder och js. Minifiering, concatinering och generation av sprites är bara några av möjligheterna som ett optimerat "build script" kan ge.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Testa och se? Många använder det nog dels för att de inte tycker att de är så duktiga när det kommer att skapa den grafiska parten till en hemsida

Visa signatur

How to program

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av beh:

Jag använder HTML5 Boilerplate som grund till det mesta. Paul Irish har gjort massor med video klipp där han går genom de olika best practice exempeln för hur man kommer runt olika problem och servar sina sidor så effektivt som möjligt.

Gå till inlägget

Tack för din insikt! Använder du en egen modifiering av Boilerplate eller använder du det vanilla för alla projekt? Upplever du att du är mer produktiv/effektiv/högkvalitativ med det?

Skrivet av beh:

[...] då jag tycker om att själv ha kontroll over mina assets och inte bygger så stora sidor att funktionaliteten är nödvändig.

Gå till inlägget

Eller hur! På något sätt känner jag att jag likväl kan bygga på mitt egna lilla ramverk så att det är något optimerat för mitt användningsområde snarare än att sätta mig in i något annat. Jag är helt klart för att återanvända kod, men när ett projekt ska vara unikt så är konkreta stilregler mer ett hinder för mig.

Skrivet av beh:

Dock tycker jag att man idag borde titta närmare på SASS, LESS eller likande som kan spara en för mycket arbete. Det är i dag viktigt att ha en bra bygg process för css, bilder och js. Minifiering, concatinering och generation av sprites är bara några av möjligheterna som ett optimerat "build script" kan ge.

Gå till inlägget

Oh ja, jag skulle älska att arbeta med preprocessors men företaget jag arbetar för verkar inte förstå att det är finns kraftiga fördelar med det...

Visa signatur

Min webbyrå

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag har själv aldrig brytt mig om sånt men något som är riktigt trevligt och faktiskt användbart är
sass/scss : http://sass-lang.com/
eller
less: http://lesscss.org/
2 tummar upp

... Ops, hade visst redan nämts Men det är alltid värt att nämnas igen

Redigera
Citera flera Citera
Permalänk
Medlem
●

Prövade på att använda Twitter Bootstrap till mitt senaste projekt. Mest för jag var nyfiken på vad alla snacka om.
Tycker det ett riktigt bra att använda. Lätt att få snygga saker snabbt och snabbar upp design-delen av arbetet.
Sen att det är responsivt gör det ju ännu mer underbart.
Tyckte det var lite klurigt i början att komma in i arbetssättet men värt att ta en titt på.

En nackdel kan ju vara att många hemsidor kommer dela liknande element såsom knappar osv.

Gör som jag och testa till ett projekt och sen se vad du tycker om det.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av agentq15:

Prövade på att använda Twitter Bootstrap till mitt senaste projekt. Mest för jag var nyfiken på vad alla snacka om.
Tycker det ett riktigt bra att använda. Lätt att få snygga saker snabbt och snabbar upp design-delen av arbetet.
Sen att det är responsivt gör det ju ännu mer underbart.
Tyckte det var lite klurigt i början att komma in i arbetssättet men värt att ta en titt på.

En nackdel kan ju vara att många hemsidor kommer dela liknande element såsom knappar osv.

Gör som jag och testa till ett projekt och sen se vad du tycker om det.

Gå till inlägget

Vad var det som fick dig att fastna? Jag menar, ett grid skriver man på en minut, men är det helheten med färdiga ikoner, knappar, formulär och dylikt som tilltalar?

Kanske borde jag pröva det på ett projekt, men jag hoppas på att genom denna tråden få veta om det finns rimliga skäl för mig att bekymra mig. Jag har så svårt att föreställa mig att arbeta kring stilregler andra har satt när jag skriver dem både enkelt och snabbt själv, särkilt när det kommer till layout, responsivitet och dylikt...

Visa signatur

Min webbyrå

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

JAg har precis börjat använda Bootstrap.
Eftersom jag själv inte är bra på att anpassa sidor efter olika upplösningar så tycker jag Bootstrap är guld värt.
Den sparar otroligt med tid när man ska skapa snygga former, dropdowns grid osv, den följer ju även en webbstandard som jag själv inte är så insatt i, samt att den är bakåtkompatibel till IE6 är ju ännu bättre.
Sen är det enkelt att bygga på sin egen CSS utanpå om man behöver det.

EDIT: Ett korrekt gridsystem som bootstrap anvnder skapar du tvivelaktigen på en minut.
Allt man lägger till följer deras gridsystem.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Mest:

Vad var det som fick dig att fastna? Jag menar, ett grid skriver man på en minut, men är det helheten med färdiga ikoner, knappar, formulär och dylikt som tilltalar?

Kanske borde jag pröva det på ett projekt, men jag hoppas på att genom denna tråden få veta om det finns rimliga skäl för mig att bekymra mig. Jag har så svårt att föreställa mig att arbeta kring stilregler andra har satt när jag skriver dem både enkelt och snabbt själv, särkilt när det kommer till layout, responsivitet och dylikt...

Gå till inlägget

Tror det är helheten. Lätt att få något stilrent utan att lägga ner för mycket arbete. Färdiga tables, forms och thumbnails. Är väl en smaksak.
Om du nu tycker du gör allt enkelt och snabbt själv kanske du borde fortsätta. Då har du fortfarande fullkontroll på innehållet.

Som sagt, testa och se
Pröva några olika frameworks och se om du gillar något bättre.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av FlorrpaN:

Ett korrekt gridsystem som bootstrap anvnder skapar du tvivelaktigen på en minut.
Allt man lägger till följer deras gridsystem.

Gå till inlägget

Du får gärna upplysa mig mer om detta! Det kan vara så att jag missat något fantastiskt bra, men ett grid i min värld är inte mycket mer än en hög förberedda procentuella kolumnbredder med marginaler styrda av pseudo-selectors som ligger i självclearande rader.. Och det rör sig inte om många minuter för att skriva det.

Skrivet av agentq15:

Tror det är helheten. Lätt att få något stilrent utan att lägga ner för mycket arbete. Färdiga tables, forms och thumbnails. Är väl en smaksak.
Om du nu tycker du gör allt enkelt och snabbt själv kanske du borde fortsätta. Då har du fortfarande fullkontroll på innehållet.

Som sagt, testa och se
Pröva några olika frameworks och se om du gillar något bättre.

Gå till inlägget

Schysst formatering och formateringsalternativ till formulär är en rejäl tidssparare, men om man nu återanvänder samma stil till sina formulär så behöver man inte direkt använda sig av ett ramverk. Då räcker det ju att importera stilregler för dem när de behövs, och man kan likväl skriva de reglerna själv. Jag antar att puristen i mig känner avsmak för att använda 6000 oanvända rader CSS och osemantisk markup i alla mina projekt.

Det jag i huvudsak är nyfiken på är om ett ramverk bidrar med mer än färdig stil.

Visa signatur

Min webbyrå

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag använder det i alla mina projekt nuförtiden. Jag föredrar att jobba på backend delarna, så det sparar mig otroligt mycket tid. Tyvärr bryr sig inte arbetsgivarna om det som ligger bakom (om det fungerar) men det är där det viktigaste ligger i mina ögon. Så bootstrap hjälper mig att fixa ett schysst UI utan att behöva drabbla mig igenom massa CSS som jag ogillar att hålla på med.

Det är enkelt att använda, span uppläggningen är simpel och snygg, och det finns många projekt som lägger till nya animationer, nytt utseende på saker osv om man känner att man vill ha något annat.

Visa signatur

AW3423DW QD-OLED - Ryzen 5800x - MSI Gaming Trio X 3090 - 64GB 3600@cl16 - Samsung 980 Pro 2TB/WD Black SN850 2TB

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag använder ofta Jquery UI för att det gör saker snabbare och lättare.

Vill du visa din hjälp i ett popup-fönster?

$("#help").dialog()

BOOM, klart.

Vill du ha en datepicker?

$("#inputDatepicker").datepicker();

BOOM klart.

Det sparar enormt mycket tid. Gör man enklare, mindre dynamiska sidor är det kanske lämpligare att använda sin egen lilla "boilerplate", man sitter ju alltid på massa scripts eller CSSer som man återanvänder på ett eller annat sätt.

Det är ju en rejält stor skillnad på att bygga en "hemsida" och en webbapplikation. Ska man bara göra en presentation av Emils Frisörsalong går det ju mest troligt lika fort att göra allt för hand, men ska du bygga en applikation behöver du rätt ofta dialoger, tabbar, knappar, knappgrupper, ajax-laddning, sliders, dynamiska rutnät, json-templates etc etc.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Mest:

Jag är bombsäker på att många här använder sig utav - eller iallafall känner till - ramverk för CSS såsom HTML5 Boilerplate och Twitter Bootstrap. Min fråga är, kort och gott, varför gör ni det, och hur använder ni er av det?

Gå till inlägget

Twitter Bootstrap är förvisso ett ramverk, liknande ZURB, Skeleton, jQuery UI, Kube, Flat UI et cetera. HTML5 Boilerplate är dock något annat.

Det är inget ramverk, utan ett gitrepo + sajt där man samlat snippets och presenterat dem snyggt. HTML5 Boilerplate är något man kopierar det man ändamålsenligt behöver ifrån, när man behöver det.

Skrivet av Mest:

Jag har hört argument såsom "ramverk sparar tid" och "ramverk standardiserar utvecklingsprocessen", vilka för all del är fantastiskt goda argument, men exakt hur påverkar det ert arbete?

Gå till inlägget

På mitt jobb innebär det att det finns en dokumentation som såväl formgivare, gränssnittsutvecklare och systemutvecklare kan läsa och därmed använda.

I projekt där vi använt ramverk ser det ut såhär:

  • Formgivarna har ett färdigt bibliotek av grafiska komponenter att utgå ifrån för att designa.

  • Gränssnittsutvecklarna slipper lägga flera veckor på att skriva CSS för de PSDer formgivarna tagit fram.

  • Systemutvecklarna är inte beroende av HTML+CSS från gränssnittsutvecklarna utan kan mocka själva.

Detta är framförallt värdefullt vid prototyp-driven utveckling, där man jobbar utan kravspec eller utan vattenfalls-hierarki.

Skrivet av Mest:

Intrycket jag har fått av att arbeta i ett ramverk är att redan från designen ta hänsyn till det fördefinierade grid och anpassa sitt innehåll därefter. När markup sedan skrivs använder man de classnamn knutna till de regler man designade efter och modiferar ramverkets CSS för övriga stilregler. Är det en någorlunda korrekt beskrivning av arbete i ett ramverk?

Gå till inlägget

Ja, det är korrekt. Se min notering av HTML5 Boilerplate ovan.

Skrivet av Mest:

Idag finns det förmodligen fler än 200 webbplatser med unik design ute på nätet som jag har skrivit. Majoriteten av de webbplatserna är relativt små; det rör sig ofta om hemsidor till lokala företag. Att skriva markup och CSS (samt integrering i ett CMS) för sådana projekt tar mig, i snitt, mellan 1-2 timmar. Det är naturligtvis kraftigt beroende på sidans storlek, men det är ett rimligt snitt. Jag skriver givetvis inte allt från scratch varje gång utan utgår från en egen liten "boilerplate" preparerad med ofta återkommande regler, men i jämförelse med storleken på ovan nämnda ramverk är det i princip ingenting.

Tror ni att anamma ett ramverk kan göra mig något gott? Vilka fördelar finns det egentligen med att använda ett ramverk?

Gå till inlägget

200 är rätt fett Men nej, med ovanstånde beskrivning - 1-2h jobb för en sajt - så är ramverk verkligen ingenting för din klientlista.

Ramverk visar inte sina riktigt stora vinster förrän i större projekt än de du har beskrivit.

Jag länkar till ett heligt inlägg i ämnet:
Stop solving problems you don't yet have

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Mars:

På mitt jobb innebär det att det finns en dokumentation som såväl formgivare, gränssnittsutvecklare och systemutvecklare kan läsa och därmed använda.

I projekt där vi använt ramverk ser det ut såhär:

  • Formgivarna har ett färdigt bibliotek av grafiska komponenter att utgå ifrån för att designa.

  • Gränssnittsutvecklarna slipper lägga flera veckor på att skriva CSS för de PSDer formgivarna tagit fram.

  • Systemutvecklarna är inte beroende av HTML+CSS från gränssnittsutvecklarna utan kan mocka själva.

Detta är framförallt värdefullt vid prototyp-driven utveckling, där man jobbar utan kravspec eller utan vattenfalls-hierarki.

Gå till inlägget

Så på ett sett kan man se det som att ramverket ger er som grupp en standard att arbeta runt? För ett stort projekt med många grenar kan jag se hur det kan underlätta trycket på gränsnittsutvecklarna, samt låta systemutvecklarna göra ett mer utförligt jobb tidigare i utvecklingsprocessen. Den meningen formulerades som ett påstående, men den var halvt menad som en fråga.

Skrivet av Mars:

200 är rätt fett Men nej, med ovanstånde beskrivning - 1-2h jobb för en sajt - så är ramverk verkligen ingenting för din klientlista.

Gå till inlägget

Det var nog lite detta jag hoppades på att höra när jag öppnade tråden. Om ett ramverk annat än "mitt egna" hade kunnat gynna mig ytterligare för den typen av små projekt jag arbetar med i dagsläget så hade jag, ärligt talat, blivit chockad.

Tack för ditt utförliga inlägg, det känns som att jag börjar förstå i vilka situationer det kan vara en god idé att tillämpa ett fullskaligt ramverk för ett projekt. Jag har upp till nu känt att man likväl kan skriva ett eget ramverk om man finner sig i en sits där man kan dra nytta av det, men det är förmodligen bra mycket lättare att i sådana fall använda sig av ett välkänt ramverk som förhoppningsvis ens kollegor redan är något insatta i.

Visa signatur

Min webbyrå

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara