Uno sguardo in: The Kit Language

Diciamo che stavi costruendo prototipi per un sito Web con file HTML . Hai circa 10 pagine HTML o giù di lì e queste pagine condividono alcuni componenti comuni come Intestazione, Barra laterale e Piè di pagina.

Ora arriva il problema: se apporti una modifica a questi componenti condivisi, potresti doverli modificare anche negli altri file . È controproducente e una grande perdita di tempo.

Per evitare questo, puoi provare i motori di template . Ci sono una serie di motori di modelli là fuori, ognuno con le sue caratteristiche distintive. In questo post ti illustreremo quello che abbiamo scoperto essere il più semplice ma potente: Kit .

Cos'è il kit?

Kit è un linguaggio proprietario di Codekit che consente di importare variabili e file in HTML. È scritto con estensione .kit . Usando Codekit, può quindi essere compilato in un file HTML su un file salvato.

variabili

Le variabili del kit non sono impostate in pietra; possono essere definiti con la notazione $ o @ . Quindi, se usi Kit insieme a LESS, puoi nominare le tue variabili con la notazione @ per seguire la convenzione LESS. Allo stesso modo, puoi usare $ per Sass. I valori possono essere assegnati con due punti, segno di uguale o spazio. Di seguito sono riportati alcuni esempi:

Tuttavia, vale la pena notare che è possibile impostare solo una variabile per commento, quindi il seguente esempio non funzionerà come variabile.

Importare

Con la lingua del kit, puoi importare qualsiasi tipo di file inclusi .html, .txt, .kit e anche .php . Per importare i file, puoi usare @import o @include .

Inoltre, a differenza della definizione delle variabili, puoi importare più file in una riga, in questo modo:

Al momento del salvataggio, Codekit catturerà il contenuto di questi file e li aggiungerà al file.

Utilizzo del kit

Quindi abbiamo visto cosa Kit ha da offrire. Potrebbero non essere molto, ma sono certamente abbastanza potenti da semplificare la vita quando si gestiscono un sacco di file HTML.

In uno scenario pratico, possiamo suddividere il nostro documento in diversi file, ad esempio: header.kit, footer.kit, head.kit, opening.kit, closing.kit e closing.kit . Importeremo questi file nelle nostre pagine in modo che quando apportiamo una modifica, si applichino su tutte le pagine.

Apertura e chiusura del documento

Sono sicuro che i nomi dei file sono piuttosto auto-esplicativi riguardo a cosa stanno portando i file, tranne (forse) il file opening.kit e il file closing.kit .

Nel nostro esempio qui sotto, il file opening.kit contiene il Doctype, il tag di apertura HTML e il tag di apertura del corpo. In questo file, importiamo anche head.kit che contiene tutto ciò che è head.kit nel elemento, e può anche definire diverse variabili globali che possono essere ereditate attraverso tutti i file, in questo modo:

Nota che ho aggiunto anche due variabili: @body_class nel tag body e @page_name nel tag title. Queste variabili ci permetteranno di impostare diverse classi e nomi di pagine tra le pagine. Se abbiamo due pagine denominate index.kit e about.kit, in ognuno di questi file possiamo impostare i valori di queste due variabili in questo modo:

index.kit

about.kit

Quando abbiamo salvato i file, Codekit sostituirà le variabili che abbiamo inserito nel tag body e il title con quei valori. Una cosa da notare però è che le variabili devono arrivare prima dell'inserimento di opening.kit, altrimenti non verranno prese in considerazione.

Conclusione

Come accennato in precedenza, Kit potrebbe essere il più semplice linguaggio di template disponibile. Utilizza solo il tag di commento HTML e offre una grande flessibilità nella definizione di variabili e nell'importazione di file.

Essere in grado di utilizzare variabili e importare file in HTML significa che possiamo aumentare la nostra produttività, dal momento che non dobbiamo più cambiare i nostri codici più volte in più file, il che richiede molto tempo. Inoltre, ci consente anche di rendere il nostro progetto modulare e quindi più gestibile.

Due nuovi modi per scaricare siti web per la visualizzazione offline in Chrome per Android

Nel dicembre 2016, Google ha esteso la possibilità di scaricare pagine Web per la visualizzazione offline di Chrome per Android tramite l' aggiornamento di Chrome 55 . Ora, Google sta espandendo questa funzione in quanto offre agli utenti di Chrome per Android due nuovi modi per salvare le pagine Web per la visualizzazione successiva.

(Consigli tecnici e di design)

LayoutIt! - Costruire layout bootstrap HTML con facilità

Se vuoi creare un sito web reattivo allora Bootstrap sarà uno strumento utile per te. Quest'ultima innovazione di framework ha portato gli sviluppatori web a un nuovo approccio per la creazione di siti Web e app più facili, veloci e migliori in generale.Ma è piuttosto difficile e per non parlare del dispendio di tempo per costruire un layout da zero. P

(Consigli tecnici e di design)