schemat kolor Droopler

Zmiana schematu kolorów w Droopler za pomocą SCSS

Przewodnik konfigurowania
vows
Volodymyr Umanets
22.06.2020

Z wykorzystaniem Droopler masz pełną kontrolę nad swoją witryną. Tym bardziej więc możesz w przyszłości rozważyć indywidualne dostosowanie elementy skórek.

Dzięki modułowej konstrukcji i wysoce parametrycznemu SCSS posiadasz możliwość, żeby to zrobić. Zobaczmy zatem, jak łatwo możesz zmienić schemat kolorów swojej witryny.

Aby osiągnąć cele, będziemy potrzebować:

  • zainstalowanej dystrybucji Droopler
  • zainstelowanego Gulp - zestawu narzędzi do automatyzacji i usprawnienia przepływu pracy
  • podstawowej znajomość SASS - najbardziej profesjonalnego preprocesora CSS

Jak pracować ze skórką dziedziczącą?

Struktura SCSS

Przyjrzyjmy się strukturze SCSS, którą oferuje Droopler:

scss1

  • style.scss - łączy cały kod SCSS ze skórki podstawowej i dziedziczącej 
  • print.scss - łączy cały kod SCSS do drukowania ze skórki podstawowej i dziedziczącej
  • config/ - najważniejszy katalog zawierający konfigurację podtemu,
  • biblioteki/ - dodatkowe pliki potrzebne w Drupalu.

Możesz użyć dowolnej struktury. Zalecamy jednak podzielenie plików na layout/ and components/ directories. Pamiętaj tylko, aby dołączyć swoje pliki do style.scss.

Konfiguracja SCSS

Droopler został zaprojektowany, aby ułatwić Ci pracę. Nie musisz nadpisywać kodu SCSS lub CSS, aby wprowadzić własne zmiany. W większości przypadków wystarczy zmodyfikować plik konfiguracyjny scss / config / _base_theme_overrides.scss 

Istnieje wiele poziomów zmiennych:

  • Proste kolory

$color-agamemnon: #196dba;
$color-menelaus: #5d98ce;

  • Zmienne ogólne (dotyczy globalnych elementów HTML)

$link-color: $color-agamemnon; 
$footer-text-color: $color-thersites;

  • Paragrafy (z prefiksem $d-p-)

$d-p-subscribe-color: $color-odysseus; 
$d-p-subscribe-header-color: $color-odysseus;

  • Blog i lista blogów (z prefiksem $ d-blog-)

$d-blog-font-color: $color-odysseus; 
$d-blog-font-bold-color: $color-troilus;

Gulp

Aby skompilować kod i wygenerować wynik CSS, przeglądarka rozumie, że będziemy potrzebować Gulp. Plik konfiguracyjny gulpfile.js został już uwzględniony w projekcie.

Wystarczy uruchomić gulp watch w katalogu skórki dziedziczącej (pamiętaj, aby najpierw skompilować droopler_theme), a będzie on śledzić wszystkie zmiany w plikach źródłowych skórki i kompilować zasoby.

$ cd web/themes/custom/droopler_subtheme
$ gulp watch

Inne polecenia Gulpa dla skórek:

  • gulp watch - obserwuje oraz przetwarza zmiany w SCSS i JS,
  • gulp compile - kompiluje wszystkie SCSS/JS w skorce dziedziczącej środowiska DEV,
  • gulp dist - j.w., ale w środowisku PROD,
  • gulp clean - czyści pliki pochodne,
  • gulp debug - wyświetla informacje o debugowania Gulp.

Akcja

Teraz wyobraźmy sobie, że chcemy zmienić scemat koloru stopki.

Oryginalny wygląd:

footer

Krok 1: Uruchom gulp watch

start gulp

Krok 2: W pliku konfiguracyjnym scss/config /_base_theme_overrides.scss znajdź sekcję stopki z komentarzem.
// Footer
// $footer-background: $color-cassandra;
// $footer-text-color: $color-thersites;
// $footer-header-color: $color-odysseus;

Aby zmienić kolory, wystarczy usunąć komentarz linii i/lub dodać inne powiązane zmienne oraz zmodyfikować wartość. Zachęcamy do podążania za naszymi pomysłami i do tworzenia prostych zmiennych kolorystycznych opartych na mitologii rzymskiej (sprawdź wyjaśnienia w pliku).

Niemniej jednak, dla celów tutoriala możemy pominąć tę regułę i zająć się naszą własną konwencją nazewnictwa fikcyjnego.

Krok 3: Zdefiniuj niestandardowe proste kolory.
$color-tutorial-1: #fff;
$color-tutorial-2: #fff;
$color-tutorial-3: #cf4647;
$color-tutorial-4: #2a3f6d;
$color-tutorial-5: #fff;
$color-tutorial-6: rgba(#cf4647, .3);
$color-tutorial-7: #fff;
$color-tutorial-8: #cf4647;
$color-tutorial-9: #2a3f6d;
Krok 4.1: Zastąp zmienne komponentów.
$footer-header-color: $color-tutorial-1;
$footer-text-color: $color-tutorial-2;
$footer-background: $color-tutorial-3;
$bottom-footer-background-color: $color-tutorial-4;
$bottom-footer-text-color: $color-tutorial-5;
$headings-color: $color-tutorial-9;
$stripe-background-color: $color-tutorial-6;
Krok 4.2: Zastąp zmienne kolorów.
$color-agamemnon: $color-tutorial-8;
Krok 4.3: Zastąp selektor niestandardowy.
.site-footer .social-media-wrapper a {
 color: $color-tutorial-7;
}
Krok 5: Po zapisaniu pliku gulp watch ponownie skompiluje cały SCSS ze zmienioną konfiguracją.

gulp watch

Wygląd ostateczny:

default theme

Skórka alternatywna 1:

$color-tutorial-1: #cf4647;
$color-tutorial-2: #20232a;
$color-tutorial-3: #fff;
$color-tutorial-4: #20232a;
$color-tutorial-5: #fff;
$color-tutorial-6: rgba(#5d5d5d, .3);
$color-tutorial-7: #5d5d5d;
$color-tutorial-8: #cf4647;
$color-tutorial-9: #0f1831;

alt theme 1

Skórka alternatywna 2:

$color-tutorial-1: #6aeae1;
$color-tutorial-2: #c4cdd6;
$color-tutorial-3: #0f1831;
$color-tutorial-4: #0c152e;
$color-tutorial-5: #c4cdd6,
$color-tutorial-6: rgba(#0f1831, .3);
$color-tutorial-7: #c4cdd6;
$color-tutorial-8: #0f1831;
$color-tutorial-9: #0f1831;

alt theme2

Wskazówka

Przejdźmy od razu do ulepszeń, które możesz wprowadzić. Posiadamy możliwość utworzenia funkcji palety, która pozwoli uruchamiać się między różnymi jej zestawami.

1. Najpierw utwórz plik config/_helpers.scss.
2. Dodaj następną funkcjonalność.
@function val($map, $keys...) {
 @each $key in $keys {
   $map: map-get($map, $key);
 }

 @return $map;
}

@function palette($keys...) {
 @return val($palettes, $keys...);
}

Funkcja palety będzie przechodzić przez zmienne schematu kolorów $palettes, które zamierzamy stworzyć.

3. Agreguj plik w config/_all.scss.
@import "helpers";
@import "base_theme_overrides";
@import "base_theme_overrides";
4. Następnie dostosuj plik scss/config/_base_theme_overrides.scss.
$palettes: (
 default: (
   color-tutorial-1: #fff,
   color-tutorial-2: #fff,
   color-tutorial-3: #cf4647,
   color-tutorial-4: #2a3f6d,
   color-tutorial-5: #fff,
   color-tutorial-6: rgba(#cf4647, .3),
   color-tutorial-7: #fff,
   color-tutorial-8: #cf4647,
   color-tutorial-9: #2a3f6d,
 ),

 alt-1: (
   color-tutorial-1: #cf4647,
   color-tutorial-2: #20232a,
   color-tutorial-3: #fff,
   color-tutorial-4: #20232a,
   color-tutorial-5: #fff,
   color-tutorial-6: rgba(#5d5d5d, .3),
   color-tutorial-7: #5d5d5d,
   color-tutorial-8: #cf4647,
   color-tutorial-9: #0f1831,
 ),

 alt-2: (
   color-tutorial-1: #6aeae1,
   color-tutorial-2: #c4cdd6,
   color-tutorial-3: #0f1831,
   color-tutorial-4: #0c152e,
   color-tutorial-5: #c4cdd6,
   color-tutorial-6: rgba(#0f1831, .3),
   color-tutorial-7: #c4cdd6,
   color-tutorial-8: #0f1831,
   color-tutorial-9: #0f1831,
 ),
);
5. Zastąp zmienne.
$headings-color: palette($p, color-tutorial-9);
$stripe-background-color: palette($p, color-tutorial-6);
$footer-background: palette($p, color-tutorial-3);
$footer-text-color: palette($p, color-tutorial-2);
$footer-header-color: palette($p, color-tutorial-1);
$bottom-footer-background-color: palette($p, color-tutorial-4);
$bottom-footer-text-color: palette($p, color-tutorial-5);
$color-agamemnon: $color-tutorial-8;
.site-footer .social-media-wrapper a {
 color: palette($p, color-tutorial-7);
}

Aby uzyskać takie same wyniki jak poprzednio, ustaw odpowiednią wartość $p.

  • $p: default; dla domyślnej skórki,
  • $p: alt-1; dla skórki alternatywnej 1,
  • $p: alt-2; dla skórki alternatywnej 2.

Definiując wartość $p, jesteśmy w stanie znacznie łatwiej zmienić paletę kolorów. Jest to bardzo pomocne szczególnie wtedy, gdy masz różne sekcje z identyczną listą elementów i gdzie pierwsza sekcja ma jasną paletę kolorów, a druga - ciemną. Łącząc funkcję pomocnika palety z niestandardowymi rozwiązaniami, możemy sprawnie ustawić elementy trybu jasnego (schemat kolorów wykorzystujący ciemną typografię, elementy UI i ikonografię na jasnych tłach) i ciemnego.

// _buttons.scss
@mixin color-button($p: light) {
 background-color: palette($p, $color-tutorial-2);
 color: palette($p, $color-tutorial-1);
}

// _sections.scss
.section-light {
 @include color-text();

 @include color-button();
}

.section-dark {
 @include color-text(dark);
 @include color-button(dark);
}

Podsumowanie

Jak widać powyżej, Droopler to potężne narzędzie nie tylko dla redaktorów treści, ale także dla specjalistów design i programistów front-end.

Użyliśmy i skonfigurowaliśmy najlepsze technologie, aby pomóc Ci w tworzeniu własnych, wysokiej jakości stron internetowych. Ten samouczek pokazuje, jak łatwo możesz dostosować ten zgrabny i potężny silnik oraz dodać dowolne schematy kolorów.

W ramach wsparcia dla Drupala utrzymujemy istniejące strony internetowe i rozbudowujemy je o nowe funkcjonalności
Check related tutorials