Kod

Jak rozpalić swój HTML

Podstawowym celem wszystkich programistów jest szybszy rozwój, w szczególności szybkie ładowanie. W ciągu ostatnich kilku lat udostępniono dziesiątki ram, które mają na celu stworzenie prototypów w ciągu kilku minut.

Niestety, wiele z tych frameworków powstaje szybko, ponieważ wymagania projektowe ewoluują i wymagają odświeżenia lub wymiany.

Jeśli szukasz najnowszej platformy, która rozwiązuje problemy, na które napotykają już starsze rozwiązania, a jednocześnie maksymalizuje przepływ pracy, nie możesz zrobić nic złego z Kickstart HTML.

Siatka

Siatka jest jednym z najważniejszych aspektów każdej struktury, zwłaszcza, że ​​elastyczna siatka określa, jak responsywna może być strona.

Kickstart HTML daje nam opcję elastycznej siatki lub standardowej (nieelastycznej) siatki - chociaż nie jest jasne, kiedy użyjesz tej ostatniej, biorąc pod uwagę rosnącą dominację urządzeń mobilnych.

Aby utworzyć elastyczną siatkę z dwiema równymi wielkościami kolumn, użylibyśmy: 

Content Here
Content Here

Jak widać, wszystko, co zrobiliśmy, to dodanie kilku prostych klas do trzech elementów div. Jeśli wolisz nieelastyczną siatkę, wszystko, co musisz zrobić, to usunąć nazwę klasy flex z zewnętrznego div.

(Zwróć uwagę, że elastyczna siatka będzie rozciągać się do szerokości całego ekranu, podczas gdy nieelastyczna siatka ma maksymalną szerokość 1024 pikseli.)

Oprócz klas bazowych powyżej, istnieje kilka klas pomocniczych, z których możemy skorzystać, na przykład:

  • show-desktop i hide-desktop z tymi klasami możesz zdecydować, czy chcesz, aby ta siatka była widoczna na komputerze.
  • show-tablet i tablet - hide stosuje się tę samą koncepcję, ale w przypadku tabletów.
  • pokaż ponownie telefon i ukryj telefon , te klasy dyktują widoczność, tym razem dla smartfonów.

Gdybyśmy na przykład chcieli ukryć naszą siatkę dwóch kolumn na smartfonach, użylibyśmy kodu: 

...

Nawigacja

Kickstart HTML daje nam trzy opcje menu: pionową lewą, pionową prawą i poziomą.

Wersja, którą będziesz chciał najczęściej, to menu poziome. Aby go zakodować, potrzebujemy tylko nieuporządkowanych list: 

  • Element 3

    • Jeśli chcesz pionowe lewe menu, po prostu dodaj pionowe do otwierającego ul, a jeśli chcesz pionowe prawe menu, dodaj pionowe prawo , tak jak poniżej: 

      ...
      ...

    Naprawdę łatwo jest kodować responsywne menu za pomocą Kickstart HTML.

    Domyślne style

    Kickstart HTML daje ci świetne podstawowe style od off. Oczywiście będziesz chciał udoskonalić je do swojego projektu, ale do szybkiego prototypowania są one więcej niż wystarczające.

    Jeśli chodzi o typografię, używa HTML KickStart Steve Matteson „s Arimo domyślnie czcionka. Możesz zobaczyć pełny zakres ustawień typu tutaj.

    Style przycisków zawsze stanowią centrum uwagi w każdym frameworku, a Kickstart HTML ma przyciski we wszystkich kształtach i rozmiarach. Nie musisz nawet używać do tego klas, wystarczy utworzyć znacznik przycisku, a style zostaną automatycznie zastosowane.

    Jeśli chcesz zastosować style przycisków do znacznika zakotwiczenia, wystarczy dodać do niego klasę przycisków :

    Istnieje również wiele różnych stylów, które możemy zastosować: 

         Muzyka pop

    Wreszcie, mamy również opcję tworzenia paska przycisków, o składni podobnej do menu poziomego:

    Obrazy

    Kickstart HTML pomaga ulepszyć UX, generując wyskakujące okienka dla galerii i zdjęć. To o wiele lepsze rozwiązanie niż otwarcie nowego okna.

    Aby stworzyć w pełni funkcjonalną bibliotekę pop-up opartą na języku JavaScript, potrzebujemy tylko następującego kodu:

    Jest prosty w implementacji i nie potrzebujesz jednej linii JavaScript.

    Obrazy mają również kilka wspaniałych klas pomocniczych, takich jak podpis. Ta klasa zastosowana do obrazu pokazuje tytuł obrazu jako tytułowany napis:

    Mamy również klasy wyrównania-prawa i wyrównania-lewy , które możemy użyć do unoszenia obrazów w lewo i prawo. (Kickstart HTML doda trochę marginesu, aby obrazy nie były wyświetlane przeciwko tekstowi).

    Oczywiście, Kickstart HTML zapewnia nam również proste pokazy slajdów. To używa BXSlider suwak do obsługi tego.

    Kod prostego suwaka będzie wyglądał mniej więcej tak: 

    • A Content Slider
      This slider handles HTML content as well as images.

    Suwak jest obsługiwany dotykowo na urządzenia mobilne i po raz kolejny nie potrzebujesz jednej linii JavaScript.

    Formularze

    Ostatnią rzeczą, którą chcę wam przedstawić, są formularze. Formularze są niezbędne dla każdej struktury, ponieważ są jedną z najtrudniejszych rzeczy do ukształtowania na stronie internetowej.

    Kickstart HTML zachowuje swoją prostotę, jeśli chodzi o formularze, a formularz pionowy można utworzyć po prostu jako:

    Jak widać, w tym formularzu nie musiałem wcale korzystać z żadnych zajęć. Wszystko, co zrobiłem, to dodać klasę pionową u góry, aby elementy formularza nie były traktowane jako wbudowane.

    Jedną z moich ulubionych części Kickstart HTML są proste powiadomienia o błędach używane w formularzach: 

      Informacje o błędzie 
      Ostrzeżenie
      Informacja o sukcesie

    Wniosek

    Istnieje mnóstwo opcji, które pochodzą z Kickstart HTML, my naprawdę tylko porysowany powierzchni; jest ogromny zestaw ikon, podpowiedzi, a nawet zakładek.

    Prawdziwą siłą Kickstart HTML jest prostota jego kodu. Brak zewnętrznych bloków div i klas powoduje, że oszczędza czas, a mniej kodu oznacza mniej błędów. Jeśli chcesz rozpocząć kodowanie własnego HTML od zera, lub jeśli szukasz prostej platformy do szybkiego prototypowania projektu Kickstart HTML to świetna opcja.

    Czy używałeś Kickstart HTML? Czy wolisz inne ramy? Daj nam znać w komentarzach.

    frameworki html początek html Kod HTML pomocników html html kickstart prototypowanie html uczenie się html