logo   Bootstrap - Egen template




Mens mantraet for opbygning af et Bootstrap-baseret site er 'Mobile first' er det for opbygning af templates 'desktop first'.


Ved starten på opbygningen af et site vil der som oftest være nogen, der har ønsker til sitets struktur (wireframes for en eller flere forskellige sider), fonte, farver, baggrundsbilleder etc.


Man har nu 3 veje at gå:
- At overtale denne 'nogen' til at acceptere et Bootstrap standard layout og standard Bootstrap-css.
- At bruge en masse tid (og evt. nogle penge) på at finde en standard template der passer (om end ikke helt så så nogenlunde) til 'nogens' aktuelle ønske. Hverken baggrunds- eller andre billeder kan dog antagelig bruges.
- At lave sin egen template baseret på egen situationsbaseret struktur, egen situationsbaseret tilpasning af Bootstrsap-css og egen situationsbaseret tilpasning af baggrunds- og andre billeder.


Nedenfor er skitseret en (tilpasselig) template for, hvordan man kan lave sin egen template.


PS: Husk at alt udviklingsarbejde er iterativt.


Ved at vælge den tredie løsning er man som udgangspunkt 'ikke i lommen på nogen' og man er meget friere stillet når 'nogen' ændrer mening undervejs i processen. Den overordnede begrænsning vil dog være at: Har man valgt Bootstrap må man (incl. nogen) dog lade sig afgrænse af de muligheder Bootstrap sætter.

  • Klasser
    Som en del af wireframing og anden forudgående planlægning afklares hvor mange / hvilke klasser, sitet skal anvende (udover xs).
  • Baggrund - fuldskærm
    Ved anvendelse af 'container' vil skærmpladsen udenfor 1200px default være !!!!!!. Der kan i stedet indsættes:
    Anden farve: xxx
    Billede: xxx
  • Primær struktur
    • Forside
      - Opbyg forsidens primære struktur (header, menu, sidekolonner, brødtekst, footer etc. med kontrastfarver som baggrunde - og navn på det enkelte felt skrevet som tekst. Kontroller responsibilitet. (Gem en ekstra kopi som model).
      - Opbyg 'include'-struktur og test igen.
    • Andre sider
      Opbyg 2-4 (indtil repræsentativt udsnit) eller alle sitets øvrige sider med forsiden som template. Test for funktionalitet og responsivitet.
  • Menu
    Afklar, hvilken type menu der skal anvendes.
    Indsæt grunddata (design kan vente) for menuen på pladsen dertil. Kontroller, at der kan skiftes mellem de oprettede sider.
  • Default detailopsætning
    Foretag 'foreløbig' men dog repræsentativ detailopsætning af et par sider og / eller includes baseret på standard Bootstrap-css. Opsætningen skal omfatte alle de klasser, der skal benyttes for de pågældende sider / includes.
  • Egen CSS
    Opbyg og anvend egen CSS-fil til at dække de dele, der ikke kan håndteres med Bootstrap.
  • Customize
    Etabler en 'customized' Bootstrap-css fil. Alle 'Less files' og 'jQuery plugins' medtages. Der foretages bedst mulig tilpasning af 'Less variables'. Den etablerede CSS-fil indsættes som erstatning for Bootstrap-default
  • Egen template
    Arbejd iterativt videre på det afgrænsede materiale med detailopsætning, egen CSS og / eller customize indtil de bearbejdede dele er i orden. Undervejs checkes hyppigt for funktionalitet og responsivitet.
  • Backup
    Etabler backup af den etablerede template. Dataene derfra skal nemt kunne hentes filvis.
  • Menu 2
    Færdiggørelse af menuen indgår i detailopsætningen nedenfor. Bootstrap skifter default til 'burgermenuen' ved 768px. Er den bredere end 768px vil den i klasserne over xs foranledige sideværts scroll. Menuen kan skiftes til burgermenuen tidligere med: jS Properties
  • Detailopsætning
    Projektet færdiggøres side for side / include for include i hensigtsmæssig rækkefølge. Opbygningen etableres som en iterativ process involverende bl.a. sideopsætning, egen css, customize css. Processen vil være så individuel at nærmere beskrivelse ikke vil være relevant.
  • Reduceret CSS-fil
    Der etableres en ny Bootstrap CSS-fil med Customize. Less variablerne forbliver, som de er i den sidste aktuelle. Fra Less-files og jQuery-plugins aktiveres kun de elementer, der er brugt.




















x
x