Lag ditt eget Dijit CSS-tema med MINDRE CSS

Dojo Toolkit ser ut til å bare bli bedre og bedre. Et av de nye tilleggene i Dojo 1.6 var bruken av MINDRE CSS for å lage Dijit-temaer. Overgangen til å bruke LESS er strålende fordi det gjør det mye enklere å lage ditt eget Dijit-tema. La oss ta en titt på hvordan Dojo utnytter MINDRE for å lage Dijit-temaer og lage vårt eget tema.

Se demo

MINDRE CSS

Ideen bak LESS CSS er ganske enkel:utvide CSS med dynamisk oppførsel som variabler, mixins, operasjoner og funksjoner. Enkelt sagt: fiks CSS sine arvebegrensninger. LESS kan brukes på kommandolinjen/serversiden med Node.js eller med en JavaScript-fil på klientsiden. For formålet med å bygge Dojo-temaer, bruker vi Node.js-løsningen. For å installere MINDRE, og forutsatt at du har npm , kjør følgende kommando:

npm install less

LESS-pakken skal nå være installert på maskinen din, klar til bruk med Node.js, som også må installeres på maskinen din.

Dijits bruk av MINDRE

Naviger til følgende katalog i Dojo 1.6+ kassen:

cd dijit/themes/claro/

Du vil se bygget {WidgetName}.css filer, men også et antall {WidgetName}.less filer -- .css filer ble bygget med MINDRE! Før du går inn på individuelle .less filer, åpne variables.less . variables.less filen inneholder de deklarerte variablene som brukes i andre CSS-filer; vurder variables.css en "standard"-fil. Ta en titt på noen utdrag fra variables.less :

/* General */
@text-color: #000000;				/* Text color for enabled widgets */

@border-color: #b5bcc7;				/* Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer */
@popup-border-color: #769dc0;		/* Border for Dialog, Menu, Tooltip.   Must also update tooltip.png (the arrow image file) to match */
@minor-border-color: #d3d3d3;		/* Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar */

@disabled-border-color: #d3d3d3;	/* Border color for disabled/readonly Button, TextBox etc. widgets */
@disabled-background-color: #efefef;/* Disabled button, textbox, etc. */
@disabled-text-color: #818181;		/* Text color for disabled/readonly widgets */

/* ... */

/* Input widgets
@focused-border-color: #769dc0;				/* Focused textbox, editor, select, etc. */
@error-border-color: #d46464;				/* Border for textbox in error state */
@error-focused-border-color: #ce4f4f;		/* Border of textbox in error state, and focused */
@erroricon-background-color: #d46464;		/* Background color for exclamation point validation icon (for TextBox in error state) */
@textbox-background-color: #fff;			/* Default background color of TextBox based widgets */
@textbox-hovered-background-color: #e9f4fe;	/* Background color when hovering a unfocused TextBox, Select, Editor, or other input widget */
@textbox-focused-background-color: @textbox-background-color;
@textbox-error-background-color: @textbox-background-color;
@textbox-disabled-background-color: @disabled-background-color;

/* mixins */
.border-radius (@radius) {
	-moz-border-radius: @radius;
	border-radius: @radius;
}

.box-shadow (@value) {
	-webkit-box-shadow: @value;
	-moz-box-shadow: @value;
	box-shadow: @value;
}

Du vil legge merke til hvordan MINDRE CSS fungerer:

  • For å definere en variabel, start med "@"-symbolet sammen med variabelnavnet.
  • For å bruke en variabel, definer egenskapen og angi @-prefikset variabelnavn som verdi.
  • For å definere en blanding, oppgi et velgernavn med argumenter og definer underegenskaper for den egenskapen.

Du kan bringe koblingsdefinisjoner inn i andre .less filer ved å bruke følgende direktiv som du finner i hele temaet .less filer:

@import "variables";

Åpne nå Calendar.less og se etter forekomster av "@border-color". Du vil merke deg at disse forekomstene refererer til "@border-color"-variabelen i variables.css-filen. Alle andre variabler som begynner med "@" vil også bli erstattet i byggeprosessen!

Lag ditt eget Dijit-tema

Den enkleste måten å komme i gang med ditt eget tema på er å kopiere de sist opprettede, offisielt støttede dem. I dette tilfellet vil det temaet være claro. Claro-temaet er et profesjonelt utseende blått tema som gjør bruk av CSS-gradienter, overganger og avrundede hjørner når det støttes av nettleseren.

Kjør en rask cp for å kopiere claro-mappen til en mappe som du vil kalle temaet ditt:

cpmac claro davidwalsh

Før du begynner å redigere den eksisterende koden, er det viktig å endre ".claro"-erklæringene i hver CSS-fil til ".{yournamespacename}". Temaet mitt vil hete "davidwalsh", så jeg bruker tekstredigeringsprogrammet mitt til å finne alle forekomster av ".claro" og erstatte det med @theme , som vi kan kartlegge til "davidwalsh". Med kopien av claro klar, hopp inn i variables.less fil og gjør eventuelle fargeendringer du finner passende. Jeg er mer en "grønn fyr" selv, så jeg justerer fargene innenfor variables.less til grønnaktige motparter:

/* General */
@text-color: #000000;				/* Text color for enabled widgets */

@border-color: #b7c7b5;				/* Border color for (enabled, unhovered) TextBox, Slider, Accordion, BorderContainer, TabContainer */
@popup-border-color: #b7c7b5;		/* Border for Dialog, Menu, Tooltip.   Must also update tooltip.png (the arrow image file) to match */
@minor-border-color: #b7c7b5;		/* Color of borders inside widgets: horizontal line in Calendar between weeks, around color swatches in ColorPalette, above Dialog action bar */

@disabled-border-color: #d3d3d3;	/* Border color for disabled/readonly Button, TextBox etc. widgets */
@disabled-background-color: #efefef;/* Disabled button, textbox, etc. */
@disabled-text-color: #818181;		/* Text color for disabled/readonly widgets */

/* ... */

/* Input widgets
@focused-border-color: #7bc076;				/* Focused textbox, editor, select, etc. */
@error-border-color: #d46464;				/* Border for textbox in error state */
@error-focused-border-color: #ce4f4f;		/* Border of textbox in error state, and focused */
@erroricon-background-color: #d46464;		/* Background color for exclamation point validation icon (for TextBox in error state) */
@textbox-background-color: #fff;			/* Default background color of TextBox based widgets */
@textbox-hovered-background-color: #e9fee9;	/* Background color when hovering a unfocused TextBox, Select, Editor, or other input widget */
@textbox-focused-background-color: @textbox-background-color;
@textbox-error-background-color: @textbox-background-color;
@textbox-disabled-background-color: @disabled-background-color;

Etter å ha redigert min variables.less fil for å matche ønsket design, er det på tide å se på hver {WidgetName}.less fil for å gjøre passende endringer hvis jeg foretrekker at widgeten skal se annerledes ut enn claro-utseendet. Når alle {WidgetName}.less filene er redigert etter din smak, er det på tide å kompilere .less filer til fungerende CSS-filer!

Kompilering av ditt mindre CSS-tema

Før du kompilerer temaet, la oss ta en titt på en annen fil i temakatalogen: compile.js . compile.js ble skrevet for å skanne gjeldende katalog samt skjema- og layoutkataloger på jakt etter .less filer. Alle less filer analyseres og ved hjelp av variables.less direktiver, injiseres variabelverdier på deres korresponderende steder og CSS-fil opprettes.

For å bruke compile.js , naviger til temaets mappe via kommandolinjen og kjør følgende kommando:

node compile.js

Når du kjører denne kommandoen, .css filer vil bli generert med samme navn som deres .less motparter. En rask skanning av disse filene vil bekrefte at alle variabler er plassert på de riktige stedene! Nå er temafilene dine klare til bruk!

Implementering av ditt egendefinerte Dijit-tema

Finn themeTester.html-filen (/dijit/themes/themeTester.html ) og endre den for å inkludere temaet ditt:

// Fill in menu/links to get to other themes.		
// availableThemes[] is just a list of 'official' dijit themes, you can use ?theme=String
// for 'un-supported' themes, too. (eg: yours)
var availableThemes = [
	{ theme:"davidwalsh", author:"David Walsh", baseUri:"../themes/" },
	{ theme:"claro", author:"Dojo", baseUri:"../themes/" },
	{ theme:"tundra", author:"Dojo", baseUri:"../themes/" },
	{ theme:"soria", author:"nikolai", baseUri:"../themes/" },
	{ theme:"nihilo", author:"nikolai", baseUri:"../themes/" }
];

Jeg anbefaler denne tilnærmingen fordi du kan sammenligne temaet ditt med hver widget i boken. Du vil også finpusse temaet ditt mens du kontinuerlig utvikler nettapplikasjonen din.

Se demo

Bytte fra hardkodede, statiske CSS-filer til stilark med MINDRE kraft bør gjøre det mange ganger enklere å utvikle temaer. LESS sparer utviklere fra å kjøre mange søke-/erstatt-kommandoer og gjør det mulig å lage stilark mer dynamisk og organisert. Nå som å lage Dijit-temaer har blitt eksponentielt enklere, ser jeg frem til å se mange flere temaer dukke opp!