Guide til lokal mapping af .css filer med Charles Proxy

1

 Download Charles Proxy (CP) her og vælg dit styresystem, og download theme-pakken her.

2

Når CP er downloadet og installeret, åbn da programmet. CP kan autokonfigurere dine proxy indstillinger, så her skal du ikke gøre noget.

3

Nu er du klar til at bruge CP. Når du åbner programmet vil du se følgende interface, med en grå optage-knap som er den primære knap du skal bruge, hver gang du åbner programmet:

4

Tryk på optag knappen så den bliver rød, som vist på billedet nedenfor. Gå ind i din standardbrowser og gå til den side, hvor du ønsker at afprøve dit stylesheet. 

5

Åbn CP igen og bemærk, at den side du nu har besøgt er på listen over optagne sider i CP som vist forneden:

5a

NB: Dette punkt er kun relevant, hvis den side du ønsker at optage bruger HTTPS, ellers gå til punkt 6.

Klik på “Proxy” fanen i værktøjslinien i CP og vælg “SSL proxying settings…” som vist forneden:

Her kan du tilføje de sider du ønsker, som kører på HTTPS ved at klikke på “Add” knappen i vinduet som vist her:

Tilføj adressen på siden uden at udfylde noget i “Port” feltet, og uden at skrive “HTTPS” eller “WWW” foran adressen (eks.: “fiskeristyrelsen.dk”).

Når du har tilføjet siden du ønsker som kører på HTTPS, indlæs da siden igen og gå til punkt 6.

6

Rediger adressen på siden du er ved at optage, og tilføj “/?debug=true” efter sidens adresse (eks: https://fiskeristyrelsen.dk/?debug=true). Genindlæs herefter siden.

7

Udfold sidens mappestruktur til venstre i CP, og find “Sidens navn” > “Themes” > “Sidens navn” > “css” > “styles.css” som vist forneden:

8

Højreklik på “styles.css” filen og tryk på “Map Local…” som vist forneden:

9

Klik på “Choose” under “Map To” fanen og vælg “styles.css” filen i den mappe du har downloaded i punkt 1, som findes i stien: “theme” > “default-theme” > “css” > “styles.css” som vist forneden: 

10

Nu er du klar til at ændre på variablerne lokalt på din computer og se ændringerne i den browser du bruger. Hos Berú bruger vi kodeeditoren Atom til at redigere stylesheets, og de fleste af disse er af formatet .scss. Dette er CSS varianten SASS CSS, og for at kompilere vores temafiler bruger vi Node JS, node-sass og Atom plugin’et sass-autocompile.

Det er selvfølgelig helt valgfrit, hvilken kodeeditor du vælger at bruge.

11

Når du åbner din temamappe i din kodeeditor kan du under: “theme" > “default-theme” > “css” > "custom" > “_custom-variables.scss” finde filen med alle de variabler, som du har mulighed at ændre på som vist på listen her:

12

Hver gang du ændrer en variabel og gemmer variabeldokumentet i din kodeeditor, kan du nu opdatere siden i din browser og se de ændringer, du har lavet i variablerne i din browser så længe CP er åbent på din computer, og du har mappet din “styles.css” fil lokalt som beskrevet foroven.