Intro til Amazium 3

Jeg har fundet et dejligt, lille frontend framework: Amazium.

Amazium består af et simpelt grid system til konstruktion af responsive websites, og derudover har Amazium også et par grundlæggende klasser for styling af typografi, formularer, tabeller og mediefiler.

Jeg giver en lille intro her, så du også kan komme i gang med Amazium – yderligere informationer kan findes på amazium.co.uk.

Amaziums responsive layout

Amazium tilpasser bredden af html-kasserne i forhold til skærmens bredde. Sitet har altså flere forskellige bredder, alt afhængig af hvilken skærm man ser sitet på. Det gøres ved hjælp af media-queries. Amazium har 4 “break points,” dvs. punkter hvor layoutet skifter størrelse, og de fast definerede størrelser på sitet er:

  • Stor skærm, minimum 1200px, sitebredde 1160px (+margin 2 * 20px)
  • Standard skærm, skærmbredde fra 960px til 1159px, sitebredde 928px (+margin 2 * 16px)
  • Tablet i portrait-mode, skærmbredde 768px til 959px, sitebredde 740px (+margin 2 * 14px)
  • Mobil, under 767px: 100% af skærmbredden

Amazium organiserer alle elementerne på sitet i kolonner, når sitet går i mobil-størrelse (under 767 px).

Når der skal laves en mock-up til et responsivt site, skal der altså tænkes i en række forskellige størrelser. Så for at lave mock-ups, skal der lægges lidt arbejde i PhotoShop. Vi springer direkte til koden i stedet:-)

Godt i gang med Amazium

Download Amazium på den store download-knap øverst til højre på amazium.co.uk.

Amazium består af en række filer, der skal inkluderes i dit site, før du kan gøre brug af grid’et. Kopier amazium.css, base.css, form.css og layout.css over til dit websites mappe, og inkluder filerne i <head>-delen af din html-fil:

<!-- Stylesheets -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/amazium.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/layout.css">

Amazium.css-filen indeholder stylesheet regler for grid’et. Den skal vi normalt ikke ind og pille ved – vi skal blot anvende klasserne fra den på vores website.

Base.css-filen indeholder grundlæggende styling, der følger med amazium. Det gælder f.eks. typografi, tabeller og mediefiler.

Form.css-filen indeholder styling af formularelementer.

Layout.css indeholder en række media-queries for de seks forskellige udgaver af sitet. Det er oplagt at bruge layout.css til alle de generelle regler, der har med visuelt design at gøre. Husk at CSS-regler ikke skal gentage sig – der er f.eks. ikke nogen grund til at definere link-farver mm. for hver layout-størrelse, hvis den skal være ens ved alle layouts.

Layout med Amazium

Layout med Amazium er ikke meget anderledes end med egen HTML/CSS. Der er blot en række CSS-classes i Amazium, vi skal anvende på korrekt vis. Når et layout skal kodes, skal vi først og fremmest tænke på layoutdiagrammet. Layoutdiagrammet viser hvilke kasser (div’er), vi får brug for i vores HTML.

Først kigger vi på vores site: Er det række eller kolonne-baseret? De fleste sites vi ser nu om dage er række-baserede (min påstand!), hvilket vil sige at vores site kan deles op i et antal rækker, der fylder hele sitets bredde. Ved et kolonne-baseret layout, vil sitet primært deles op i kolonner, der spænder over hele sitets højde.

Lad os se på et eksempel:

Ovenstående wireframe består af 3 rækker: En til “Header,” en række til “Content og Sidebar,” og én række til footeren.

Hver række skal pakkes ind i en “row,” som er en class defineret i Amaziums CSS:

<div class=”row”>RÆKKENS INDHOLD</div>

Efter at have defineret rækkerne, skal hver kolonne i hver række pakkes ind i en div:

<div class=”grid_1-12”>CLASSENS INDHOLD</div>

Kigger vi på Header og Footer, vil de begge være 100% bredden af den række, de ligger i. Vores række med “Content og Sidebar” skal dog indeholde to kolonner – én til Content og én til Sidebar. Så vi skal arbejde med forskellige kolonnebredder.

Da Amazium er lavet med et 12-kolonnet grid, har vi 12 kolonner at disponere over. Derfor er der lavet 12 classes i Amazium: .grid_1, .grid_2, .grid_3, … .grid_12. Hver klasse henfører til hvor mange af de 12 kolonner i gridet, et element skal være.

Indholdet i vores header skal derfor pakkes ind i:

<div class=”grid_12>HEADERENS INDHOLD</div>

Footeren Ligeledes:

<div class=”grid_12>FOOTERENS INDHOLD</div>

Vores Content og Sidebar skal dog have nogen andre bredder, og kommer derfor til at se ud som følgende (hvis sitet deles op i 2/3 content og 1/3 sidebar):

<div class=”row”>
   <div class=”grid_8”>
      CONTENT INDHOLD
   </div>
   <div class=”grid_4”>
      SIDEBAR INDHOLD
   </div>
</div>

Summen af kolonner i én række, skal altid være 12 eller mindre. Med andre ord skal summen af tallene i .grid_1, .grid_2, .grid_3, … .grid_12 i en række maksimalt give tolv – præcist som grid_8 og grid_4 alt i alt giver grid_12, eller 12 kolonner i alt.

Hvis man gerne vil skubbe en kolonne længere ind, så der er et tomrum før kolonnen, kan man bruge offset-classen (.offset_1, .offset_2, .offset_3… .offset_11):

<div class=”grid_6 offset_3”>INDHOLD</div>

Offset er tomme kolonner, så de skal også regnes med i det maksimale antal kolonner – eksempelvis fylder ovenstående grid_6 offset_3 ni kolonner i alt.

Hvis du gerne vil have en “row” til at være 100% af skærmens bredde, kan du anvende class’en row-max:

<div class=”row-max”>
   <div class=”grid_6>Den her fylder 50% af skærmen</div>
   <div class=”grid_6>Den her fylder 50% af skærmen</div>
</div>

Show og hide classes

Ofte vil man have et mindre omfangsrigt site på mobilen end på computeren. Derfor er der en række classes i Amazium, der gør det muligt at vise/fjerne indhold, alt efter hvilken skærmstørrelse brugeren har.

Du kan tilføje classerne .hide-tablet, .show-tablet, .hide-screen, .show-screen, .hide-phone, .show-phone til dine html-elementer, for at få dem til at blive vist/ikke vist i specifikke brugssituationer. Eksempelvis:

<div class=”hero-unit hide-phone”>HERO-UNIT INDHOLD</div>

Styling af html

Amazium kommer med en række pre-definerede CSS-classes, man kan bruge til at give sit site en grundlæggende styling. Dertil kan man så style sitet med sin egen CSS, enten via layout.css stylesheetet eller via eget stylesheet. Hvis du også vælger at inkludere “images” mappen fra Amazium, er der nogen små ikoner til lister mm. Dem kan du nemt ændre ved at kigge i form.css eller ændre på ikonerne.

Kig på alle klasserne i “base.css,” for at få en idé om hvilke styles der kommer inkluderet i Amazium – eller kig på amazium.co.uk.

Afrunding

For yderligere information, check amazium.co.uk, som giver en ganske god gennemgang af mulighederne med Amazium (på engelsk).

Skriv et svar