Začněte webové projekty rychleji se Sassaparilla

Autor: Peter Berry

Datum Vytvoření: 12 Červenec 2021

Datum Aktualizace: 13 Smět 2024

Začněte webové projekty rychleji se Sassaparilla - Tvůrčí

Obsah

Instalace
Uvedení do provozu
Pohled na config.rb
Nastavení CSS
Složka libs
Lepší rytmus a vedení
Fáze 1
Fáze 2
Mezery a další prvky
Jeden poslední trik
Závěrečné slovo
Líbilo se vám to? Přečtěte si tyto!

Pokud jste něco jako my, budete souhlasit, že zahájení nového sestavení frontendu je často opakující se úkol. Mezi nastavením kódu HTML, JavaScriptu a CSS (a také přidáním vyzkoušených výchozích nastavení do svého nastavení) pravděpodobně strávíte velkou část těch prvních několika hodin věcem, které jste dělali už stokrát. Vyrobili jsme Sassaparillu, aby nás (a snad i vás) zachránil, abychom to nemuseli dělat.

Samozřejmě existuje spousta nástrojů, které to také dělají. Na mysli je skvělý HTML5 Boilerplate nebo Zurb’s Foundation. Často jsme však strávili tolik času odstraňováním prvků z těchto kotlových desek, jako když jsme přidávali prvky do každého nového projektu.

Řešení? Zkombinujte pouze nezbytné prvky pro zahájení projektu a zajistěte jejich maximální flexibilitu. Prostřednictvím pokusů a omylů a spousty vylepšení jsme se rozhodli pro následující cíle Sassaparilly:

Zjednodušte a zpřístupněte přístupný a škálovatelný kód při psaní
Zaměřte se na typografii a vertikální rytmus a usnadněte to
Připravte systém, který se snadno přizpůsobí změnám při práci na projektu
Zahrňte pouze to, co potřebujeme, a použijte co nejméně prvků

A tak se narodila Sassaparilla. Není to standard, je to spíše výchozí bod pro vaše projekty.

Stáhněte si zdrojové soubory pro tento kurz

Instalace

Jak už název napovídá, Sassaparilla se spoléhá na preprocesor Sass a svého nejlepšího přítele Compass, aby udržel věci flexibilní. Abyste mohli ve svých projektech používat Sassaparillu, budete si muset nainstalovat Compass.

To je docela jednoduché, pokud používáte Mac:

Jednoduše otevřete terminál
Zadejte gem update --system pro aktualizaci vašeho prostředí Ruby
Zadejte drahokam nainstalovat kompas a nainstalujte nejnovější verzi Compass

Úplné podrobnosti instalace najdete na webových stránkách společnosti Compass.

Uvedení do provozu

Uvedení Sassaparilly do provozu je opravdu snadné. Můžete použít grafické uživatelské rozhraní, jako je Codekit, ale pro tento výukový program budeme předpokládat, že používáte Mac, budete používat terminál a stáhli jste si Sassaparillu z webu, místo aby byl rozdvojen z GitHubu.

Vytvořte novou složku s názvem Demo
Zkopírujte soubory ze Sassaparilla do složky Demo
Otevřete nové okno v terminálu
Zadejte cd, poté přetáhněte složku Demo do okna terminálu a stiskněte návrat. Nyní jste změnili adresář na tuto složku
Nyní zadejte hodinky kompasu a stiskněte návrat
Měla by se zobrazit zpráva „Compass požaduje změny“. To znamená, že pokaždé, když uložíte soubor SCSS, aktualizuje váš CSS
A je to

Pohled na config.rb

Konfigurační soubor obsahuje cesty k vašim podkladům. V případě Sassaparilla ponecháme konfigurační soubor v kořenovém adresáři projektu a poté uchováme všechny naše CSS, JavaScript, obrázky atd. Ve složce aktiv, přičemž každý prvek má podsložku. Díky tomu je vše pěkné a upravené.

Pokud však chcete pracovat s jiným nastavením, můžete v konfiguračním souboru změnit cesty k vašim podkladům. Možná budete muset zastavit a znovu spustit příkaz sledování kompasu, abyste viděli změny.

Sassaparilla sleduje konkrétní kaskádu CSS a využívá několik souborů SCSS, z nichž každý slouží jinému účelu. To vám umožní zahrnout (nebo nezahrnout) samostatné části podle toho, co potřebujete.

Nastavení CSS

Všechny soubory SCSS pro ukázkový web žijí ve složce assets / CSS. Zde se také kompilují všechny CSS. V našem případě do jednoho souboru CSS s názvem screen.css.

Tento soubor obsahuje převážnou část vašich stylů a také spojuje další dílčí šablony stylů do jednoho souboru CSS. Celkově budete většinu své práce v této šabloně stylů dělat, jakmile napíšete globální nastavení.

Jako výchozí nastavení obsahuje některé výchozí styly pro prvek záhlaví, odkazy a dotazy médií. Ty jsou ponechány hlavně jako příklad toho, jak použít některou syntaxi, kterou si vysvětlíme později. Pokud chcete, můžete je odstranit.

Složka libs

Také si všimnete podsložky s názvem libs. Zde žije následujících pět souborů SCSS. Všimněte si, že všichni začínají podtržítkem. To jednoduše znamená, že když řekneme společnosti Compass, aby zkompilovala náš projekt, tyto soubory se nezkompilují do jejich vlastního souboru CSS. Soubory s předponou podtržítka proto zahrnují:

_reset.scss Tento soubor obsahuje jednoduchý reset pro prvky HTML. Předpokládá, že vaše webová stránka bude mít formuláře, proto je také resetujte. Pokud váš web nepoužívá formuláře, můžete tato resetování odebrat.
nastavení. scss Tento soubor obsahuje všechny proměnné pro web. Žijí zde věci, jako jsou barvy a velikost písma. Tento soubor slouží k definování vašeho základního nastavení a využívá základní měřítka a míry velikosti písma Compass. O tom později.
mixins.scss Mixiny jsou jakékoli uživatelem vytvořené mixiny pro projekt (Compass má již mnoho předdefinovaných, které stojí za to vyzkoušet). Ve výchozím nastavení jsme pro začátek přidali několik jednoduchých. Podle potřeby přidejte další.
typografie.scss Tento soubor obsahuje základní sazbu pro web. Spoléhá se na nastavení proměnných v souboru settings.scss, kterému se budeme dále věnovat. Tento soubor ve výchozím nastavení obsahuje několik příkladů syntaxe, která vám pomůže začít.
forms.scss Tento soubor obsahuje výchozí prvky formuláře a standardní styling. Pokud formuláře nepoužíváte nebo byste je raději upravovali sami, můžete tento soubor bezpečně vynechat.

Lepší rytmus a vedení

Sassaparilla se snaží co nejvíce usnadnit vedení a mezery při psaní přístupného kódu. Nejde nám o záludnou matematiku, ale rádi pracujeme v ems. Naštěstí to Compass zvládne pomocí několika chytrých výchozích nastavení a triků a několika příkazů.

Postupujeme takto:

Fáze 1

V nastavení.scss nastavte svou velikost základního písma: ve výchozím nastavení je to nastaveno na 16 pixelů a obecně to ve vašich výpočtech funguje dobře, takže byste to nemuseli měnit (můžete, pokud chcete).

Nastavte si výšku základní čáry: abychom zabránili zvláštně rozloženému vedení a velkým mezerám mezi řádky, rádi bychom použili menší měřítko, jako byste to mohli udělat v tištěném designu. Něco jako 6px funguje dobře. S touto hodnotou se vyplatí pohrávat, podle toho, která písma používáte. Později použijete násobky této základní linie k vytvoření úvodní a mezery.

Fáze 2

V souboru typography.scss nastavte výchozí typografii. Jak použijete své styly, je jen na vás, ale v tomto příkladu používáme globální nastavení (pro H1, P, UL atd.).

Chcete-li zachovat pěkný vertikální rytmus, použijete při každém nastavení velikosti písma příkaz Upravit-velikost písma-na. Toto jednoduše řekne prvku, aby se stal touto velikostí v pixelech a poté převeden na ems, vzhledem k velikosti základního písma, kterou jsme nastavili v první fázi. Tato hodnota (např. 26px) se také stane vaší základní jednotkou, abyste zjistili, kolik řádků potřebujete nad a pod prvkem.

Například:

@include adjust-font-size-to (26px);

Upravte velikost písma na 26px a vraťte ekvivalent.

okraj: 0 0 rytmus (2, 26px) 0;

Přidejte dva řádky naší výšky základní čáry (6x2 = 12px) pod prvek, založte tyto dva řádky na naši velikost písma a covertujte na ekvivalent ems.

Proto:

@include adjust-font-size-to (26px); okraj: 0 0 rytmus (2, 26px) 0;

Nám dává:

velikost písma: 1.625em; výška řádku: 1,15385em; marže: 0 0 0,46154 em 0;

Mezery a další prvky

Chcete-li zachovat konzistentní vertikální rytmus, budete muset také vertikálně rozmístit další prvky na stránce (sekce atd.). Jak by to štěstí mělo, funkce Compass leader a trailer jsou postaveny právě pro tuto příležitost.

Používáte je jako:

@include padding-leader (x);

Přidá x řádků odsazení na základě výšky základní čáry nad prvkem.

@include padding-trailer (x);

Přidá x řádků odsazení na základě výšky základní čáry pod prvkem.

@include leader (x);

Přidá x řádků okraje na základě výšky základní čáry nad prvkem.

@include trailer (x);

Přidá x řádků okraje na základě výšky základní čáry pod prvkem.

Jeden poslední trik

Řekněme například, že chcete do mediálního dotazu přidat hodnotu pixelu, ale chcete tuto hodnotu převést na příslušnou hodnotu em pro velikost základní čáry nebo velikost základního písma. To může znamenat několik výpočtů. Sassaparilla obsahuje dvě funkce, které vám s tím pomohou.

Ty se hodí pro věci, jako je rozteč písmen, stejně jako pro vytváření hraničních hodnot pro mediální dotaz em, spíše než pro pixely. Můžete použít následující syntaxi:

em-font (#px)

Převede hodnotu (#) na pixely na základě velikosti základního písma.

em-base (#px)

Převede hodnotu (#) na pixely na základě výšky základní čáry.

Závěrečné slovo

Takže tady to máte. Doufáme, že vám Sassaparilla bude ve vašich projektech užitečná, a budeme rádi, když se dozvíte, jestli ano, nebo pokud máte nějaké dotazy. A konečně, pokud máte chuť přispět, vítáme vás.

Slova: Peter Coles a Adam Robertson