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--featuredGlö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
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.
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
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
On Primary
Primary Container
On Primary Container
Secondary
On Secondary
Secondary Container
On Secondary Container
Accent
On Accent
Accent Container
On Accent Container
Error
On Error
Error Container
On Error Container
Background
On Background
Surface
On Surface
Surface Variant
On Surface Variant
Outline
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
Primary 80%
60%
40%
20%
Complementary
Secondary 80%
60%
40%
20%
Complementary
Accent 80%
60%
40%
20%
Complementary
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-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:
.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
OWL-spacing
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.
Kortet har class = card
card__icon
card__heading
card__text
card__button
Rubrik.
Kortet har class = card
card__icon
card__heading
card__text
card__button
Rubrik.
Kortet har class = card
card__icon
card__heading
card__text
card__button
Rubrik.
Kortet har class = card
card__icon
card__heading
card__text
card__button
Se till att klassen card är vald.
Image cards
Imagecards.
image-card__image
image-card__inner (allt utom bilden)
image-card__heading
image-card__button
Nya image cards (tillgänglighetsanpassade)
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
Double-click this headline to edit the text.
Web developerLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Double-click this headline to edit the text.
Web developerLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Double-click this headline to edit the text.
Web developerLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.