Komponenty i szablony
Zbuduj element raz,używaj go wszędzie.
Komponenty to klocki: hero, tabela cen, galeria, formularz kontaktowy — HTML, CSS i JavaScript z zadeklarowaną strukturą danych. Szablony to rama wokół strony: nagłówek, stopka, fonty i kod wspólny dla wszystkich stron. Razem sprawiają, że czterdziesta strona wygląda jak pierwsza.
Biblioteka.
Okno Komponenty (Components) to biblioteka podzielona na kategorie główne i dodatkowe, z półką ostatnio używanych i wyszukiwarką. Znajdź potrzebny element i przeciągnij go na stronę w podglądzie; ląduje jako blok z domyślną treścią, gotowy do wypełnienia.
Każdy komponent ma ustawienia, które decydują, jak można go używać. Aktywny albo nie. Tylko do odczytu, żeby tego, na którym wszyscy polegają, nie dało się przypadkiem zmienić. Blokada klonowania dla komponentu, który ma istnieć dokładnie raz. I klonowanie dla całej reszty — najszybszy sposób na wariant bez ruszania oryginału.
Ponieważ bloki wskazują na komponenty, ulepszenie komponentu ulepsza każdy blok z niego zbudowany. Popraw odstępy w karcie raz, a będą poprawione na każdej stronie, na której ta karta występuje.
- 1NagłówkiHero ze zdjęciem · Hero z wideo · Hero dzielone
- 2TreśćTekst ze zdjęciem · Karty funkcji · FAQ
- 3SprzedażTabela cen · Siatka produktów
- ·Ostatnio używaneKarty funkcji, przeciągnięte na „Usługi” minutę temu.
- 4Tabela cenTylko do odczytu · blokada klonowania. Ta, na której polega cały zespół.
Wymyślona bibliotekaPrzeciągnij na podgląd
Wnętrze komponentu
Kod, struktura i dane domyślne.
Trzy części, każda z jasnym zadaniem — a jedna z nich sprawia, że pojawia się formularz bloku.
HTML, CSS, JavaScript
Pisane w porządnym edytorze kodu z podświetlaniem składni i trybem pełnoekranowym, każdy w swojej zakładce. To zwykły kod front-endowy; nie ma własnościowego języka, którego trzeba się najpierw nauczyć.
Struktura danych
Opis w JSON pól, które przyjmuje komponent — teksty, obrazy, listy, kolory. castomUI go czyta i generuje formularz ustawień, z którego korzysta każdy blok tego komponentu.
Dane domyślne
Treść, od której zaczyna świeży blok, sprawdzona względem struktury, więc komponent przeciągnięty na stronę nigdy nie trafia na nią pusty ani zepsuty.
Raz porządnie narysuj.
Potem buduj według rysunku.
Generuj albo zmieniaj komponent z AI.
Wygeneruj komponent z AI na podstawie opisu tego, czym ma być i co ma robić. O różnicy decyduje kontekst, a Ty wybierasz go polami wyboru: informacje o projekcie, CSS i JavaScript projektu, jego strony, bloki, CSS, JS i fonty szablonu oraz informacje i bloki bieżącej strony. Komponent wygenerowany z fontami i stylami szablonu przed oczami wygląda, jakby tu pasował; wygenerowany z jednego zdania wygląda jak zdjęcie stockowe komponentu.
Zmiana komponentu z AI działa tak samo na czymś, co już istnieje — „niech karty układają się jedna pod drugą na wąskich ekranach”, „dodaj opcjonalne pole z plakietką” — a wynik to te same trzy części, które możesz otworzyć i przeczytać: kod, struktura, dane domyślne.
Blok może też poprosić o ponowne wygenerowanie swojego komponentu albo o jego prywatny klon, kiedy jedna strona potrzebuje czegoś, czego reszta mieć nie powinna. Więcej o tym w Stronach i blokach.
Szablony:
rama, w której osadzona jest każda strona.
Szablon trzyma wspólne bloki — nagłówek, stopkę, informację o ciasteczkach, wszystko, co się powtarza — w kolejności ustalanej przeciąganiem, oraz kod potrzebny każdej stronie: CSS, JavaScript i HTML, każdy dla HEAD lub BODY.
Wygląd ustala font główny i dodatkowy z listy, na której są między innymi Inter, Roboto, Open Sans, Lato, Montserrat, Oswald, Poppins, Raleway, Outfit, Lexend, Playfair Display, Abril Fatface i Cabin.
Projekt może mieć więcej niż jeden szablon — główny, landingowy bez nawigacji, przyjazny do druku — a strony wybierają swój w szczegółach strony. Sklonuj szablon, żeby zacząć wariant. Każda strona może pominąć nagłówek albo stopkę z szablonu, kiedy ma stać sama.
- 1NagłówekLogo, menu „Góra”, przełącznik języka.
- 2StopkaDane kontaktowe ze zmiennych globalnych.
- 3FontyGłówny Outfit · dodatkowy Inter.
- 4HEADFirmowy CSS, jeden skrypt analityki.
- ·Szablon „Landing”Sklonowany z Głównego. Bez nagłówka, te same fonty.
Wymyślony przykładStrony wybierają swój szablon
Poziom projektu
Kod,
który należy do całej witryny.
Dodatkowy kod
Ustawienia projektu trzymają HTML dla HEAD, HTML dla BODY, bazowy CSS i JavaScript, w tym samym edytorze kodu z trybem pełnoekranowym. Miejsce na tag weryfikacyjny, widżet czatu i regułę, której ma przestrzegać każda strona.
Bazowy CSS z AI
Wygeneruj bazowy CSS projektu z AI — typografię, odstępy, kolory, ustawienia domyślne dziedziczone przez każdy komponent — a potem go przeczytaj i zostaw to, z czym się zgadzasz. To CSS; każdą linijkę możesz edytować.
Kto czego powinien dotykać.
Ten podział jest celowy. Komponenty i szablony to miejsce pracy osoby, która pisze kod front-endowy. Bloki to miejsce pracy wszystkich pozostałych. Projektant może we wtorek dopracować tabelę cen, nie prosząc nikogo, żeby przestał edytować ceny, a osoba wpisująca ceny nie zgubi znacznika zamykającego, bo żadnego znacznika nie ma przed oczami.
Komponenty tylko do odczytu i blokada klonowania przydają się w chwili, gdy w projekcie są więcej niż dwie osoby — o rolach przeczytasz w Współpracy.
Z doświadczenia: w każdym projekcie prędzej czy później wyrasta komponent „Hero kopia 3 ostateczna”. Klonowanie jest tanie, a nazwy nic nie kosztują. Zmień nazwę teraz, póki pamiętasz, czym ta wersja się różniła.
Każde okno,
jedna strona.
Otwórz edytor i ułóż okna tak, jak wymaga tego praca.
Otwórz castomUI Zobacz cennik