Jak jsem postavil grotesk komponentu reakce (a knihovnu css), která zjednodušuje typ webu

Ahoj všichni, toto je můj vůbec první příspěvek na blogu, takže bych rád slyšel vaši kritiku. Stačí zanechat komentář s jakoukoli radou, kterou máte (styl psaní, gramatika, budoucí nápady atd.).

Co je to grotesk?

Grotesk je css knihovna a komponent pro reakce, jehož cílem je zjednodušit typografii webu. Důvod, proč jsem ji postavil, je ten, že jsem si všiml, že začínám téměř každý statický web se stejnou sadou témat nebo typografických pravidel, a tak jsem se rozhodl postavit malou knihovnu, kterou mohu jednoduše zapojit do svého dalšího projektu. Protože většinou pracuji pouze na aplikacích pro reakce a na obyčejných statických webech, vytvořil jsem komponentu reakce a knihovnu css.

Cíle

Cílem grotesku nebylo skončit s veškerým stylingem, má to být velmi minimální statér, který podpoří váš pravidelný styling. Pro jeden motiv je miniifikovaný soubor css dostupný pouze za 1.8kb což je podle mě docela úžasné.

Také se snaží co nejvíce usnadnit přizpůsobení a nabízí více než 15 různých proměnných, se kterými můžete pracovat.

Jak to funguje

Postavil jsem grotesk.css pomocí scss pro proměnné a přizpůsobení (kvůli poměrně nízké podpoře prohlížeče uživatelských vlastností css). Toto byl první projekt, ve kterém jsem použil scss, a musím říci, že pracovní postup s živým kompilátorem sass ve VS Code je velmi hladký a vývojový zážitek byl velmi příjemný.

Protože to byl můj vůbec první balíček npm, rozhodl jsem se použít něco jednoduchého pro komponentu Reag, takže jsem se rozhodl použít create-react-library což velmi usnadnilo sestavení a publikování komponenty. Pro styl a přizpůsobení jsem se rozhodl jít s citem, protože jsem chtěl něco jednoduchého, ale výkonného, ​​co by mohlo být dynamicky tématické.

Přizpůsobení

Přizpůsobení bylo velmi jednoduché na implementaci v knihovně css, protože vše, co uživatel musel udělat, bylo změnit proměnné scss v horní části souboru a zbytek by byl spravován silou scss. U složky reakce to však bylo trochu složitější.

Způsob, jakým jsem se rozhodl, bylo umožnit uživateli přidat volitelný theme prop na jejich <Grotesk> komponent. Vyžaduje objekt, který jim umožňuje měnit proměnné, a pokud jsou některé vlastnosti vyloučeny, vrátí se na výchozí.

Zde je příklad tématu:

const theme = {
    bg: '#ffffff',
    fgBody: '#2d3748',
    fgHeadings: '#000000',

    hrColor: 'rgba(0, 0, 0, 0.07)',

    linkColor: '#8a4baf',

    preBg: 'rgba(0, 0, 0, 0.04)',
    preColor: '#2d3748',

    inlineCodeBg: 'rgba(0, 0, 0, 0.04)',
    inlineCodeColor: 'hsl(0, 79 %, 63 %)',

    quoteBg: '#ffffff',
    quoteBorder: '#8a4baf',
    quoteColor: '#6a727c',

    fontFamMain: 'space-grotesk, sans-serif',
    fontFamMono: 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New" monospace',
    lineHtMain: '1.5',
    lineHtMono: '1'
}

grotesk vs grotesk.css

Která je pro vás? Osobně bych knihovnu css doporučil téměř všem lidem. I když používáte projekt reakce, ve většině případů je knihovna css dostatečně dobrá. Jedinými případy, kdy bych komponentu reakce doporučil, je situace, kdy váš projekt již používá emoce nebo pokud plánujete vytvořit hodně dynamických témat (například více než dvě témata).

Můj proces

Pro knihovnu css byl můj proces velmi jednoduchý, vše, co jsem udělal, bylo nejprve vytvořit soubor html s veškerým obsahem, který jsem chtěl upravit, a pak jsem začal pracovat na grotesk.light.scss . Protože používám kód VS, kompilace byla velmi jednoduchá s úžasným pluginem kompilátoru Live Sass (vřele doporučuji).

U složky reakce byl proces trochu složitější, ale jak jsem již zmínil výše, emoce a knihovna create-react-library opravdu pomáhají, zvláště pokud jste začátečník jako já.

Závěrečné poznámky

Jsem si jistý, že tam pravděpodobně jsou nějaké chyby, se kterými jsem se ještě nesetkal, a možná dělám mnoho dalších věcí špatně, ale to je důvod, proč jsem projekt otevřel jako open source. Pokud narazíte na nějaké chyby, přejděte na github a otevřete problém a já se na to co nejdříve podívám. Také pokud si myslíte, že můžete vylepšit grotesk, stačí otevřít PR se svým příspěvkem a já ho přidám. Využijme naplno sílu open source chlapů.

P.S:Rád bych do README přidal sekci „Webové stránky, které používají grotesk“, takže pokud jste vytvořili web pomocí grotesku nebo pokud máte nějaké požadavky na funkce, napište mi DM na twitter ([at]nairkartik_), rád bych od vás slyšel. Mír. ✌️