Inhaltsverzeichnis

ComponentsComponents - Hero SectionComponents - Buttons
Components - Card - BlogComponents - Card - AuszeichnungenComponents - Card - LeistungenComponents - Card - ProjekteComponents - Card - JobsComponents - Card - StatementsComponents - Card - TestimonialsComponents - CTA - Button & LinkComponents - CTA

Absolute Positioning

Neue Hero-Section mit Klasse .is-bg auf Bild
(sehr einfache und schnelle Umsetzung)

Sehr cool seit ACSS 3.2.10 - Einfach jedes Element mit Klasse .is-bg als Background machen. Alles andere kann ganz normal genutzt werden.

* Höhe der Section mit BG Bild richtet sich nach Content-der Section

Anleitung Wrike hier

Absolute Positioning => Centered Content Divs (set to absolute)

SEHR COOL => BESTE Lösung
Kevin Powell => .CSS „inset = 0, margin: auto“
https://www.youtube.com/shorts/9cSL5dP4rgM

1. Absolute Content-Div => ABSOLUTE => über CSS
– inset: 0;
– margin: auto;
– height: fit-content;

I am a heading

Here your text ...

I am a button
leaves dark 1920x1080

Flexbox => „align-items & justify-content“

1. Main Card => .align-items–center
2. Main Card => .justify-content–center

I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

leaves dark 1920x1080

Geary => .Mit %-Werten spielen

1. Absolute Content-Div => ABSOLUTE
– Top: 50%
– Left: 50%

2. Absolute Content-Div => TRANSFORM
– Translate X: -50%
– Translate Y: -50%

I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

leaves dark 1920x1080

Cards - Clickable Parent & Focus Parent

Cards - Clickable Parent (+ Focusable Parent A11Y)

Anleitung ACSS-Klasse => .clickable-parent + .focus-parent–outline

Sinn:
– Macht einen Accessible Link-Wrapper RUND um ganze Card
– Nimmt dazu EINEN Link innerhalb der Card und erweitert ihn auf ganze Card

Video:
https://www.youtube.com/watch?v=q_R2JCMz2I8
=> ab Minute: 1:00:55

Steps:
1/2 – CLICKABLE PARENT
1. Card normal aufbauen
2. EINEN Link auf irgendein Element setzen (meist Heading) + diesem Element die Klasse „.clickable-parent“ vergeben
3. Positioning:
=> Element mit Klasse „.clickable-parent“ => Position STATIC
=> Nächsthöherem Parent-Div => Position STATIC
=> Main-Card => Position RELATIVE
2/2 – FOCUSABLE PARENT
=> Am Schluss ganzer Main-Card die Klasse „.focus-parent–outline“ geben!!!

Flex Grids

Flex Grid - mit BCSS Klassen

BESTE und EINFACHSTE LÖSUNG:
=> BCSS flex-grid Klassen => Anleitung im Wrike-Blueprint (acss tuts_2)
=> https://www.wrike.com/workspace.htm?acc=856675#/task-view?id=925355791&pid=925355765&cid=-9

Step 1 – Settings am Parent Div

  1. flex-grid DESKTOP => .flex-grid–3 (Desktop 1-6)
    flex-grid MOBILE => .flex-grid–xl-2 / .flex-grid–l-1
  2. Centering Last Row => passiert automatisch über obige Klassen
    Grow Last Row => .flex–grow am PARENT div
  3. Equal Height of Cards
    => Am Parent Div => .b-flex-grid–stretch (oder: Align Cross Axis => stretch)
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar. Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar. Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar. Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA
I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar. Here goes your text ... Select any part of your text to access the formatting toolbar.

CTA

Components

Text für die Topline hier eintragen (p) ...

HERO-SECTION: Text für die Heading hier eintragen (h1) ...

Das ist der Text für die Subline. Das ist der Text für die Subline. Das ist der Text für die Subline. Das ist der Text für die Subline. Das ist der Text für die Subline.

leaves dark 1920x1080

Compenents - Card Blog

Compenents - Card Auszeichnungen

Compenents - Card Leistungen

Compenents - Card Projekte

Compenents - Card Jobs

Compenents - Card Statement

Compenents - Card Testimonial