Dodawanie niestandardowego arkusza stylów Gantry 5
Dodawanie niestandardowego arkusza stylów Gantry 5 jest dość prostym procesem. Jedyną rzeczą, którą powinieneś zrobić, to utworzyć niestandardowy plik SCSS/CSS o nazwie custom.scss i umieścic go w katalogu templates/g5_helium/custom/scss/.
Jeśli Tryb produkcyjny jest ustawiony na Nie , Gantry automatycznie przekompiluje CSS/SCSS po wprowadzeniu zmian.
Teraz zajmiemy się doszlifowaniem naszego projektu, żeby wyglądał zgodnie z projektem. Myślę, że sekcję nawigacji możemy uznać za poprawną, zajmiemy się więc banerem.
Ustawiliśmy naszą strukturę plików według identyfikatorów sekcji Gantry 5. Moglibyśmy tak zostawić, ale to nie jest dobre podejście ponieważ nie opisuje jasno stylowanych elementów. W miarę rozwoju i rozszerzania się projektów potrzeba modułowości struktury katalogów i plików mocno wzrasta. Dlatego uporządkowanie naszych plików i folderów jest kluczowe. Dodatkową korzyścią jest także tworzenie komponentów, które można ponownie wykorzystać w wielu projektach. Nie ma jednej poprawnej struktury — wszystko zależy od Nas! Osobiście podoba mi się podejście Kevina Powella i struktura 7.1. My wykorzystamy koncepcję 7.1 ale w bardzo okrojonej wersji ponieważ nasza strona nie jest dość rozbudowana i nie bedziemy potrzebować wiekszości folderów i plików.
Struktura folderów
sass/
|
|- abstracts/
| |- _variables.scss
| |- _media-query.scss
| |- _colors.scss
|
|- base/
| |- _base.scss
| |- _reset.scss
| ...
| |- _index.scss
|
|- utilities/
| |- _main.scss
| |- _container.scss
| |- _exceptions.scss
| ...
| |- _index.scss
|
|- components/
| |- _buttons.scss
| |- _carousel.scss
| |- _dropdown.scss
| ...
| |- _index.scss
|
|- layout/
| |- _header.scss
| |- _sidebar.scss
| |- _footer.scss
| ...
| |- _index.scss
|
|- vendors/
| |- _uikit.scss
| |- _modern-reset.scss
| ...
| |- _index.scss
|
|- style.scss
Jak zapewne zauważyłeś, w każdym folderze znajduje się plik o nazwie _index.scss. Jest on potrzebny gdy nie używamy starego sposobu importu przy uzyciu @import tylko nowych metody @use i @farword. Tak jak wspomniałem na początku samouczka w sekcji "własne style css" my użyjemy metody @import dlatego _index.scss możemy usunąć.
Jeżeli poprawiliśmy już strukturę naszych katalogów to przenieśmy style, które do tej pory ustawiliśmy (w pliku header.scss oraz navigation.scss) do naszych nowych plków scss i usuńmy pozostałe pliki scss.
Proponuje style z navigation.scss przenieść do katalogu/pliku base/_reset.scss ponieważ są to style resetujące domyślne ustawienia naszego szablonu Helium od Gantry. Natomiast style ustawiajace nawigację do folderu/pliku layout/_navigation.scss.
Zaczynając od banera możemy zauważyć, że do poprawki jest nagłowek oraz przycisk. Brakuje również "fali" w lewym górnym rogu, która przewija sie w całym projekcie w dwóch kolorach.
Pobieramy "fale z naszego projektu" i wczytujemy do Joomla do foderu np. "backgrounds" pod nazwą np. waves-grey oraz waves-red
Edytujemy nasz plik baner.scss z katalogu components i ustawiamy style dla "fali". Moglibyśmy ustawić falę bezposrednio w naszej cząstce ale my zrobimy to w plikach css. Zapoznaj sie jeżeli jeszcze nie znasz z narzedziami deweloperskimi przegladarki , której używasz. Jest to niezbędne do poruszania po drzewie DOM naszego projektu strony.
Aby móc odwołać się do naszego baneru i nie zmienić ustawień innych elementów dodaj indywidualną klasę do cząstki naszego baneru np. "hauseinvest-baner"
teraz mamy dostęp do naszego banery po klasie "hauseinvest-baner". A więc ustawiamy naszą falę jako tło.
.houseinvest-baner {
.jl-first-column {
background-image: url(images/backgrounds/waves-grey.svg);
background-position: 0 10%;
background-repeat: no-repeat;
}
}
Ustawiamy style dla przycisków nadpisując domyslne style UIkit. W tym celu edytujemy plik _buttons.scss w folderze "components". Aby style zostały dołączone do naszego pliku custom.scss musimy go jeszcze podłączyć analogicznie jak inne pliki, czyli @import "components/buttons". Kolejność importu jest bardzo ważna. Style css (ang. Cascading Style Sheets) jak sama nazwa wskazuje są wczytywane kaskadowo. Style wpisane w dalszej kolejności nadpiszą style poprzednie.
.jl-button {
width: 220px;
height: 60px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
letter-spacing: 1.6px;
text-transform: uppercase;
}
W następnej kolejności ustawimy nagłowek h1 oraz h2. W tym celu edytujemy plik _reset.scss w folderze "base". W projekcie nagłówek h1 ma rozmiar 64px a h2 54px. H2 będzie za duży dla mniejszych ekranów, dlatego posłużymy się zapytaniami o media , które udostepnia nam Gantry.
h1 {
font-size: 64px;
}
@include breakpoint(desktop-only) {
body {
h2,
h2.jl-card-title {
font-size: 54px;
font-weight: bold;
}
}
}
Zdjęcie w sekcji "O inwestycji". Proponuje utworzyć nowy plik "_image-variation.scss" w folderze "layout" i tam stworzyć style dla wygladu obrazka oparte na klasie ".image-variation", którą dodamy do cząstki Logo/Image. Oczywiście importujemy go w custom.scss
.image-variation {
display: block;
position: relative;
img {
position: relative;
z-index: 1;
}
&:before {
position: absolute;
display: block;
content: "";
left: -25px;
top: 10%;
bottom: 10%;
width: 40px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
background-color: #fc3d2f;
}
&:after {
position: absolute;
content: url(images/backgrounds/waves-red.svg);
right: -20px;
bottom: -70px;
z-index: 2;
}
}
Efekt końcowy:
Kolejna sekcja "Galeria" wymaga ustawienia aktywnego stanu naszego filtra co uzuskamy dodając klasę "jl-active" do naszego przycisku filtrującego. Zmiana stylu tego przycisku jest już dosyć prosta. Style umieścimy w pliku componets/buttons.scss
.jl-subnav-pill > .jl-active > a {
background-color: transparent;
color: $accent-color-1;
border-bottom: 1px solid $accent-color-1;
font-weight: bold;
}
Zauważ, że użyłem zmiennej (dzięki scss wbudowanym w Gantry) "$accent-color-1". Dzieki temy nasz aktywny filter dostaje kolor z naszego szablonu, który ustawiliśmy w pliku konfiguracyjnym presets.yaml.
W sekcji "Materiały" poprawimy tylko kolor bulletów/punktorów przy listach. Ponownie użyjemy naszej zmiennej i posługując się narzędziami dla programistów naszej przegladarki odnajdujemy klasy odpowiedzialne za ten element. Style ustawiamy w naszym pliku base/reset.scss. Jeżeli masz inne podejście to zrób to według własnego uznania. Można np. utworzyć plik list.scss w folderze comonents.
.jl-list-disc>::before {
color: $accent-color-1;
}
Sekcję "karty lokali" pozostawiam Tobie. Mam nadzieję, że nie sprawi ona wiele problemów. Zdaje sobie sprawę, że jest trochę pisania styli, ale satysfakcja jest większa niż z przeklikiwania ustawień gotowych modułów(cząstek). Joomlead oczywiście posiada taka cząstkę "Tab".
I pozostała nam ostatnia sekcja CTA oraz Stopka. Są one jak widać nałożone jedna na drugą dlatego zajmiemy się nimi jednocześnie.
Dodajmy klasę do naszego elementu cta (call to action) aby móc sie do niego odwołać w stylach css. Czyli edytując czastkę w zakładce block dodajemy klase np. cta-section. I dodajemy plik layout/cta-section.scss imortujemy go w custom.scss
Modyfikujemy nasz CTA aby wyrównać elementy i zmodyfikować klasy przycisku. Dodałem klasę jl-button-cta (ostylowałem w pliku components/button.scss) zamiast jl-button-default. Dodałem plik layout/cta-section/scss i importowałem go do custom.scss
.cta-section {
background-color: $accent-color-1;
color: #fff;
border-radius: 10px;
}
<div data-jl-grid class="jl-grid-match">
<div class="jl-width-2-3@m">
<div class="jl-card">
<h2>Szukasz wymarzonego domu?</h2>
<p>Jeśli jeszcze nie jesteś pewien - skontaktuj się z nami i umów na bezpłatne spotkanie!</p>
</div>
</div>
<div class="jl-width-expand@m jl-flex jl-flex-right">
<div class="jl-card jl-flex jl-flex-middle">
<button class="jl-button jl-button-cta">
<span jl-icon="icon: receiver;" class="jl-margin-small-right"></span>Zadzwoń
</button>
</div>
</div>
</div>
.jl-button-cta {
color: #000;
font-weight: bold;
}
Ustawmy pozycję CTA względem stopki. Tło oraz kolor czcionki "testimonials" możesz zmienić w stylach szablonu na zapleczy gantry.
#g-footer {
padding: 16rem 0 3rem;
}
#g-testimonials {
background: transparent;
color: #272f42;
padding: 6rem 0;
height: 0;
top: -3rem;
}
Używanie id do stylowania elementów nie jest zalecana metodą. Dodaj klasy do tych elementów i popraw kod.
