[PL] Let’s Write – pierwsze style
Tak wyszło, że w tym tygodniu nie miałem za dużo czasu na projekt. Jednak nie mogłem go nie ruszyć. Dlatego postanowiłem zabrać się za style CSS. Dobrze, że traktuję ten projekt jak piaskownicę do nauki Reacta bo to co w tym tygodniu wyszło jest okropne. Mimo, że udało mi się tylko dodać podstawy pod menu górne :D Mimo wszystko mam dla Was kilka informacji o postępach.
Poprzednie wpisy z serii:
Pamięć tymczasowa
Przez weekend nie było mnie w domu więc musiałem korzystać z laptopa zamiast z głównego komputera. Pierwsze co rzuca się w oczy to to, że człowiek szybko zapomina co robił. Pobrałem źródła, chciałem uruchomić stronę i zobaczyłem, że nie ma folderu dist! Pamiętacie co pisałem poprzednio, że nie wrzucam tego folderu do repozytorium? Zapomniałem o tym. Przy okazji przypomniałem sobie o konieczności zainstalowania pakietów. Wykonałem npm install potem chciałem uruchomić Gulpa, ale nie chciał działać. Po kilkunastu minutach doszedłem do przyczyny problemu – na laptopie miałem starą wersję Node.js. Szybka aktualizacja. Ok, mogę uruchomić Gulpa. Potem problemy sprawiał jslint, którego jednak postanowiłem wyłączyć bo nie mogłem znaleźć przyczyny problemu.
Projekt się uruchomił.
Zacznijmy od czegoś prostego…
Postanowiłem, ze na rozgrzewkę zajmę się menu. W końcu menu w aplikacji jest bardzo ważne :D Celem było przygotowanie stylów dla górnego menu. Już teraz powiem, że nie udało się tego celu osiągnąć. Nie znam się na ładnym stylowaniu.
Pierwsze co zrobiłem to zacząłem szukać kolorów dla swojej aplikacji. Do tego zadania bardzo mocno polecam tę stronę Adobe: https://color.adobe.com/pl. Pozwala ona bardzo łatwo na podstawie jednego koloru poszukać inne pasujące wg wybranych reguł. To mi nie pomogło i wybrałem brzydkie kolory:
Po wybraniu podstawowych kolorów dodałem plik SCSS ze zmiennymi. W tych zmiennych zapisałem wartości kolorów. Polecam takie podejście bo ułatwia zachowanie spójności w aplikacji i powoduje, że zmiany wyglądu są dużo prostsze. Mój plik variables.scss wyglądał tak:
//colors $main-color: #1978B2; $red: #FF8385; $blue: #6AC6FF; $second: #CCCCAD; $dark-second: #B2B171; $text-color: #222; $error-color: $red; $success-color: $second; $white: #fff; $border-color: #939393;
Zaimportowałem go w głównym pliku ze stylami i od teraz mogę używać tych zmiennych chcąc ustawić kolor elementu.
Zabrałem się za czytanie na temat menu w aplikacji webowej. Opierałem się o tę stronę: https://webdesign.tutsplus.com/articles/a-simple-responsive-mobile-first-navigation–webdesign-6074
W trakcie czytania dodałem w projekcie plik resetujący domyślne style. Wziąłem go ze strony http://cssreset.com/scripts/html5-doctor-css-reset-stylesheet/. Dzięki takiemu plikowi będziesz mieć pewność, że na wszystkich przeglądarkach elementy, dla których nie napisałeś stylów będą wyglądały tak samo.
Przyszła pora na dodanie komponentów dla menu głównego. Założyłem, że w aplikacji będą przynajmniej dwa menu – dla użytkowników niezalogowanych i dla użytkowników zalogowanych. Ale będą się one różniły tylko linkami. Dlatego na początek zabrałem się za bazowy komponent, taki sam dla wszystkich menu. Wg artykułu, który podałem powyżej, potrzebowałem dla menu dwóch elementów – jednego na górze i drugiego na dole. W konsekwencji powstał taki potwór:
BaseMainMenuTop = React.createClass({
render: function() {
return <header className="base_main-menu--top">
<h1 className="logo"><a href="#">Let's Write</a></h1>
<a className="to_nav" href="#main_menu">Menu</a>
</header>
}
})
BaseNav = React.createClass({
render: function() {
return <nav className="base_main-menu--nav" id="main_menu">{this.props.children}</nav>
}
})
To będzie tylko chwila
Męczyłem się dobre dwie godziny ze stylami dla tego menu. Mimo, że na początek przepisywałem je ze strony to i tak nie chciały działać. Przyczyną była literówka. Zapomniałem dopisać dwukropka przed after . Zanim znalazłem ten błąd to próbowałem zrobić menu w inny sposób zbierając fragmenty z różnych stron. Poddałem się i doprowadziłem do działania tą wersję. Ostatecznie doszedłem do takiego stylu dla górnego menu:
.base_main-menu {
&--top {
background-color: $main-color;
padding: 15px 20px;
&:before,&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
a.to_nav {
@media screen and (min-width: $min-md) {
display: none;
}
float: right;
text-decoration: none;
color: $white;
padding: 0 10px;
font-size: 12px;
font-weight: bold;
line-height: 22px;
height: 22px;
text-transform: uppercase;
letter-spacing: 0.1em;
&:hover, &:focus {
background: $blue;
}
}
h1.logo a {
float: left;
color: $dark-second;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
line-height: 22px;
letter-spacing: 0.2em;
}
}
&--nav {
background-color: $main-color;
@media screen and (min-width: $min-md) {
position: absolute;
top: 5px;
right: 10px;
background: none;
}
& ul {
list-style: none;
padding: 5px 0;
& li {
@media screen and (min-width: $min-md) {
display: inline;
}
& a {
@media screen and (min-width: $min-md){
float: left;
border: none;
padding: 0 10px;
}
display: block;
padding: 0 20px;
color: $white;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
line-height: 2em;
height: 2em;
border-bottom: 1px solid $border-color;
&:hover, &:focus {
background: $blue;
}
}
&:last-child a {
border-bottom: none;
}
}
}
}
}
Co złego może się stać?
Dzieje się tutaj trochę magii ponieważ używając samego CSSa udało się osiągnąć efekt gdzie dla widoków mobilnych zawartość menu jest na dole strony, a dla widoków desktopowych menu wyświetla się na górze. Magia. Końcowy efekt wygląda tak:
1) Dla widoków desktopowych:
2) Dla widoków mobilnych:
Działa. Wygląda to okropnie. Ten tydzień poświęcę na znalezienie gotowego szablonu i użycie go. Nie chcę żeby świat cierpiał patrząc na to co sam zrobię.
Na koniec dam tylko link do strony opisującej jak pisać style mobile-first: https://zellwk.com/blog/how-to-write-mobile-first-css/
Leave a Comment