Kód

Jak spustit HTML

Primárním cílem všech vývojářů je rychlejší vývoj, zejména rychlý bootstrapping. V posledních několika letech jsou k dispozici desítky rámců, které usilují o to, aby naše prototypy vzrostly během několika minut.

Bohužel mnoho z těchto rámců datuje rychle, protože požadavky na projekt se vyvíjejí a je třeba je obnovit nebo nahradit.

Pokud hledáte nejnovější rámec, který řeší problémy, se kterými se nyní setkávají starší řešení, a současně maximalizujete svůj pracovní postup, nemůžete se zdaleka špatně HTML Kickstart.

Mřížka

Mřížka je jedním z nejdůležitějších aspektů jakéhokoli rámce, zvláště jelikož pružná mřížka určuje, jak může být místo vhodné.

Kickstart HTML nám poskytuje možnost flexibilní sítě nebo standardní (ne-flexibilní) mřížku - ačkoli není jasné, kdy byste ji využili s ohledem na rostoucí dominanci mobilních zařízení.

Chcete-li vytvořit flexibilní mřížku se dvěma sloupci se stejnou velikostí, použijeme: 

Content Here
Content Here

Jak můžete vidět, všechno, co jsme udělali, je přidat některé jednoduché třídy na tři div. Pokud dáváte přednost ne-flexibilní mřížce, stačí pouze odstranit název třídy flex od vnějšího div.

(Mějte na paměti, že flexibilní mřížka se bude táhat na šířku celé obrazovky, zatímco flexibilní mřížka má maximální šířku 1024 pixelů.)

Kromě výše uvedených tříd existuje řada tříd pomocníků, které můžeme použít, například:

  • show-desktop a hide-desktop s těmito třídami se můžete rozhodnout, zda chcete, aby mřížka byla viditelná na stolním počítači.
  • show-tablet a skrýt-tablet platí stejný koncept zde, ale pro tablety zařízení.
  • show-phone a hide-phone , tyto třídy diktují viditelnost, tentokrát pro chytré telefony.

Pokud bychom chtěli například skrýt dvě sloupové mřížky na smartphonech, použijeme například tento kód: 

...

Navigace

HTML Kickstart nám nabízí tři možnosti menu: vertikální levou, vertikální pravou a vodorovnou.

Verze, kterou budete nejčastěji chtít, je horizontální nabídka. Chcete-li jej kódovat, potřebujeme pouze neurčené seznamy: 

  • Bod 3

    • Chcete-li levou vertikální nabídku, přidejte vertikálně k otevírací ul a pokud chcete vertikální pravé menu, přidejte vertikálně doprava , například: 

      ...
      ...

    Je to opravdu jednoduché kódování nabídek s kódem HTML Kickstart.

    Standardní styly

    HTML Kickstart vám nabízí některé skvělé základní styly z vypnutí. Je zřejmé, že je budete chtít vylepšit pro váš projekt, ale pro rychlé prototypování jsou více než dostačující.

    Pokud jde o typografii, kterou používá HTML KickStart Steve Matteson 'S Arimo font ve výchozím nastavení. Můžete vidět celou řadu nastavení typu tady.

    Tlačítka stylů jsou vždy středem pozornosti v jakémkoli rámci a HTML Kickstart je dodáván s tlačítky ve všech tvarech a velikostech. Nemusíte pro tento účel používat třídy, stačí vytvořit značku tlačítek a styly budou automaticky použity.

    Pokud byste preferovali styly tlačítek, které mají být použity na značku kotvy, stačí přidat do ní třídu tlačítek :

    Existuje také několik různých stylů, které můžeme použít: 

         Pop

    Konečně máme také možnost vytvořit panel s tlačítky, se syntaxem podobným horizontálnímu menu:

    snímky

    HTML Kickstart pomáhá vylepšovat UX generováním vyskakovacích oken pro galerie a obrázky pro vás. Je to mnohem lepší řešení než otevření nového okna.

    Chcete-li vytvořit plně funkční galerii pro rozcestování založenou na jazyce JavaScript, potřebujete pouze následující kód:

    Je to jednoduché provedení a nepotřebujete jediný řádek JavaScript.

    Obrázky mají také některé skvělé třídy pomocníků, jako je například popiska. Tato třída aplikovaná na obrázek zobrazuje název obrázku jako stylizovaný popis:

    Máme také zarovnání vpravo a zarovnání levých tříd, které můžeme použít pro plovoucí obrazy vlevo a vpravo. (HTML Kickstart přidá malý okraj, takže obrázky nejsou proti textu.)

    A samozřejmě HTML Kickstart nám také poskytuje jednoduché prezentace. Používá to BXSlider posuvník, aby to zvládl.

    Kód pro jednoduchý posuvník bude vypadat takto: 

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

    Posuvník je pro mobilní zařízení aktivován dotykem a ještě jednou nepotřebujete jediný řádek JavaScript.

    formuláře

    Poslední věc, kterou vás chci představit, je formulář. Formuláře jsou životně důležité pro jakýkoli rámec, protože jsou jednou z nejtěžších věcí, které se na webových stránkách dají do stylu.

    HTML Kickstart si zachovává svou jednoduchost, pokud jde o formuláře, a vertikální formu lze vytvořit jednoduše jako:

    Jak můžete vidět, pro tuto formu jsem se stěží musel použít žádné třídy. Jediné, co jsem udělal, je přidat vertikální třídu nahoře tak, aby prvky formuláře nebyly považovány za vložené.

    Jedna z mých oblíbených částí HTML Kickstart je jednoduchá chybová upozornění používaná s formuláři: 

      Upozornění na chybu 
      Výstražné upozornění
      Úspěšné oznámení

    Závěr

    Existuje mnoho možností, které přicházejí s kódem HTML Kickstart, opravdu jsme poškrábali pouze povrch; tam je obrovská sada ikon, tooltips a dokonce i záložky.

    Skutečná síla HTML Kickstart je jednoduchost jeho kódu. Nedostatek cizích divů a tříd z něj činí skvělý spořič času, méně kódu znamená méně chyb. Pokud hledáte začátek kódování vlastního HTML od začátku, nebo pokud hledáte jednoduchý rámec pro rychlý prototyp návrhu HTML Kickstart je skvělá volba.

    Používali jste HTML Kickstart? Preferujete jiný rámec? Dejte nám vědět v komentářích.

    html rámců začíná html html kód html pomocníci html kickstart prototyp html learning html