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.

20 forum popolari per web designer e sviluppatori

Il web design cambia e si trasforma così rapidamente che è quasi impossibile per noi rimanere aggiornati sulle tendenze abbastanza velocemente. Uno semplice che può essere d'aiuto è visitare forum di web design popolari per vedere cosa ronza nella community.I forum sono un ottimo posto per scoprire cosa c'è di nuovo, cosa è trendy e caldo per oggi . Part

(Consigli tecnici e di design)

La felicità può essere la migliore strategia per aumentare la produttività: ecco come

Puoi chiamarlo segreto, "hack della vita" o solo buon senso, ma la felicità è la chiave della produttività. Essere positivi e soddisfatti può essere uno dei modi più rapidi ed efficaci per migliorare la produttività sul posto di lavoro. Vari studi hanno dimostrato che sentirai molto meno stress nelle attività quotidiane - dentro e fuori il luogo di lavoro - da un cambiamento positivo nell'atteggiamentoSfortunatamente per un sacco di membri della forza lavoro che trascorrono la settimana dietro una scrivania o un bancone, sentirsi felici e lavorare in modo produttivo non sembrano a

(Consigli tecnici e di design)