DevKit

Uproszczona biblioteka klas narzędziowych CSS w stylu Tailwinda. Czysty CSS, warianty responsywne i wszystkie wartości konfigurowalne zmiennymi CSS.

1. Instalacja

Z GitHub Packages (potrzebny .npmrc z tokenem):

npm install @muraii-pl/devkit

albo prosto z repozytorium:

npm install github:Muraii-pl/DevKit

2. Dołączenie

@import "@muraii-pl/devkit";

Wersja zminifikowana: @muraii-pl/devkit/min.

3. Konfiguracja

:root {
  --color-primary: #7c3aed;
  --spacing: 0.3rem;
}

Pełna instrukcja: docs/configuration.md.

Motywy

Trzy motywy (default, warm, ocean), każdy w wersji jasnej i ciemnej. Włączasz je atrybutem data-theme na <html> albo na dowolnym fragmencie strony. Tryb ciemny dopisujesz jako drugie słowo. Całą stronę przełączysz w nawigacji. 

<html data-theme="dark">        <!-- default ciemny -->
<html data-theme="warm">        <!-- warm jasny -->
<html data-theme="ocean dark">  <!-- ocean ciemny -->
<div data-theme="light">       <!-- jasny fragment na ciemnej stronie -->

data-theme="ocean dark"

Ten fragment ma własny motyw niezależnie od reszty strony.

Kolory

Dla każdego tokenu --color-* są klasy text-*, bg-* i border-*, a także *-transparent i *-current. Role (primary, secondary, success, warning, danger) zmieniaj pod markę projektu.

Paleta

bg-primary
bg-secondary
bg-success
bg-warning
bg-danger

text-primary

text-red-700

bg-blue-100 text-blue-900 border-blue-300
border-current przejmuje kolor tekstu

Odstępy

Klasa p-N to N × --spacing (domyślnie 0.25rem). Kierunki: p, px, py, pt, pr, pb, pl, tak samo dla m, a do tego m*-auto, gap, gap-x i gap-y.

Skala

m-4 p-6
mx-8 my-2 px-4 py-1
mt-6 ml-12 p-2
gap-1
gap-1
gap-1
gap-6
gap-6
gap-6
gap-x-8
gap-y-2
…
…
…
…
mx-auto

Typografia

font-sans – Zażółć gęślą jaźń

font-serif – Zażółć gęślą jaźń

font-mono – Zażółć gęślą jaźń

text-xs

text-sm

text-base

text-lg

text-xl

text-2xl

text-3xl

text-4xl

font-normal

font-medium

font-semibold

font-bold

leading-none: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

leading-tight: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

leading-normal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

leading-relaxed: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

text-left

text-center

text-right

text-justify: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

italic

underline

no-underline

uppercase

LOWERCASE

capitalize each word

truncate: bardzo długi tekst, który nie mieści się w kontenerze i zostanie ucięty wielokropkiem

Layout

block inline-block inline
inline-flex inline-flex
w-full
w-auto
h-full w kontenerze o stałej wysokości
overflow-hidden: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
overflow-y-auto: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
relative – kontener
absolute inset-0

Flex

1
2
3
1
2
3
1
2
3
1
2
3
startstart
centercenter
endend
betweenbetweenbetween
aroundaroundaround
evenlyevenlyevenly
items-center
wyższy
self-start
self-end
self-stretch
flex-1
flex-1
flex-none
shrink-0
grow
element 1
element 2
element 3
element 4
element 5

Grid

1
2
3
4
5
6
col-span-12
col-span-6
col-span-6
col-span-4
col-span-4
col-span-4
3
3
2
2
1
1
col-span-full

Obramowania

border
border-2
border-4
border-t
border-b
border-l
border-r
border-primary
border-danger
border-gray-400
rounded-none
rounded-sm
rounded
rounded-lg
rounded-xl
rounded-full

Efekty

shadow-none
shadow-sm
shadow
shadow-lg
opacity-100
opacity-75
opacity-50
opacity-0
cursor-pointer
cursor-default
cursor-not-allowed

Responsywność

Każda klasa ma warianty sm: (od 40rem), md: (48rem), lg: (64rem) i xl: (80rem). Działają od danej szerokości w górę (mobile-first). Zmień szerokość okna.

Teraz: bazowy (< 40rem)

1
2
3
4

text-sm md:text-lg

flex-col md:flex-row

md:hidden – widoczne tylko poniżej md

Tokeny

Wszystkie zmienne z src/tokens.css z bieżącą wartością.

Token Wartość

Wszystkie klasy

Lista generowana z załadowanego devkit.css. Każda klasa ma też warianty sm:, md:, lg: i xl:. Kliknięcie nazwy kopiuje ją do schowka.

Klasa Deklaracje