Sass, Bootstrap i Font Awesome

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:

https://semantic-ui.com/

http://getbootstrap.com/

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.

Link do Font Awesome: http://fontawesome.io/

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