Checklista när du jobbar i oxygen

Var noga med att kolla så att du ser vilken klass som är aktiverad när du jobbar.
Styla aldrig bara ett ID, om stylingen inte gäller just BARA den saken. Fråga dig själv: skall jag använda denna sak igen? Tex en knapp/ett kort. Då MÅSTE du använda klasser.
Vi strukturerar klasserna enligt BEM (block__element--modifier)
Tex:
card
card__heading
card__button--featured
Glöm inte LÅSA KLASSERNA när du är klar med dem! ”Lock Selector Styles”
Använd inte COLUMNS-modulen! Använd grid för layouten, flex för att positionera innehållet inom själva layouten!
Lägg bara ett "ämne" i varje sektion. Om du byter ämne – NY section!
Använd semantiska taggar på innehållet!
Kontrollera att det ligger en div runt "INNER CONTENT" med taggen satt till "HEADER".
Lägg aldrig punkter i en lista med massa divvar. Använd RICH TEXT. Denna punktlista är gjord med RICH TEXT
Använd ALDRIG px! Använd alltid relativa enheter. Annars kommer sidan inte bli bra för en synskadad person som kanske vill öka upp root font size. Har du satt px så overridar den anvvändarens önskemål! Men har du använt relativa enheter. Vi fokuserar på rem på denna site (om det inte är uträknat med clamp). Root font-size är satt till 62,5% för att det skall vara enkelt att räkna om från px till rem. 300px = 30rem (dividera med 10). Sätt inte 5px margin. Sätt då .5 px margin.
Använd inte TAGS för att ändra storlek på rubriker!!! Tex - jag sätter en H3 på denna rubriken för då får jag en snygg rubrik. Gör ALDRIG så! Då funkar ju inte SEOn och användare som inte ser får helt fel uppläst struktur av sidan. Det måste vara semantiskt korrekt! Om den skall vara mindre så ändrar du font-size!!! Men glöm inte ändra klassen, annars ändrar du ju alla i den klassen.
Använd MEDIAL LIBRARY när du väljer bilder så du kan välja Size som är lämplig för just den storleken. Kolla att bilden inte blir pixlig! Vi har lagt till code snippets plugin och har där lagt till ett antal nya storlekar för bilder:
add_image_size( 'image-480', 480, 9999 );
add_image_size( 'image-640', 640, 9999 );
add_image_size( 'image-720', 720, 9999 );
add_image_size( 'image-960', 960, 9999 );
add_image_size( 'image-1168', 1168, 9999 );
add_image_size( 'image-1440', 1440, 9999 );
add_image_size( 'image-1920', 1920, 9999 );
Undvik att lägga bakgrundsbilder i cards etc. Använd hellre en vanlig bild och lägg till css-koden: object-fit: cover; (se image-card nedan). En bakgrundsbild "syns" inte för screen readers och är då sämre SEO. Google ser inte att det finns. Men om du använder riktiga bilder så följer alt-taggen med. Regeln är att om bilden är helt oviktig för användaren - DÅ funkar det med bakgrundsbild.
Vid sidnumrering som kommer upp vid repeaters fast du inte vill ha någon. Använd detta trick för att lösa det: Advanced Query. Add parameter. "no_found_rows". Sätt value=true. Nu syns inte pagineringen. Det kanske inte verkar viktigt, men google crawlar alla sidorna om det syns paginering här, vilket gör att sidan upplevs som stor fastän du bara valt att visa tre poster.
Glöm inte styla 404-template!
Lägg inte CSS inne i modulerna. Skapa hellre ett nytt stylesheet (eller lägg till). Skapa en klass och använd den på modulen i stället. Skriv kommentar om vad CSS-en gör.
Skapa ALDRIG blogg posts med Oxygen! Gör det i Gutenberg! Använd sedan en template för att styla dina poster. Det blir stora mängder och det är en mardröm om du vill byta builder i framtiden.

Exempel på rubriknivå H1.

Exempel på rubriknivå H2.

Exempel på rubriknivå H3

Exempel på rubriknivå H4

Exempel på rubriknivå H5

Exempel på brödtext

Viktigt om alla textstorlekar.
All text är "fluid fonts", dvs den ökar ju större skärmen är och minskar ju mindre skärmen är (till en viss min/max-gräns). Detta görs genom så kallad clamp. Se https://websemantics.uk/tools/responsive-font-calculator/. Clampen är inlagd under Manage/Settings/Global Styles/Headings. Vi har utgått från 1280 page width. All line hight är satt till 1.3. Fontweight är satt till 800 på H1-H3 och 700 på övriga.

Viktigt om grundinställningar för Container Padding
Den är oxå gjord med clamp för att få en mer responsiv design. Ändras i Global Styles/Sections & Columns. Clamp används endast top/bottom. All Columns padding är borttagen för att enklare styra det i designen.

Bakgrundsbilder - glöm inte välja var fokus i bilden är

Vi har skapat ett custom field som heter Background Image Control. När du lägger upp ett nytt inlägg (OBS! Om du vill att detta skall finnas på kommande nya custom post types så glöm inte redigera custom field: Background image control och lägga till den nya posttypen så det syns när du redigerar den). Du kan sätta var i bilden som huvudfokus skall vara. Det innebär att du undviker tex att ett huvud kapas beroende på hur view-porten är.

Css-en ligger inlagd under Style sheets/Custom Data Attributes

För att ange på en bild följ följande guide:

Klicka på bilden inne i oxygen
Välj Advanced/Add Attribute
Name: [Hitta på, döp det data-XXX]: data-bg-position
Value: [Klicka på dynamiskt och leta upp]: Data/Metabox field/Hero Background/Value

Nu skickas värdet i din dropdown in i ett attribut som du skapat.

I exemplet nedan är första bilden lagd med "Right Bottom" vilket gör att bilden hamnar väldigt fel. I andra bilden är det "Center Center" vilket passar bäst (det är default för bilden).

Double-click this headline to edit the text.

Feature card

Skapa feature card
Skapa feature-card-list. Den blir ful om du inte använder denna klassen.
Skriv punkter (om du har såna) i rich text editor.
Här har vi tagit bort indentering och gjort punkterna färgade i primary-färgen.
Ändra under Grundinställningar/feature card.
Om du vill ha bort skiljelinjen, ändra --rule-width till 0. Ändra färg - ändra rule-color.

Användning kolumner via utility classes

Använd klasserna för kolumner tex columns--2 för att skapa kolumner utan att göra kolumner med element. Löpande text: ködf aölksdjf öalksjdf öalksjdf öalkjsdf öalksjd föalkjdf ölaksjd fölakjs dfölakjs dfölkaj sdöflkajs döflkaj sdölfkaj sdlöfkaj söldkfj aösldkfj aölskdfj aölskdj faölksd jföalksdj föalksdj föalksjd föalksjd fölakjsd fölaksjd fölaksj dfölaks jdfölkajs döflaksjd fölaksdfj.

Ange ex columns--m-1 för att göra till en kolumn på medium devices.

columns--2/3/4
columns--xl/l/m/s-1/2/3/4

Färger - nyanser

OBS! Använd inte fäljväljaren om du skall använda det automatiska färgsystemet. Skriv i stället den kod som står under respektive rubrik i cellerna i tabellen här nedan. Färgerna ändrar du sedan i Manage/Stylesheets/Colors.

Förklaringar till benämningarna följer Material Design 3, vilket finns på https://m3.material.io/styles/color/the-color-system/tokens#7fd4440e-986d-443f-8b3a-4933bff16646

Primary

var(--primary)

On Primary

var(--primary-ultra-light)

Primary Container

var(--primary-light)

On Primary Container

var(--primary-dark)

Secondary

var(--secondary)

On Secondary

var(--secondary-ultra-light)

Secondary Container

var(--secondary-light)

On Secondary Container

var(--secondary-dark)

Accent

var(--accent)

On Accent

var(--accent-ultra-light)

Accent Container

var(--accent-light)

On Accent Container

var(--accent-dark)

Error

var(--error)

On Error

var(--error-ultra-light)

Error Container

var(--error-light)

On Error Container

var(--error-dark)

Background

var(--base-light)

On Background

var(--base)

Surface

var(--base-medium)

On Surface

var(--base-ultra-light)

Surface Variant

var(--base-variant)

On Surface Variant

var(--base-variant-ultra-dark)

Outline

var(--base-variant-dark)

Vi använder HSL för färghanteringen på denna webbplats. Det ger total kontroll över färgerna på webbplatsen:

H = Hue
S = Saturation
L = Luminosity

Färgen räknas ut så här:

hsl(hue, saturation%, lightness%, opacitet)
Exempelvis hsla(255, 100%, 50%, .5)

Hämta HSL från Colorpicker: https://htmlcolors.com/hex-to-hsl

NYANSER FINNS I FÖLJANDE VARIANTER:
var(--primary)
var(--primary-light)
var(--primary-ultralight)
var(--primary-medium)
var(--primary-dark)
var(--primatry-ultradark)
var(--primary-comp)

Färger - transparens och komplementfärg

För varje grundfärg ovan kan du också välja olika transparenser och få fram färgens komplementfärg.

Primary 80%

var(--primary-trans-80)

60%

var(--primary-trans-60)

40%

var(--primary-trans-40)

20%

var(--primary-trans-20)

Complementary

var(--primary-comp)

Secondary 80%

var(--secondary-trans-80)

60%

var(--secondary-trans-60)

40%

var(--secondary-trans-40)

20%

var(--secondary-trans-20)

Complementary

var(--secondary-comp)

Accent 80%

var(--accent-trans-80)

60%

var(--accent-trans-60)

40%

var(--accent-trans-40)

20%

var(--accent-trans-20)

Complementary

var(--accent-comp)

Tex för Primary ser det ut så här:

var(--primary-trans-80)
var(--primary-trans-60)
var(--primary-trans-40)
var(--primary-trans-20)
var(--primary-comp)

Du kan även använda dessa för base, base-variant och error.

Förklaringar till CSS-kod för webbplatsen (

Manage/Stylesheets/Grundinställningar

/* Korrigera all px-fonts så att det blir enkelt att räkna om mellan REM och PX i clamp-funktionen. Efter denna kod så är det bara att gångra REM med 10 för att se hur många pixels det blir.*/
html{
font-size: 62.5%;
}

/* OWL SPACING * /
Gör så att alla barn i en container får lika mycket avstånd mellan sig.

/* MAX-WIDTH UTILITY CLASSES */

.max-w--320 {
width: 100%;
max-width: 32rem;
}
osv...

Använd dessa för att undvika att tex rubriker blir för långa om du vill ha dem tex på två rader. Sätt en max-breddsklass. Du slipper då lägga in radbrytningar som sen blir fula på mobilen.

Följande värden finns:

/* UTILITY CLASS: KOLUMNER OCH GAPS MELLAN DEM */

.columns--2 {
column-count: 2;
}
.columns--3 {
column-count: 2;
}
.columns--4 {
column-count: 2;
}

/* Column Gaps */

.columns-gap--xs{
column-gap: .25em;
}
.columns-gap--s{
column-gap: .5em;
}
.columns-gap--m{
column-gap: 1em;
}
.columns-gap--l{
column-gap: 1.5em;
}
.columns-gap--xl{
column-gap: 2em;
}
.columns-gap--xxl{
column-gap: 2.5em;
}

Manage/Stylesheets/Colors

/*** COLOR SYSTEM ***/
Här ligger alla inställningar för färgsystemet (se färger ovan). Det är enkelt att lägga till nya färger och ändra förvalda inställningar för transparens, mättnad etc.

Installed plugins

Meta Box och Meta Box IO. Ett plugin som hanterar Custom Posttypes. Vi har agency license och inga årsavgifter tillkommer på denna.
Oxygen. Sidbyggaren för denna webbplats.
Oxygen Gutenberg. Gör så att användaren inte behöver gå in i Oxygen för att redigera.
Oxygen Woocommerce. Tillägg för ehandelsplattformen Woocommerce. Kan tas bort om inte Woocommerce används.
Code Snippets. Plugin för extra kod. Främst för att skapa fler Image Source Set Sizes (se checklistan överst). Gratis.
Happy Files. Skapar kataloger i mediahanteraren vilket gör att bild-kaoset minskar :). Du kan även skapa gallerier utifrån en viss folder. Gratisversionen hanterar upp till 10 foldrar. OBS! Du kan även aktivera att den visar foldrar på tex PAGES, POSTS etc.
WPDevDesign - Oxygen - Navigator. Du ser oxygens mallar och sidor i en dropdown i den övre listen på wp. Snabbar upp ditt arbete!
Coda workpace. Underlättar arbetet. Du kan förhandsgranska olika devices (iphone/android etc). Du kan ha css-en i ett separat fönster.
Piotnet forms
Piotnet grids (facets etc)
FUNDERA PÅ: Shortpixel som automatiskt skapar optimerade bilder när någon lägger till bilder i biblioteket. Prenumeration!

Globala inställningar

Global styles/Sections and columns. Vi har lagt clamp på top/botton margin för alla sectioner och en fast padding left right.

OWL-spacing

Använd följande klasser för att välja den spacing du vill ha runt olika objekt, tex i Cards. Alla siblings som ligger i kortet får lika stor top margin, vilket gör att alla objekt spacas lika. Topp- och botten-margin påverkas inte. I exemplet nedan har vi lagt ikonen och rubriken inom en div för att de skall hamna kloss an. Lägg dem separata om du önskar mellanrum mellan ikonen.

Använd följande klasser:
owl-spacing--s
owl-spacing--m
owl-spacing--l
owl-spacing--xl

Max-width utility classes

Använd dessa för att undvika att tex rubriker blir för långa om du vill ha dem tex på två rader. Sätt en max-breddsklass. Du slipper då lägga in radbrytningar som sen blir fula på mobilen. Värdet i klassen motsvarar px, men är omräknat till rem för att det skall bli responsivt.

Följande värden finns:

max-w--320
max-w--480
max-w--640
max-w--720
max-w--960
max-w--1120
max-w--full

Exempel på rubrik som blir snyggare om den inte hamnar på bara en rad, eller hur?

Cards

Rubrik.

Detta kort har owl-spacing--s
Kortet har class = card
card__icon
card__heading
card__text
card__button

KLICKA HÄR

Rubrik.

Detta kort har owl-spacing--m
Kortet har class = card
card__icon
card__heading
card__text
card__button

KLICKA HÄR

Rubrik.

Detta kort har owl-spacing--l
Kortet har class = card
card__icon
card__heading
card__text
card__button

KLICKA HÄR

Rubrik.

Detta kort har owl-spacing--xl
Kortet har class = card
card__icon
card__heading
card__text
card__button

KLICKA HÄR

OBS! Använd tex 2vmax (none) som padding för att få space runt om.
Se till att klassen card är vald.

Image cards

Imagecards.

Kortet har class = image-card
image-card__image
image-card__inner (allt utom bilden)
image-card__heading
image-card__button

KLICKA

Nya image cards (tillgänglighetsanpassade)

Info:

Semantiskt är ett kort en article. Men i detta fallet kommer vi ha dem i en lista där vi samlar korten inom en viss kategori. Sektionen är team members. Därför bör de ligga i en lista en ul med flera li inuti. Skärmläsare läser listor på ett tydligt sätt vilket gynnar tillgängligheten. Eftersom det är en lista indenteras innehållet vilket vi inte vill. Vi vill ta bort den defaulta stylingen av listor. Sätt padding 0 på wrappern. (Allt detta är gjort här nedan). Se inställningar för team-member-card i css-en.

Vi vill att läsaren skall läsa namnet innan bilden, men då måste body content komma före media content för läsaren. Det gör vi utan att påverka det visuella. Vi har lagt media under texten, men lagt till order -1 i css (team-member-cards). Skärmläsarna kommer att läsa texten "Följ XX på Facebook" vid FB-ikonen, men det syns inte för den som har syn. Se Stylesheet: Accessibility.

Vi vill att hela kortet skall vara klickbart förutom de sociala ikonerna nedan. Vi har lagt på klassen "clickable-parent" (obs! kräver att kortet är position relative). Vi har lagt den på bilden och på texten, observera att länken måste ändras både i diven runt bilden och diven runt namn/tagline/text.

Att länkarna längst ner ligger i nivå med varandra är för att vi satt margin top =auto på footern