# Webb2 Uppgift 1: SASS - Bibbliotek och Frontpage

Det ni skall åstakomma under denna uppgiften är att skriva erat eget bibbliotek. Om kraven ej följs så kommer detta påverka betyget. Ni måste därför lämna in det i tid för att säkerställa att ni faktiskt får ett betyg.

Kommer visa ett exempel på en hemsida som en elev gjort som fick A. Notera att han ej har en meny, detta är okej för det han gjorde i mixins och strukturen på arbetet är det som ger betyget.

### Innan projekt start:

- Skall vara spel eller sport relaterad

- Om ni vill göra något annat får ni fråga först

- Det skall vara en "one-page" sida som lätt kan lägga till nya "sidor"

- En skrollbar sida som har en skärmsstorlek per sida

- En skiss där ni ritar upp sidan med lådor och lägger sedan till vad elementet skall heta (https://wireframe.cc)

## Betygskrav:

#### Kommentarer

- All .scss kod kommenteras
- Kommentara där det **behövs för att visa att ni har förstått**

#### Bedömning:
- Dokumentering
- Skriv ned de problem du stött på i en punktlista
- Självständighet
- E: Du genomför ditt projekt i samråd med utbildaren
- A: Du genomför, efter en introduktion, självständigt ditt projekt
- HTML
- E: Du skriver HTML-kod som med tillfredsställande resultat följer standarder och riktlinjer
- Som för E, men med gott resultat, och av mer komplex karaktär
- SASS/CSS
- E: Du skriver CSS-kod som med tillfredsställande resultat följer standarder och riktlinjer
- A: Som för E, men med gott resultat, och av mer komplex karaktär
- Slutprodukt
- E: Det färdiga projektet är av tillfredsställande kvalitet
- A: Som för E, men av god kvalitet

## Tekniska krav:

#### Bibbliotek

- Färdiga bibbliotek är ej tillåtna

#### HTML

- All HTML skall vara korrekt indenterad
- Det finns hemsidor som gör detta automatiskt

#### Text
- Texten skall fylla de utrymmen så sidan ej ser tom ut

- Det är ej tillåtet att fylla i med lorem ipsum (genererad text)

- Kopiera istället från en hemsida om ni behöver info

#### SCSS
För E måste man ha med **minst**:
+ Variabler
+ Så många som krävs (går ej definera)
+ Inheritence (arv)
+ 1 gång
+ Mixins
+ 4 stycken

För C och uppåt måste man kunna ta in egen information från dokumentation och implementera detta. Samt ha med allt för E. Krävs goda kommentarer.

För A måste man göra minst 7 **generella** mixins och 3-4 implementerade med blandad kod.

#### Länkar

- Länkar som leder till andra delar av sidan (Använd # i href)
- Ej krav att ha externa länkar
- Alla länkar till bilder skall vara lokala (interna, på er hårddisk)

### **Accepterade standarder**

- **SCSS**
- **Flexbox**
- **Grid**
- **VH / VW**

#### Färger

- Max 3 färger som tema, man kan ha bilder som har fler färger

#### Bilder
- Max storlek på bilderna 5Mb
- Namnen skall vara beskrivande
- Bild på en katt => cat.png

### Mappstrukturen skall vara följande:
HTML sidor som skall vara med i projektet:
+ index.html
+ Endast engelska filnamn
- **library-frontpage** (byt ut **frontpage** till vad din sida heter)

- **css**
- style.css
- style.scss
- **scss**
- _variables.scss
- _functions.scss
- **img**
- exempel_bild.png
- index.html

Notera att index.html ligger överst tillsammans med själva mapparna, **css** och **img**. Ni får ha en helt annat sturktur men om det då blir svårare att jobba, är detta erat ansvar att lösa. Vissa kanske vill dela upp **scss** och **css**.

### Följande krävs för att uppgiften skall rättas:

+ Uppladdad på Github på ett eget repository
- Namn på repo: förnamn-efternamn-sass-inviduellt-projekt (endast småbokstäver och minustecken)
+ Kommenterad kod
+ Använd beautify för att indentera koden

## Elev exempel:
> Denna eleven fick A i betyg då han skapade självmant all SCSS och kunde motivera allt han gjorde.
https://i.imgur.com/jVURnU1.jpg

## Generellt om SCSS
> Sass: Syntactically Awesome Style Sheets

Detta är ett meta språk som kompilerar scss till css:
> style.scss ---> **style.css**

Så här skall det se ut i visual studio code, se till att döpa alla filer rätt.
> vscode https://i.imgur.com/sY6o1mH.png

Glöm inte heller att ni måste klicka på *'index.html'* för att sedan klicka på *"Watch sass"*. Detta gör så att **.scss** filen sedan kompileras.

För att få information om vad man kan göra i sass kan man antingen gå in på:

> sass-dokumentation: https://sass-lang.com/documentation

> sass-hemsida https://sass-lang.com/

###### tags:`uppgift` `scss`