PatternLab2 - Česká Televize

Stažení repozitáře

git clone [email protected]:cm109563/patternlab-refaktoring.git

Primární větev pro vývoj je develop. Z master se příležitostně dělá deploy.

Instalace

Composer

Nainstaluj globálně Composer.

Node.js

• Nainstaluj globálně Node.js.
• V rootu projektu zadej příkaz npm-install

Nastavení MAMP, LAMP, WAMP apod.

• Přidej si so do hosts ct-patternlab.dev a do aliasu www.ct-patternlab.dev
• Document root nasměruj do složky public ve šložce patternlab-refaktoring.

Spuštění

Spustíme Grunt, generování frontend assetů - CSS, JS, obrázků + generování html šablon:

grunt

Alternativně pak jednorázově php core/console --generate, který přegeneruje Patternlab.

Další Grunt tasky

Viz pak ještě další příkazy v grunt --help:

## Příprava distribučního balíčku
grunt deploy

## Zpracování CSS
grunt css

## Zpracování obrázků
grunt img

## Kontrola psaní
grunt stylelint

Práce s gitem a deployment

Používáme GitHub Flow: https://guides.github.com/introduction/flow/

1. Vyvíjí se v git větvích podle úkolů z Trella. Např. 5-layout k úkolu https://trello.com/c/TZN2qtVP/5-layout-atomy-grid-a-page. Do Trella se vždy dává odkaz na větev na Gitlabu.
2. Merge do develop se dělá pomocí Merge Requestu na Gitlabu: https://repo.czech-tv.cz/cm109563/patternlab-refaktoring/merge_requests/new
3. Po diskuzi o změnách v kódu se dělá ostrý merge do develop.
4. Po mergnutí develop do master je po chvíli vše vidět na https://sekvoj.czech-tv.cz/.

Stylování

Zatím jen poznámky bez ladu a skladu:

• Dokumentace PatternLabu je na http://patternlab.io/docs/index.html
• Styly užitečné jen pro prezentaci v PatternLabu jsou v souboru pattern-scaffolding.scss. Viz .sg-bg a další dole.

.sg- třídy: Stylování prezentace pro Pattern Lab

Pro vizuální prezentaci neviditelných prvků v PL se vám můžou hodit tyhle třídy:

.sg-bg {
  background: lightgrey;
}

.sg-bg-light {
  background: #eee;
}

.sg-block {
  display: block;
}

.sg-pad {
  padding: .5em .25em;
}

Používáme například v http://localhost:3400/?p=templates-layout.

Viz také soubor pattern-scaffolding.scss.