Portfolio by Misam Anad

SVENDEPRØVE 2014 MISAM ANAD · PORTFOLIO

GRAFISK DESIGN MAX BILLY // DESIGN & WEBSITE

GRAFISK DESIGN // MAX BILLY

Programmer – Photoshop – Illustrator

Kunden Kongen & Bossen ApS er en restaurations virksomhed der beskæftiger sig med fest i nattelivet. De har drevet baren Billy Booze siden vinteren 2010, og åbner nu i 2014 søster diskoteket Max Billy.

Målgruppe konceptets primære målgruppe er i alderen 21+ år og har en (middel)lav indkomst. De har ikke mange penge, og er i det prisbevidste “grønne” segment.

Opgaven i forbindelse med åbningen af det nye diskotek, var min opgave at foreslå et logo samt nyt webdesign, hvor kunden ønsker samme dna som eksisterende identitet,

GRAFISK DESIGN // MAX BILLY // LOGO

MOODBOARD Ikon: Skummende øl

Logo

FACEBOOK Fokus på sociale medier

Fokus på billige priser

Tema farve

Største discount koncept i københavn

Discount som netto

GRAFISK DESIGN // MAX BILLY // LOGO

LOGO typelogo Udfra Billy Booze’s logotype finder jeg lignende skrifttype på nettet. Jeg former logo i lignende form og tilpasser iforhold til samme breddeværdi

BB = BILLY BOOZE MB = MAX BILLY Billy Booze logo type

sketche ideer

Ikon udvikling (skulpende væske) sketches

GRAFISK DESIGN // MAX BILLY // LOGO

Problem

Løsning

Eks. på at bogstaverne B og M har forskellige bredde værdier.

Ved konvertere texten til grafik, kan jeg opdele M bogstavet i små dele, og bevare serifer, og slanke grafikkens bredde.

GRAFISK DESIGN // MAX BILLY // LOGO

færdig logo

GRAFISK DESIGN // MAX BILLY // LOGO

GRAFISK DESIGN // MAX BILLY // HJEMMESIDE

HJEMMESIDE Flowchart og wireframes Kunden ønsker på sigt at benytte samme informations arkitektur til flere diskoteker og bare så derfor designes Max Billy udfra tilrettelagt IA, så strategien ligger fast og kan genbruges.

flowchart

GRAFISK DESIGN // MAX BILLY // HJEMMESIDE

Design

Skriftbrug

BillyBooze’s brand der b.la. er inspireret af netto, bruger farven gul til at signalere discount.

Skriftypen American typewriter er en Truetype font. Den har en høj X-højde, og er dermed brugervenlig i forhold til læsbarhed på skærm.

Ved at arbejde Gestaltlovene ind i enkelte elementer, opnås orden og struktur som gør designet nem at afkode for brugeren. feks. lovene om ligehed, lukkethed målsætning for designet er at bringe fokus på billige drikkevare og fest, igennem en utraditionel visuel kommunikation.

Farver jeg bruger tema farven som udgangspunkt, og tilføjer kontraster og toner. der er med til at skabe hierarki for forbrugeren.

PANTONE: 012C HEX: #FCD800 R = 252 C = 1 G = 216 M = 11 B=0 Y = 92 K=2

GRAFISK DESIGN // MAX BILLY // HJEMMESIDE

GRAFIK & BILLEDEBEHANLING KAMILIA AMÉLIE // ALBUM RELEASE

GRAFIK & BILLEDEBEHANLING // KAMILIA AMÉLIE // ALBUM RELEASE

Programmer – Photoshop – Indesign

Kunden Nephel Music er et pladeselskab, der indspiller og producere musik. De samarbejder med et netværk af kunstnere, og udgav sidste år albummet „Come what may” af sangerinden Kamilia Amélie.

Målgruppen Med sange på engelsk henvender kunden sig til internationalt publikum, i Soul og Pop segmentet.

Opgaven: I forbindelse med album udgivelsen var min opgave at reproducere billeder til brug på tværs af digitale og trykte medier. Der skal i samme anledning opsættes en Cd, Case og 12 siders booklet, indeholdende sangtekster og takkeliste til affiliates.

GRAFIK & BILLEDEBEHANLING // KAMILIA AMÉLIE // ALBUM RELEASE

Booklet problemstilling Billederne er behandlet samt beskåret igennem andre projektsammenhæng, og gør at det er en udfordring at bruge billederne i forhold til booklettens mål, som er 121 x 120 mm og har en åben bredde på 242 mm

GRAFIK & BILLEDEBEHANLING // KAMILIA AMÉLIE // ALBUM RELEASE

Reproduktion af billeder

Jeg fritlægger motiv med pen tool og bruger masken til at justere, med min selection aktiv kan jeg f.eks bruge refine edge til fritlægning af hår o.l Jeg kopiere dele af baggrunden og fordeler dem lag på lag. I forhold til billedets textur imittere jeg baggrundens forløb og bruger b.la clone tool til at sammenkopier emnerne med. i forhold til effekter som noise og farvestik som der findes på enkelte billeder, må jeg efterbehandle med samme type effekter for at dække og bibeholde billedets look. Sammenkopiering

Clone tool

tilføjelse af noise filter

Forlængelse af arm

Sammenkopi af baggrund

Clone tool

Fritlægning med channels

Selection

Refine edge

GRAFIK & BILLEDEBEHANLING // KAMILIA AMÉLIE // ALBUM RELEASE

Billedbehandling

Lys og skygge / gråbalance måling

Gråbalance

Fordi billederne skal bruges til både skærm og tryk, arbejder jeg med fordel i RGB farverummet og kan til sidst konvertere og exportere til CMYK

Lys og skygge Med levels indstiller jeg lyspunkter og på den måde sikre at b.la billedet ikke brænder/toner ud.

Gråbalance På billeder der skal være neutrale, sætter jeg gråbalancen udfra en RGB måling (f.eks hedder: R=100, G=100, B=100)

Lys og skygge

lys brænder ud Color settings

lys sat til 96%

Korrigering af highlights med levels og maske

GRAFIK & BILLEDEBEHANLING // KAMILIA AMÉLIE // ALBUM RELEASE

Restultat af reproduktion og billedebehandling

GRAFIK & BILLEDEBEHANLING // KAMILIA AMÉLIE // ALBUM RELEASE

Cover (forside) Forsiden er en del bookletten, derfor inkluderes denne i booklet workflowet.

COME WHAT MAY

Cover (bagside) Bagsiden er et inlay som måler 151mm i bredde, den har en effektiv bredde på 138 mm, med 6,5 mm bukket (ryg) sider

COME WHAT MAY 1. THAT'S A LIE 3. GO AHEAD 4. EGO 5. JANTE LAW SUPPRESSED 6. MUSIC'S GONNA SAVE ME

COME WHAT MAY

2. 180 DEGREES FEAT. J-SPLIFF

7. DON'T NEED YOU 8. BACK FEAT. WAFANDE 9. LITTLE DARLING 570747102689

570747102689

5 707471 026892

GRAFIK & BILLEDEBEHANLING // KAMILIA AMÉLIE // ALBUM RELEASE

CD Label labelen har en 117mm printområde og trykkes i silketryk med Pantone farver. Det er vigtigt at huske at der i trykfasen kommer et centreret hul i artworket på 23 mm . STEVEN MAHONA Y: D B

E RD

T I N

TH I

PR AN

ORK

IS OWNED BY: N

EPH EL

– Booklet package – Cd (case) package – Cd label package

til sidst afleveres følgende i eksporteret form fra indesign:

Havde papirets rasterfinhed været udspecificeret, havde jeg arbejdet udfra Q-faktor formlen.

1. THAT’S A LIE - 2. 180 DEGREES FEAT. J-SPLIFF 3. GO AHEAD - 4. EGO 5. JANTE LAW SUPPRESSED - 6. MUSIC’S GONNA SAVE ME 7. DON’T NEED YOU - 8. BACK FEAT. WAFANDE 9. LITTLE DARLING C

til tryk jeg resampler billeder som anvist af trykkeriet, så de har en effektiv ppi på 600 og i CMYK farverum.

2 THE COPYR © 201 IGH

Filer og Eksportering

COME WHAT MAY

GRAFIK & BILLEDEBEHANLING // MAX BILLY // HJEMMESIDE

MAX BILLY Graﬁk og ikoner Når flasken er behandlet og klar til exportering, gemmer jeg via save for web & devices. Jeg gemmer alle billeder der har transparens i .png og komprimere billedet. Det betyder at det er mindre ressource krævende i en hjemmesider og vi oplever en bedre page load

16-bit kanal

Det er vigtigt at undgå banding, så derfor skal man være opmærksom på farve forløbet. Har man f.eks billeder i raw format (eller høj kvalitetsbilleder), kan man sætte farvekanalen til 16-bit mens man arbejder, og til slut konveretere til 8-bit.

Layers

Fritlægning af flaske med channels

Paths fritlægning af labels Start

Channels fritlægning af flaske

maske og brush med opacity

Resultat af gennemsigtig flaske

GRAFIK & BILLEDEBEHANLING // MAX BILLY // HJEMMESIDE

Ikoner I webdesignet bruger jeg Ikoner, som er med til at give et mere humoristisk udtryk, Der tages udgangspunkt i barens artikler og produkter som ogsĂĽ kan bruges fremadrettet til diverse medier.

FĂŚrdig grafisk komposition

TYPOGRAFI & OMBRYDNING // SPORTMAGASINET

Programmer – Indesign – Photosop

Beskrivelse af opgave Projektet “Sportmagasinet – Om: Crossfit” er en artikel i et fiktivt sport magasin.

Målgruppe Artiklens primære målgruppe er i aldersgruppen 25 - 40 år, og er en del af det sport– og livsstil interesserede segment. „Vores læsere ser ikke kun sport –de er også aktive mennesker som gerne har magasinet liggende fremme, for at udstråle deres interesse for sport og livsstil.“ Den sekundær målgruppe er de yngre og ældre aldersgrupper, som kan hoppe med på vognen, for at identificere sig med primære målgruppe.

Første artikel side

SPORTS MAGASINET

Anden artikel side

Tredje artikel side

TYPOGRAFI & OMBRYDNING // SPORTMAGASINET

Dokumentets opbygning Layoutet er i højformat 298mm x 225mm, og er oprettet i 6 spalter á 28mm, med 5mm spalte afstand. desuden er opbygnings metoden blokombrydning Dokumentet har ialt 55 linjers brødtekst, med 7 vertikale rækker og i hver 7 linjer, med 6,67 mm afstand. Magasinet er opbygget som en template med dokumentet opsat og ombrudt. Alle styles findes i Paragraph–, Character– samt Objekt styles.

Dokument oprettes

maximale linjer tages højde for

Det har jeg gjort så man udfra et workflow’s perspektiv, kun behøver at opsætte dokumentet og ombrydningen en gang. Marginer indstilles

Sprog og korrekte citationer

justification med Lille i metoden

Mellemrubrikker har 2/3 luft i top og 1/3 luft under

Baseline grid

TYPOGRAFI & OMBRYDNING // SPORTMAGASINET

celler indeholder 7 linjer BrĂ¸dtekst indstilles til offset: x-height

Afstande mellem celler svare til en linjeafstand

Pagina

Klummetitler

TYPOGRAFI & OMBRYDNING // SPORTMAGASINET

Typograﬁ og skriftsnit Magasinets gennemgående skriftype er Frutiger LT Std, og er en sans-serif med 14 varianter. Jeg bruger varianten 45 light, og 65 bold som mellemrubrik Paginaen er en “Rockwell – bold italic” som er en Serif skriftype Udover magasinets pre-definerede skrifttyper, bruger jeg Capture it – regular, som display font. Det er en ttf (truetype font) og indeholder kun versaler og tallende 0-9. Den har desuden en grunge effekt, og er på forsiden roteret for at give et rystende udtryk.

Brødskrift: Frutiger LT Std, 45 light

Mellemrubrik: Frutiger LT Std, 65 bold

Displayfont: Capture it

TYPOGRAFI & OMBRYDNING // SPORTMAGASINET

Unicialer og Citation Som en del af megasinet’s gennemgående koncept er citationer og unicialer forudbestem. Unicialer fylder 3 linjer med en hairline forest, så vi kan knipe unicialet til side margenen. Citationer med grafik er vedlagt i textframen, som et anchored objekt

Styling og opsætning Ved brug af Swatches, Paragraph– og Character styles arbejder man professionelt og kreativ. Man kan hurtigt ændre sine præferencer, på en struktureret måde der også er overskuelig for andre mediegrafiker at gå til.

Unicialer

Forud definerede Citation tegn med libary

Libary Med library kan man gemme objekter og element kompositioner til genbrug på tværs af projekter.

Character styles

Libary

Paragraph styles

Swatches

TYPOGRAFI & OMBRYDNING // SPORTMAGASINET

Figursats Med Image wrap kan man i nogen tilfælde fritlægge billeder, såfrem indesign kan differencere baggrund fra objekt. ellers må man fritlægge på normal vis i photoshop.

figursats 1

figursats justering

Billeder og tekst holder register med tekstens x-højde

TYPOGRAFI & OMBRYDNING // SPORTMAGASINET

Tables og tabulering Med tables kan man f.eks. gøre skemaer og oversigter til en overskuelig, samt stylet oplevelse. Tabels er et værktøj, som giver fuld kontrol horisontalt og vertikalt igennem et table grid system. Der findes table styles og cell styles, hvor man nemt kan gemme og genbruge tables igennem projektet. Tabulering er f.eks god til lister fordi den opsnapper tabs i teksten og spacere ord og kan f.eks tilføje udpunkteringer.

Tabulator med paragraph styles

Tables med table, cell og character stykes

GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

Om kunden Mediq Danmark A/S er Danmarks førende handelsvirksomhed indenfor sundhedssektoren. I 2009 gik virksomhederne Hermedico og Kirudan sammen under Mediq, der I 2012 igangsatte projekter med henblik på en øget elektronisk håndtering af ordre og bevillinger.

Målgrupper Kundens ene målgruppe er de nye og eksisterende kommunale kunder der til dagligt administrere og har overblikket over bevillinger, aftalevarer, borgere og forbrug. Anden målgruppe er den eksisterende kundeservice, der til dagligt servicerer kommunale kunder, og fremadrettet skal servicerer de kommunale portalkunder.

Problemstilling Alle bevillinger godkendes af Mediqdanmark før forsendelse af hjælpemidler. Mediq ønsker at omdanne deres analog bevillingssystem til en ny digital webportal i deres allerede implementerede e-commerce miljø. Kommuner har dog ikke de nyeste it løsninger, og majoriteten gør derfor ikke brug af moderne browsere.

(MEDIQ Danmark Bevillingssystem – En webportal til Mediq’s kommunale kunder

GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

IA og Wireframes Under og efter workshop fasen, er det mit job at notere og skitsere wireframes udfra Adapt og Mediqâ&#x20AC;&#x2122;s kommunikation.

GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

Design Mediq ønsker at nedarve den visuelle identitet fra webshoppen, og så vidt muligt genanvende UXD (user experience design) webshop designet bruges derfor som design guide, og analyseres for genbrugelig CSS og IE7 problemstillinger

GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

Redesign til Bevillingssystem og IE7 version

Du er logget ind som Henrik Henriksen

Fordi systemet implementeres i den eksisterende E-handels løsning, genbruger jeg så vidt muligt samme HTML tags og klasser i koden, som i webshoppen. Det er smart fordi man så ikke behøver at definere dobbelt css til samme element typer, og gør at hele løsningen er nemmere at vedligeholde. De gennemgående elementer layoutes, og godkendes af kunden. 1. input felter og tekst styles 2. Tooltip ved mouse over 3. De lange klientlister kan sorteres alfabetisk 4. Mouse over effekt på lister for bedre visuel navigering 5. Pagers tilføjes i top og bund i forhold til usability og performance

Opret bevillingshoved Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Hr. Peter Petersen

CPR: 020202- XXXX

Kunde ID: 123456-6

Bevilling

Inkontinens Start: 2012-10-07

Vis forbrug

Diabetes Start: 2012-10-07

Vis forbrug

Vis Vis

Varenr.

Varenavn

Startdato

Slutdato

Forbrug

0123110

Unomedical

2014-02-18

2014-05-17

0123110

Unomedical

2014-02-18

2014-05-17

0123110

Unomedical

2014-02-18

2014-05-17

0123110

Unomedical

2014-02-18

2014-05-17

Du er logget ind som Henrik Henriksen Opret Opret bevilling bevilling

Download til Excel

Stamdata

Klientliste Her kan du søge på de klienter der har bevilling i kommunen. Du kan f.eks søge på navn eller Cpr nummer.

CPR:CPR: ( i )( i )

Adresse: ( i )

21218

Bevillingsvaregruppe: ( i )

21218

Postnummer: (i) Postnummer: ( i )

Navn: ( i )

Status: ( i )

Dette er en info boks. den aktivers ved

Dette er enmusen info boks. aktivers ved at ﬂytte over ( iden ) at ﬂytte musen over ( i ) Nulstil

Adresse

212183 3030 212183 3030

Jeppe Jeppesen Jeppe Jeppesen

Stednavn

Postnummer

Strandvej 17

3333

212183 3030 212183 3030

Jeppe Jeppesen Jeppe Jeppesen

Jeppe Jeppesen

Strandvej 212183 3030 17 Jeppe Jeppesen

Strandvej 17

3333

212183 3030

3333

Strandvej 17

Jeppe Jeppesen

3333

3333 17 Strandvej

3333

Strandvej 17

JeppeStrandvej Jeppesen 212183 3030 3030 17 Jeppe Jeppesen 212183 Strandvej 17 Jeppe Jeppesen 212183 3030

212183 3030

Jeppe Jeppesen

Stednavn

3333 17 Strandvej

212183 3030 3030 Jeppe Jeppesen 17 212183 JeppeStrandvej Jeppesen

Strandvej 17

Bevillingsdato

08-02-2013

Adresse Postnummer

Stednavn

212183 3030 3030 Jeppe Jeppesen 17 212183 JeppeStrandvej Jeppesen

212183 3030

Sidste levering

Tilbage til klient

Stamdata

CPR:

2121233030

CPR:

(i)

2121233030

Navn:

Henning K Andersen

Navn:

(i)

Henning K Andersen

Titel:

Pensionist

Titel:

(i)

Pensionist

Adresse:

Gade gadesen 12

Adresse:

(i)

Gade gadesen 12

Postnummer:

2222

Postnummer:

(i)

2222

By:

Gåserød

By:

Gåserød

Kommune:

Andeby

Kommune:

Andeby

Telefon nummer:

47474747

Telefon nummer:

(i)

47474747

Mail adresse:

navn@mail.dk

Mail adresse:

(i)

navn@mail.dk

Flexlevering

Hjemme efter kl. 12.00

Flexlevering

(i)

Hjemme efter kl.12.00

1 2 3 4 5 6 7

Cpr-nummer Navn Navn Cpr-nummer Navn NavnAdresse

212183 3030

Søg Søg

Download som Excel ﬁl

Tilbage til bevilling

3333

Strandvej 3333 17 3333

Strandvej 17

3333

10-04-2009

Spærring Postnummer

Sidste levering

Bevillingsdato

08-02-2013

10-04-2009

08-02-2013

10-04-2009

3333

08-02-2013

10-04-2009

08-02-2013

10-04-2009

3333

08-02-2013

10-04-2009

08-02-2013 08-02-2013

10-04-2009

08-02-2013

10-04-2009

08-02-2013

10-04-2009

3333 10-04-2009

Bestil vare til patient

08-02-2013

Rediger Rediger

Bruger-id

E-mail

Jeppe Jeppesen

20RD2910

navn@mail.dk

Helle Bokmann

52RM1223

navn@mail.dk

Jeppe Jeppesen

20RD2910

navn@mail.dk

Helle Bokmann

52RM1223

navn@mail.dk

Ret

Jeppe Jeppesen

20RD2910

navn@mail.dk

Ret

Navn

08-02-2013 08-02-2013

10-04-2009 10-04-2009

Jeppe Jeppesen 212183 Strandvej 17 3030

Jeppe Jeppesen

3333 Strandvej 17

08-02-2013

10-04-2009 3333

Jeppe Jeppesen 212183 Strandvej 17 3030

Jeppe Jeppesen

3333 Strandvej 17

08-02-2013

10-04-2009 3333

212183 3030

Jeppe Jeppesen

Strandvej 17

3333

08-02-2013

10-04-2009

212183 3030

Jeppe Jeppesen

Strandvej 17

3333

08-02-2013

10-04-2009

1 2 3 4 5 6 7

Gem Gem

10-04-2009

08-02-2013

10-04-2009

Helle Bokmann

52RM1223

navn@mail.dk

Jeppe Jeppesen

20RD2910

navn@mail.dk

08-02-2013

10-04-2009

Administrator

Ret Ret

Ret

Ret Ja

Ret

GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

Begrænset kompatibilitet med IE7 browsere

(1 MODENIZR BROWSER DETECTION

Kundens kritiske krav er IE7, så jeg må ind og udvikle løsningsmodeller(fallbacks). Jeg bruger javascript (Jquery) til at løse css udfordringer i forskellige situationer, som f.eks:

(2) JQUERY – EVEN OG ODD

(1) Modenizr Jeg bruger biblioteket Modernisr, der analysere brugerens browser oplysninger, og i vores tilfælde tildeler HTML IE7 og IE8 klasser. Det betyder at vi kan definere en fallback css der kun rammer hvis brugeren er en IE7 browser. (2) Even og Odd Der findes meget lange kundelister, og for at kunne manipulere rækkerne med css skriver jeg en global jquery kode som er målrettet hele systemets tables. (3) Gradienter I IE7 bruger jeg filter (MS script) til browser genereret gradient.

(3) INTERNET EXPLORE , GRADIENT (SCRIPT) FILTER

GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

Workflow Mit workflow i sammarbejde med resten af Adapt teamet

Løbende test og kvalitetskontrol

Jeg tester løbende, og sammen med front-end afdelingen i Adapt kvalitets tester vi i firefox og safari samt IE Test i Internet Explore fra en Mac foregår via Virtual machine. Det er et software som virtuelt køre en version af windows, hvor vi derigennem kan teste i forskellige IE browsere.

Godkendelse af kunden

Workshop med kunden

Normalt udvikler jeg i Chrome som understøtter de nyeste teknologier og har en god udvikler addon.

IA implementeres i Wireframes

Research

Implementering af funktionaliteter

Opstartsmøde

Godkendelse af intern udvikler version

Analyse af design

Implementering af design

Redsign til IE7

Godkendelse af design

Intern test

Overlevering til kundens E-Commerce miljø

Upload til test miljø

Godkendelse af kunden

GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

Setup Data og udviklingsflow i forhold til Mediq Bevillingssystem

Mediq Danmark

Via et script modtager vi klientlister fra Mediq danmark (i realtime), så godkendelser kan ske inden for få sek.

System/netværk

Mediqdanmark.dk E-commers løsning

Anvendte værktøjer igennem Mediq projektet – Balsamiq Mockup – Illustrator – Photoshop – 960 grid – Coda2 – Jquery – compass, SASS (CSS Authoring Framework.)

Information kilder

Udviklings miljø (Fælles)

Test

– Nextweb CMS – GIT (version styring)

Bevillings system Live

GIT Version styring

– Caniuse.com – msdn.microsoft.com – w3schools.com

Lokalt udvikler miljø Front & Back-end

GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

Compass og SASS/CSS Compass hjælper med at gøre workflowet hurtigere og en del sjovere. Man arbejder f.eks med indlejret css fremfor det traditionelle css workflow. Der er mulighed for at arbejde med variabler, og mixins – som betyder global kontrol og er med til at skabe en effektiv arbejdsgang.

Exempel på et simpelt mixin

Exempel på en complex mediaquery (responsive) mixin

Compass Variabler

Variabler i SASS

Mixin i brug med @include

GRAFISK PRODUKTION & WORKFLOW // MEDIQ DANMARK // BEVILLINGS SYSTEM

Eksempel på indlejret css

Normal CSS

SASS

body { } body section { } body section header { } body section header nav { } body section header nav ul { } body section header nav ul li { } body section header nav ul li a { }

body { section { header { nav { ul { li { a {} } } } } } }

Med sass slipper man bl.a. for at gentage forlængelser

MERE INFORMATION: