Frontend
ciąg dalszy
W ostatnim poście na temat Frontendu opisałem używany przeze
mnie kompilator do stylów i skryptów. Dziś opiszę nieco szerzej strukturę i
użyte frameworki do stylów.
Zastanawiałem się na kilkoma różnymi gotowymi komponentami
do frontendu. Ostatecznie wyłoniłem dwóch finalistów: Bootstrap oraz Semantic UI. Semantic jest znacznie bardziej
rozbudowany i zawiera dużo więcej gotowych modułów. Wiąże się to jednak z tym, że „waży” znacznie
więcej niż bootstrap. Oba frameworki mają to, na czym zależało mi najbardziej. Jest
to grid do budowy strony oraz podstawowo zdefiniowane najbardziej potrzebne
rzeczy jak buttony, checkbox-y, radio buttony itp. Finalnie wygrał Bootstrap,
ponieważ jest lżejszy od semantic oraz jest gotowa wersja Sass bootstrapa
(Semantic-UI jest w Less-ie, tak wiem, że można znaleźć wersję Sass zrobioną
przez kogoś innego, ale chodzi mi o to, co Framework ma w standardzie). Nie
zależało mi na tym by wszystko wyglądało pięknie już w samym frameworku, bo
nadpisuję wygląd tak, by była to bardziej „moja” strona. Nie chciałbym też, by
po wejściu na bloga było znajome uczucie „ale chamski bootstrap”.
Linki do obu frameworków:
Modyfikacja Bootstrapa
Dzięki temu, że bootstrap można ściągnąć w Sass-ie, mam
możliwość modyfikacji poprzez nadpisywanie zmiennych, które później są używane
w stylach (jeśli nie wiesz co to zmienne i jak pisze się style w Sass-ie, post
na ten temat będzie w przyszłości J).
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
Dzięki temu, w bardzo prosty sposób pozbyłem się standardowo
zaokrąglonych krawędzi w komponentach bootstrapa oraz gradienty w guzikach
(obie z tych rzeczy nie wyglądają dla mnie zbyt atrakcyjnie) w kilku liniach
kodu. Dodatkowo, stworzyłem kilka własnych plików, które implementują nowe
style lub nadpisują istniejące. Dzięki temu, tworzę stronę, która wygląda tak
jak chcę, a zarazem mam dobrą bazę, która rozwiązuje za mnie wiele problemów.
Kolejnym istotnym komponentem mojego projektu jest otwarta
biblioteka z ikonami Font Awesome. Ikon jest mnóstwo i bardzo łatwo się ich
używa. Wystarczy jedynie dodać odpowiednią klasę, której nazwę możemy otrzymać
po kliknięciu na interesującą nas ikonę.
Po dodaniu plików font awesome do naszego projektu,
wszystkie te ikony stają się dla nas dostępne.
Konfiguracja w Gulpie:
Aby wszystko wyżej opisane zadziałało, stworzyłem cztery
taski w gulpie. Dwa z nich są odpowiedzialne za skopiowanie fontów z moich
folderów z kodem roboczym do docelowego.
gulp.task('fonts',['fonts-bootsrap'], function () {
return gulp
.src(fonts.in)
.pipe(gulp.dest(fonts.out));
});
gulp.task('fonts-bootsrap', function () {
return gulp
.src(fonts.inBootstrap)
.pipe(gulp.dest(fonts.out + 'bootstrap/'));
});
Task z fontami bootstrapowymi zostanie prawdopodobnie
wyrzucony z finalnej wersji. Jest tam, ponieważ bootstrap bazuje na ikonach w
nich zawartych i rzuca mi błędy do konsoli, a nie lubię tam czerwonych barw J. Więc gdy tylko pozbędę się zależności w
bootstrapie, wyrzucę taska i fonty z projektu.
Pozostałe dwa taski dotyczą kompilacji Sass-ów do plików
css.
gulp.task('sass', function () {
return gulp.src(scss.in)
.pipe(sass(scss.sassOpts))
.pipe(gulp.dest(scss.out));
});
gulp.task('sassprod', function () {
return gulp.src(scss.in)
.pipe(sass(scss.sassOpts))
.pipe(cssnano())
.pipe(gulp.dest(scss.out));
});
Różnią się od siebie tylko jedną rzeczą: style produkcyjne
są dodatkowo minifikowane. Task Sass jest używany, gdy kompiluję frontend na
potrzeby developmnetu, dla łatwiejszej nawigacji w stylach i debugowaniu
problemów. Sassprod natomiast wykorzystywany jest, gdy kompiluję style, które
mają pójść na „produkcję”.
Tak wygląda organizacja stylów w moim projekcie. Jak do tej
pory, pisze się mi go bardzo przyjemnie, choć nie mam zbyt wiele czasu.
Zachęcam do komentarzy i sprawdzenia źródeł na GitHubie. Polecam również
frameworki, które dziś opisałem, choć są na tyle znane, że pewnie nie muszę
tego robić.
Do następnego razu J
