Share
Was Sie erstellen werdenAtom, der neue, von GitHub veröffentlichte Code-Editor, ist eine der aufstrebenden Varianten von Apps, mit denen Web-Technologien wie LESS, JavaScript und HTML nativ in einer Desktop-Umgebung ausgeführt werden können. Atom wird wie eine "normale" Desktop-App installiert und ausgeführt. Sobald es sich jedoch öffnet, verhält es sich auf eine Weise, die jeder Webentwickler kennt.
Atom ist eine "spezielle Variante von Chromium". Wenn Sie im Entwicklermodus ausgeführt wird, haben Sie Zugriff auf dieselben "Entwicklertools", die Sie von Chrome gewohnt sind. So wie bei jeder Online-Webanwendung können Sie den Code hinter jedem Element der App-Oberfläche überprüfen und sehen, was dazu führt:
Praktisch bedeutet dies, dass jeder, der mit Webdesign und -entwicklung vertraut ist, sofort die Funktionsweise von Atom kennenlernen wird und wahrscheinlich weitaus komfortabler ist, Modifikationen und Anpassungen vorzunehmen als mit vergleichbaren Programmen. Das visuelle Design von Atom wird von CSS gesteuert, das von LESS generiert wird. Sie können also das Erscheinungsbild auf dieselbe Weise wie jede LESS-basierte Website ändern.
Atom hat zwei Arten von "Themen", die für seinen Präsentationsstil verantwortlich sind:
Syntax-Themen alles im Inneren des Editors steuern, d. h. die Rinne, Zeilennummern und den Codebereich.
UI-Themen alles andere steuern, d. h. Registerkarten, Seitenleisten, Schaltflächen, Überlagerungen, Meldungen usw.
In diesem Lernprogramm erfahren Sie, wie Sie diese beiden Arten von Themen erstellen, indem Sie sie hintereinander erstellen, sodass die gesamte Benutzeroberfläche einheitlich umgestaltet wird. Lass uns anfangen!
Im Moment ist Atom nur Mac, und während der Beta-Phase erfolgt der Zugriff per Einladung. Wenn Sie noch keine Einladung haben, empfehle ich Ihnen, eine Anfrage bei Twitter oder im Atom-Forum zu veröffentlichen, und jemand ist verpflichtet, Ihnen eine E-Mail zu senden. Laden Sie es herunter und installieren Sie es wie jede andere App.
Das Entwickeln von Designs erfordert einige Atom-spezifische Befehlszeilenverwendung. Als Erstes müssen Sie die Pakete installieren, die diese Befehle aktivieren. Gehen Sie nach dem ersten Start von Atom zu und wählen Sie Atom> Shell-Befehle installieren, was installiert die Atom und apm (atom package manager) -Befehle.
Ich empfehle außerdem, eine App zu verwenden, mit der Sie ein Terminal von jedem Ordner aus öffnen können, den Sie im Finder anzeigen. Dadurch wird es einfacher, Befehle an der richtigen Stelle auszuführen. Ich persönlich nutze den kostenlosen XtraFinder, um meinem Finder-Kontextmenü die Option "Neues Terminal hier" hinzuzufügen.
Der grundlegende Vorgang zum Erstellen eines neuen Atom-UI-Designs besteht darin, eines der beiden verfügbaren Standarddesigns aus GitHub zu formen, ihm einen eigenen Namen zu geben und die enthaltenen Dateien zu bearbeiten.
Um dies zu tun, stellen Sie zunächst sicher, dass Sie ein Konto bei GitHub und GitHub für Mac (sofern Sie nicht die Befehlszeile verwenden möchten) installiert haben. Gehen Sie dann zum Repository für das Atom Dark-UI-Design oder das Atom Light-UI-Design. In diesem Lernprogramm verwenden wir eine dunkle Farbpalette, sodass das dunkle Standarddesign verwendet wird.
Klicken Sie oben rechts im ursprünglichen UI-Repository auf die Schaltfläche "Fork":
Dadurch wird ein Duplikat des Repos unter Ihrem eigenen Konto erstellt, d. H. Ihr Konto / Atom-Dunkel-Ui. Als Nächstes müssen Sie dem Repository einen eigenen Namen geben. Klicken Sie in der rechten Seitenleiste Ihres gegabelten Repository auf den Menüpunkt "Einstellungen".
Oben auf der Seite "Einstellungen" wird ein Feld für den Repository-Namen angezeigt. Geben Sie einen neuen Namen Ihrer Wahl (in meinem Fall "nuance-dark-ui") in dieses Feld ein, und achten Sie darauf, dass am Ende "-ui" angezeigt wird. Klicken Sie anschließend auf "Umbenennen":
Jetzt können Sie Ihr Design in Ihre Offline-Umgebung herunterladen, um mit der Bearbeitung zu beginnen. Um dies zu tun, kehren Sie zur Hauptseite Ihres Repositorys zurück. Suchen Sie dann in der Seitenleiste auf die Schaltfläche "In Desktop klonen":
"GitHub für Mac"lädt dann das Repository in Ihren Standard-GitHub-Speicherort herunter. Klicken Sie mit der rechten Maustaste in der Liste Ihrer Repositorys in "GitHub für Mac" auf Ihr neu geklontes UI-Design und wählen Sie "Im Finder anzeigen":
Ein Finder-Fenster wird geöffnet und zeigt Ihren UI-Designordner in Ihrem GitHub-Ordner. Doppelklicken Sie darauf, um in den eigentlichen Ordner zu gelangen und den Inhalt darin anzuzeigen.
Öffnen Sie ein neues Terminal an diesem Ort, und führen Sie den Befehl aus atom --dev
Dieser Befehl öffnet Atom im Entwicklermodus und zeigt die Datei- und Ordnerstruktur Ihres Themas in der Seitenleiste an. Klicken Sie in dieser Seitenleiste auf die Datei "package.json", um sie zur Bearbeitung zu öffnen. Ändern Sie dann den Namen, die Versionsnummer und die Beschreibung. Stellen Sie sicher, dass Sie das "-ui" am Ende des Themennamens beibehalten, und speichern Sie dann:
Schließlich müssen Sie Atom wissen lassen, wie Sie über den lokalen GitHub-Ordner auf Ihren Designordner zugreifen können. Gehen Sie zurück zu Ihrem Terminal, das sich noch im Ordner Ihres Designs befinden sollte, und führen Sie den Befehl aus apm link
Gehen Sie jetzt zurück zu Atom und drücken Sie cmd-alt-ctrl-L oder auswählen Ansicht> Neu laden Über das Hauptmenü können Sie die Benutzeroberfläche neu laden. Dadurch wird die Liste der verfügbaren UI-Designs aktualisiert, sodass Sie Ihre auswählen können.
Wählen Sie im Hauptmenü die Option Atom> EinstellungenUm die Einstellungsseite zu öffnen, klicken Sie in der linken Seitenleiste des Bedienfelds auf "Themen". Sie sollten Ihr Thema in der Liste mit der Bezeichnung "UI-Themen" sehen. Wählen Sie es aus:
Ihr neues UI-Design ist jetzt aktiv und bereit zum Bearbeiten. Bevor wir jedoch fortfahren, erstellen wir auch ein Syntax-Theme, sodass Sie beide gleichzeitig bearbeiten können und ein Auge darauf haben, wie sie zusammenarbeiten.
Das Erstellen eines neuen Syntaxdesigns ist einfacher als bei einem UI-Design.
Drücken Sie in Atom cmd-shift-P Um die Befehlspalette aufzurufen, geben Sie "Generate Syntax Theme" ein. Wenn du siehst Paketgenerator: Syntaxdesign erstellen Klicken Sie darauf, um den Befehl auszuführen:
Es erscheint ein Fenster, in dem Sie den Pfad und Namen für Ihr Syntaxthema eingeben können. Was auch immer Sie beschließen, Ihr Thema zu benennen, sollte mit "-syntax" enden. Da mein UI-Theme "Nuance-Dark-Ui" genannt wurde, nannte ich mein Syntax-Theme "Nuance-Dark-Syntax"..
Nachdem Sie Ihren Pfad und den Namen des Themas eingegeben haben, drücken Sie Eingeben fortfahren.
Atom erstellt ein neues Syntaxdesign für Sie und öffnet es in der Seitenleiste. Sie sollten jetzt in der Lage sein Atom> Einstellungen erneut und wählen Sie Ihr neues Syntaxdesign neben dem Syntax-Theme Etikette:
Da wir gemeinsam an den UI- und Syntax-Themen arbeiten, möchten wir auf beide Dateien von der Seitenleiste aus zugreifen können. Wir möchten auch im "Dev-Modus" sein, während wir diese Dateien bearbeiten, da dies bedeutet, dass Atom sein Erscheinungsbild automatisch aktualisiert, wenn wir unsere Änderungen speichern.
Führen Sie die folgenden Schritte aus, um beide Themen im Dev-Modus zu öffnen, und verwenden Sie den gleichen Vorgang in der Zukunft, wenn Sie zurückkehren und Ihre Themen bearbeiten müssen.
Gehe zu Atom> Voreinstellungen um die Einstellungsseite zu öffnen.
Klicken Öffnen Sie ˜ / .atom Klicken Sie unten in der linken Seitenleiste der Einstellungen auf, um Ihren lokalen Atom-Ordner in der Atom-Seitenleiste zu öffnen:
Klicken Sie in der Atom-Seitenleiste mit der rechten Maustaste entweder auf Ihr Syntaxdesign oder den UI-Designordner und wählen Sie Im Finder anzeigen:
Beenden Sie Atom, um die vorhandene Instanz zu schließen (sie befindet sich nicht im dev-Modus, also brauchen wir sie nicht). Öffnen Sie dann im Finder-Fenster, dass Ihre Designordner ein neues Terminal öffnen:
Führen Sie den Befehl aus atom --dev um den Ordner in Atom im dev-Modus zu öffnen. Sie sollten jetzt beide Designordner in der Seitenleiste sehen:
Da wir uns im dev-Modus befinden, können wir jetzt jede Design-Datei über die Seitenleiste öffnen. Änderungen werden automatisch in der Atom-Benutzeroberfläche sichtbar.
Jetzt können wir mit dem Designprozess beginnen!
Es kann sein, dass es ein wenig anpassungsfähig ist, um die Farben Ihres Themas so zu gestalten, wie Sie es möchten, daher ist das direkte Design im Code wahrscheinlich nicht die effizienteste Methode.
In den an dieses Tutorial angehängten Quelldateien finden Sie eine PSD mit dem Namen "colormockup.psd", die genügend Oberflächenelemente und Codesimulationen enthält, um Ihre Farbpalettenauswahl zu erleichtern. Verwenden Sie diese PSD, um die Farben zu visualisieren, die Sie in Ihren UI- und Syntaxthemen verwenden möchten.
Ich persönlich mag erdige Farben, wenig Licht und einen niedrigen Kontrast, der meine Augen nicht ausbrennt.
Dies ist meine persönliche Vorliebe, aber Sie können natürlich mit jedem Stil arbeiten, der für Sie geeignet ist.
Wenn Ihr Modell fertig ist, können Sie mit dem Übertragen Ihrer Farbwerte in den WENIGER-Code Ihres Designs beginnen. Wir beginnen mit dem Syntaxdesign, da es einfacher ist und weniger Variablen als das UI-Design verwendet.
Erweitern Sie in Ihrer Atom-Seitenleiste den Ordner des Syntaxthemas, und öffnen Sie ihn Stylesheets> Farben. Sie sollten das sehen:
Wenn Sie den Wert einer dieser Variablen ändern und dann die Datei speichern, sollte sofort die Aktualisierung des Syntaxbereichs angezeigt werden. Zum Beispiel, wenn Sie den Wert von ändern @dunkelgrau zu # F00 Sie sollten sehen, dass der Rinnenhintergrund die Farbe ändert:
Mmmm, nettDie in dieser Datei aufgelisteten Farben werden wiederum über die Dateien "syntax-variables.less" und "base.less" verschiedenen Aspekten der Syntax zugeordnet. Öffnen Sie diese Dateien und nehmen Sie sich einen Moment Zeit, um sie durchzublättern. In der Datei "syntax-variables.less" sehen Sie Variablen aus der Datei "colors.less". In der Datei "base.less" werden jedoch Variablen aus der Datei "colors.less" und "syntax-variables.less" angezeigt.
Beim Hinzufügen unseres neuen Farbschemas zu diesem Thema ändern wir den Wert von Variablen in "colors.less" so, dass ihre Namen möglicherweise nicht mehr die darin enthaltene Farbe wiedergeben. Zum Beispiel wo die Variable @lila verwendet wurde, verwenden wir stattdessen einen Grünton.
Um gründlich zu sein, würden Sie idealerweise neue Variablennamen erstellen, die das neue Farbschema widerspiegeln. In diesem Tutorial möchte ich Sie jedoch nicht dazu veranlassen, dass Sie jede Instanz der alten Variablennamen in der "Syntax- Datei "variables.less" und "base.less".
Auch wenn es etwas seltsam erscheinen mag, ordnen wir die Farben unseres neuen Schemas direkt den vorhandenen Variablennamen in "colors.less" zu. Auf diese Weise müssen Sie nur eine einzige Datei bearbeiten, um Ihr Syntaxdesign zu erstellen.
Um zu verstehen, welche Variablen welche Aspekte des Farbschemas beeinflussen, ersetzen Sie den vollständigen Code der Datei "colors.less" durch Folgendes:
// Diese Farben sind spezifisch für das Thema. Nicht in einer Packung verwenden! // Klartext und Zeilennummern @ sehr hellgrau: # c5c8c6; // Kommentare @ hellgrau: # 969896; // Aktuelle Zeile hervorheben @ Grau: # 373b41; // Rinnenhintergrund @ dunkelgrau: # 282a2e; // Codebereich Hintergrund @ sehr dunkelgrau: # 1d1f21; @ Cyan: # 8abeb7; @blau: # 81a2be; @purple: # b294bb; @ grün: # b5bd68; @red: # cc6666; @orange: # de935f; @ hellorange: # f0c674;
Die zum ersten Abschnitt hinzugefügten Kommentare geben an, wo die "grauen" Farbvariablen im Syntaxbereich verwendet werden.
Der zweite Abschnitt mit den sieben Farbvariablen ist etwas komplizierter, da jeder einen anderen Codetyp beeinflusst. Um eine ungefähre Vorstellung davon zu bekommen, wie diese Variablen angezeigt werden, erstellen Sie eine neue PHP-Datei und fügen Sie sie in diese ein:
Accentsconagua
Verdunkeln (@rot, 10%) / * Kommentare> @ hellgrau * / // Funktion =. Speicher> @purple // Funktionsname = .entity.name.function> @blue Funktion Funktionsname () // return =. keyword.control> @purple // array = .support.function> @cyan // string = .string> @green return array ('string' => 'string'); // $ = .punctuation.definition.variable> @ sehr hellgrau // var_name = .variable> @red // new = .keyword> @purple // SUPPORT_CLASS = .support.class> @ light-orange / / true = .constant> @orange $ var_name = neuer SUPPORT_CLASS (true); ?> Hinweis: Diese Datei ist auch in den Quelldateien enthalten.
Wenn Sie den obigen Code in Atom anzeigen, sehen Sie Beispiele dafür, wie die sieben Farbvariablen aussehen, wenn sie auf die Syntax angewendet werden. Derselbe Code wird in der mitgelieferten "colormockup.psd" verwendet, damit Sie sehen können, wie die Farben korrelieren.
In den enthaltenen Kommentaren finden Sie eine Beschreibung der Farbvariablen, die jedem Codeelement zugeordnet sind. Sie können diesen Code zusammen mit der PSD verwenden, um herauszufinden, welchen Variablen die von Ihnen ausgewählten Farben in Ihrer "colors.less" -Datei zugeordnet werden sollen.
Wir beginnen damit, die "grauen" Farben von Ihrem PSD-Modell zu übernehmen.
Die erste in "colors.less" aufgelistete Variable lautet @ sehr hellgrau Was wir wissen (aus den Kommentaren, die Sie gerade hinzugefügt haben), wird für "Nur Text und Zeilennummern" verwendet. Gehen Sie zu Ihrer PSD und kopieren Sie den Hexcode der Farbe, die Sie für Ihre Zeilennummern gewählt haben. Fügen Sie diesen Wert ein, der in diesem Fall ist # 9b836a, in "colors.less", um die Standardeinstellung für zu ersetzen @ sehr hellgrau.
Rufen Sie als Nächstes den Farbe-Hexcode ab, den Sie für den Kommentartext ausgewählt haben, und fügen Sie ihn für die Variable ein @hellgrau. Fahren Sie auf diese Weise fort, bis alle fünf "grauen" Variablen aktualisiert sind. Für das Thema "Nuance-Dark-Syntax" habe ich verwendet:
// Klartext und Zeilennummern @ sehr hellgrau: # 9b836a; // Kommentare @ hellgrau: # 624e3b; // Aktuelle Zeile hervorheben @ Grau: # 352b22; // Rinnenhintergrund @ dunkelgrau: # 28211a; // Codebereich Hintergrund @ sehr dunkelgrau: # 1f1913;
Speichern Sie die Datei "colors.less" und Sie sollten sofort sehen, dass Ihr Syntaxbereich ganz anders aussieht:
Übertragen Sie nun die sieben Farbvariablen im zweiten Abschnitt.
Die erste dieser Variablen ist @cyan, Der Inhalt der zuvor erstellten PHP-Datei enthält den Kommentar array = .support.function> @cyan, Wenn Sie uns sagen, dass diese Farbe für das Wort "Array" verwendet wird. Gehen Sie zu Ihrer PSD und kopieren Sie den Hexcode, den Sie dort für das Wort "Array" angewendet haben. Im Thema "Nuance" war das so # 446675.
Wiederholen Sie den gleichen Vorgang des Suchens jedes Variablennamens in den Kommentaren Ihrer PHP-Datei, um zu sehen, auf welchen Codetyp es sich bezieht, und kopieren Sie dann die Farbe, die Sie aus Ihrer PSD-Datei ausgewählt haben.
Für das Thema "Nuance" habe ich verwendet:
@ Cyan: # 446675; @blau: # 40796b; @purple: # 6a7c02; @ green: # 93a14a; @red: # a55027; @orange: # a56b32; @ hellorange: # b5a163;
Schauen Sie sich nach dem Speichern noch einmal Ihre PHP-Datei an, und Sie sollten alle Ihre neuen Farben darin wiedergeben, die Ihrer PSD entsprechen:
Ihr Syntaxdesign ist jetzt abgeschlossen! Nun ist es an der Zeit, zum UI-Thema überzugehen.
Das Hinzufügen eines Farbschemas zum UI-Design ist etwas komplizierter als das Syntaxdesign, da es viel mehr Variablen verwendet. Darüber hinaus sind nicht alle Farben im Standarddesign als Variablen definiert. In einigen Fällen müssen Sie die tatsächlichen Stile bearbeiten.
Die meisten der im UI-Design verwendeten Farben sind in der Datei "ui-variables.less" definiert. Erweitern Sie Ihren Syntax-Themes-Ordner und öffnen Sie die Datei zur Bearbeitung im Ordner "Stylesheets".
Atom wird mit einem sehr nützlichen "Styleguide" geliefert, der Ihnen eine Vorschau aller Elemente der Benutzeroberfläche bietet, die von Ihrem Design beeinflusst werden. Öffnen Sie es, indem Sie zu gehen Packages> Styleguide> Anzeigen.
Meistens finden Sie die Variablennamen in der Datei "ui-variables.less" als beschreibend und in der richtigen Reihenfolge mit den im Styleguide aufgelisteten UI-Elementen. Zum Beispiel werden die ersten mehreren Variablen vorangestellt @Textfarbe und korrelieren Sie mit dem ersten Abschnitt des Styleguides, der als "Textklassen" bezeichnet wird..
Wenn Sie nicht sicher sind, welche Variable sich auf das auswirkt, haben Sie keine Angst, Variablen zufällig zu ändern, um zu sehen, welche Aspekte des Styleguides geändert werden.
Nicht allen Farben im Standard-UI-Design sind LESS-Variablen in der Datei "ui-variables.less" zugeordnet. Einige Farben werden direkt in andere LESS-Dateien des Designs codiert.
Wenn Sie nicht sicher sind, woher eine UI-Farbe kommt und es scheint, dass keine Variable vorhanden ist, verwenden Sie den Elementinspektor für den betreffenden Bereich, um den Klassennamen zu finden, der für die Farbe verantwortlich ist. Führen Sie dann im Finder eine Suche nach diesem Klassennamen aus, um herauszufinden, welche der LESS-Dateien des Themas die Klasse enthält.
Beispielsweise hat die Seitenleiste im Standarddesign einen Farb-Hexcode # 303030, der nirgendwo in "ui-variables.less" definiert ist. Die Überprüfung des Elements zeigt, dass der Hexcode aus der Klasse stammt .fokussierbares Panel.
Die Ausführung einer Finder-Suche im Ordner der Benutzeroberfläche nach "fokussierbarer Anzeige" zeigt, dass diese Klasse in der Datei "tree-view.less" enthalten ist.
Die Datei kann dann bearbeitet werden, indem eine Variable aus der Datei "ui-variables.less" anstelle eines hartcodierten Hexwerts eingefügt wird.
Manchmal führt Ihre Suche zu keinen Ergebnissen, aus welchem Grund auch immer, und Sie müssen möglicherweise die Dinge auf die harte Tour erledigen und manuell durch jede UI-Designdatei gehen, bis Sie die Klasse gefunden haben, die Sie ändern möchten.
Das UI-Design kann nicht auf die durch das Syntaxdesign definierten Farbvariablen zugreifen. Wir möchten jedoch die gleichen Farben für beide Designs verwenden, damit sie übereinstimmen. Daher müssen wir die Farbvariablen aus unserem Syntaxdesign in unser UI-Design kopieren.
Fügen Sie oben im Thema "ui-variables.less" in alle Variablen Ihres Syntaxdesigns ein:
@ sehr hellgrau: # 9b836a; @ hellgrau: # 624e3b; @ Grau: # 352b22; @ dunkelgrau: # 28211a; @ sehr dunkelgrau: # 1f1913; @ Cyan: # 446675; @blau: # 40796b; @purple: # 6a7c02; @ green: # 93a14a; @red: # a55027; @orange: # a56b32; @ hellorange: # b5a163;
Neben diesen Variablen gibt es noch fünf weitere benutzerdefinierte Variablen, die ich definiert habe, um alle Farben aus meinem Modell zu übernehmen, die ebenfalls oben in der Datei "ui-variables.less" eingefügt wurden:
// BG der ausgewählten Datei in der Seitenleiste @n_selected: # 2b231b; // BG der Seitenleiste @n_defaultbg: # 241d17; // BG der unteren Symbolleiste und des Bereichs "Suchen" @n_darkerbg: # 191613; // Farbe des ausgewählten Texts in der Seitenleiste @n_highlight: # a37748; // Rahmenfarbe der Registerkarten @n_tabborder: # 372d26;
Diese Variablen werden an mehreren Stellen verwendet, aber die enthaltenen Kommentare geben Ihnen ein Beispiel für die Verwendung der einzelnen Variablen. So können Sie feststellen, welche Farbcodes Sie von Ihrer PSD kopieren möchten. Wo immer dies möglich ist, wurden die Layer in der PSD mit Bezug auf die Variable benannt, auf die sie wirken.
Wie bereits erwähnt, sind einige der Farbwerte des Standardthemas hart codiert und nicht als Variablen verfügbar. In einigen Fällen werden Variablen definiert, jedoch in anderen Dateien als der Hauptdatei "ui-variables.less". Um die zentrale Anwendung unseres Farbschemas über die Datei "ui-variables.less" zu erleichtern, werden wir einige zusätzliche Variablen definieren und einige Themendateien anpassen.
Fügen Sie den folgenden Code in Ihre "ui-variables.less" unterhalb der Farbvariablen ein, die Sie im vorherigen Schritt hinzugefügt haben:
// BENUTZERDEFINIERTE FARBEN / VARS, DIE ZU DEN WENIGEREN DATEIEN HINZUGEFÜGT wurden: //baum-view.less @ tree-view-selected-bg: @n_selected; // neu> Zeile 8 @sidebar: @n_defaultbg; // new> line 15 @ sidebar-focus: helle (@n_defaultbg, 0,5%); // neu> Zeile 19 //tabs.less @ tab-default-bg: @n_defaultbg; // new> line 45 //tooltips.less @ tip-background-color: aufhellen (@ sehr hellgrau, 10%); // Variablen aus tooltips.less entnommen und hier für den Zugriff @ tip-text-color platziert: @ very-dark-grey; // Variablen aus tooltips.less entnommen und hier zum Zugriff abgelegt
Notieren Sie sich die enthaltenen Kommentare. Verfolgen Sie, welche Dateien in welcher Zeile geändert werden sollen, um diese Variablen zu verwenden.
Wenn Ihre neuen Variablen vorhanden sind, können Sie jetzt die folgenden Änderungen an Ihren Designdateien vornehmen:
Baumansicht.los> Zeile 8: ändern Hintergrund: @ tree-view-selected-bg;
Baumansicht.los> Zeile 15: ändern Hintergrund: @ Seitenleiste;
Baumansicht.unabhängig> Zeile 19: ändern Hintergrund: @ Sidebar-Fokus;
tabs.less> Zeile 45: ändern:
Hintergrundbild: -webkit-linearer Farbverlauf (oben, aufhellen (@ tab-default-bg, 7%), @ tab-default-bg;
tooltips.less> Zeilen 4 und 5 löschen:
@ tip-background-color: #fff; @ tip-text-color: # 333;
Diese beiden Zeilen werden aus "tooltips.less" gelöscht, da die Variablen jetzt stattdessen in der Hauptdatei "ui-variables.less" definiert werden.
Wir haben jetzt alle erforderlichen Anpassungen vorgenommen, um mit unseren neu definierten Variablen Schritt zu halten. Es gibt jedoch noch einige weitere Verbesserungen, um hart codierte Farben zu ersetzen und alle Themendateien gut mit unseren Variablen zusammenarbeiten zu können.
Utilities.less> Zeile 6: ändern Hintergrund: dunkler werden (@ button-background-color, 5%);
Baumansicht.nicht> Zeile 29: ändern Farbe: aufhellen (@ sehr hellgrau, 15%)! wichtig;
Paneele.los> Zeile 50: ändern
Hintergrundbild: -webkit-linearer Farbverlauf (@ Panel-Überschrift-Hintergrundfarbe, dunkler (@ Panel-Überschrift-Hintergrundfarbe, 5%));
… Macht den Farbverlauf für unsere neuen Farben subtiler.
Tooltips.less> Zeile 11: ändern Farbe: gesättigt (dunkler (@rot, 10%), 5%);
Wir haben jetzt alle Farben aus unserem PSD-Modell als Variablen definiert und alle Designdateien, um auf die Definitionen in "ui-variables.less" zu reagieren..
Jetzt bleibt nur noch die Zuordnung unserer benutzerdefinierten Farbvariablen mit den Standardvariablen, die bereits vorhanden waren, als wir die Datei "ui-variables.less" zum ersten Mal geöffnet hatten. Es ist nicht notwendig, den Wert jeder einzelnen Standardvariablen zu ändern, da einige von ihnen ihre Werte von anderen in derselben Datei huckeln. Zum Beispiel haben wir @ Textfarbe hervorheben: #fff; und dieser Wert wird in der nächsten Zeile in piggy gesichert @ Textfarbe ausgewählt: @ Textfarbe hervorgehoben;.
Ersetzen Sie den gesamten Code zwischen dem Kommentar // Farben und der Kommentar // Größen mit diesem Code:
@ Textfarbe: @ sehr hellgrau; // geändert @ textfarbe-subtil: @ hellgrau; // geändert @ text-color-highlight: @n_highlight; // geändert @ Textfarbe ausgewählt: @ Textfarbe hervorgehoben; @ text-color-info: @cyan; // geändert @ text-color-success: @blue; // geändert @ Textfarben-Warnung: Aufhellen (@orange, 15%); // geändert @ text-color-error: saturate (aufhellen (@red, 10%), 10%); // geändert @ text-color-ignored: @ text-color-subttle; @ text-color-added: @ text-color-success; @ text-color-umbenannt: @ text-color-info; @ text-color-modified: @ text-color-warning; @ Textfarbe entfernt: @ Textfarbenfehler; @ Hintergrundfarbe-Info: @ Cyan; // geändert @ Hintergrundfarbe Erfolg: @blue; // geändert @ Hintergrundfarben-Warnung: Aufhellen (@orange, 15%); // geändert @ Hintergrund-Farbfehler: gesättigt (Aufhellen (@red, 10%), 10%); // geändert @ Hintergrundfarbe hervorgehoben: rgba (255, 255, 255, 0.07); @ Hintergrundfarbe ausgewählt: @n_selected; // geändert @ app-Hintergrundfarbe: # 333; @ Basis-Hintergrundfarbe: Aufhellen (@ Tool-Panel-Hintergrundfarbe, 5%); @ base-border-color: @n_darkerbg; @ pane-item-background-color: @ base-background-color; @ pane-item-border-color: @n_darkerbg; // geändert @ input-background-color: @ dunkelgrau; // geändert @ input-border-color: @ base-border-color; @ tool-panel-background-color: @n_darkerbg; // geändert @ Tool-Panel-Rahmenfarbe: @ Basis-Rahmenfarbe; @ Inset-Panel-Hintergrundfarbe: @n_defaultbg; // geändert @ inset-panel-border-color: @ base-border-color; @ Panel-Überschrift-Hintergrundfarbe: @ Grau; // geändert @ Panel-Überschrift-Randfarbe: fadein (@ Basis-Randfarbe, 10%); @ overlay-background-color: @ dunkelgrau; // geändert @ overlay-border-color: @ Hintergrundfarbe hervorgehoben; @ button-background-color: @grau; // geändert @ button-background-color-hover: heller (@ button-background-color, 5%); @ button-background-color-selected: @ dunkelgrau; // geändert @ button-border-color: @ base-border-color; @ tab-bar-background-color: @ sehr dunkelgrau; // geändert @ tab-bar-border-color: dunkler (@ tab-background-color-active, 10%); @ tab-background-color: @n_defaultbg; // geändert @ tab-background-color-active: @ sehr dunkelgrau; // geändert @ tab-border-color: @n_tabborder; // geändert @ Baumansicht-Hintergrundfarbe: @ Tool-Panel-Hintergrundfarbe; @ Baumansicht-Rahmenfarbe: @ Tool-Panel-Rahmenfarbe; @ Scrollbar-Hintergrundfarbe: @ sehr dunkelgrau; // geändert @ scrollbar-color: @grau; // geändert @ ui-site-color-1: @ background-color-success; // green @ ui-site-color-2: @ background-color-info; // blau @ ui-site-color-3: @ background-color-warning; // orange @ ui-site-color-4: @purple; // geändert @ ui-site-color-5: @red; // geändert
Es wäre ein wenig übertrieben, jede Zeile dieses Codes zu erklären, aber achten Sie auf den Kommentar // geändert Am Ende einer Zeile sehen Sie, wo unsere benutzerdefinierten Farbvariablen den Standardvariablen des Themas zugeordnet wurden.
Denken Sie daran, wenn Sie nicht sicher sind, wo diese Variablen zutreffen, können Sie ihre Korrelation mit dem Styleguide wie oben beschrieben überprüfen.
Nachdem Sie Ihre "ui-variables.less" -Datei (und die anderen von Ihnen bearbeiteten) gespeichert haben, sollte Ihre Benutzeroberfläche nun so aussehen:
Wenn Sie drücken Strg-Umschalt-P Um die Befehlspalette aufzurufen, sollte es so aussehen:
Und wenn Sie drücken Strg-F Das "Suchen" -Feld am unteren Rand des Editors sollte folgendermaßen aussehen:
Sie können die vollständigen "Nuance" UI- und Syntaxdesigns bei GitHub herunterladen:
Und Sie können sie direkt in Atom installieren, indem Sie zu gehen Atom> Voreinstellungen> Designs und geben Sie "Nuance" in das Filterfeld ein.
Wenn Sie Ihre eigene benutzerdefinierte Syntax und / oder Ihr UI-Design erstellt haben, können Sie sie mit anderen Atom-Benutzern als Paket teilen. Dazu benötigen Sie jeweils ein aktuelles GitHub-Repository. Anweisungen zum Veröffentlichen eines Atom-Pakets finden Sie unter Atom Docs: Veröffentlichen eines Pakets
In diesem Lernprogramm haben wir den vorhandenen LESS-Dateicode so weit wie möglich unverändert gelassen, wobei die Arbeit mit Variablen im Mittelpunkt stand. Wenn Sie jedoch tiefer in den Themencode eintauchen möchten, können Sie die Darstellung von nahezu jedem Aspekt der Syntax und der Benutzeroberfläche steuern, von der Form Ihrer Registerkarten bis zur Farbe Ihrer geschweiften Klammern und Operatoren.
Wenn Sie wünschen, dass sich ein Stück Code oder ein anderes UI-Element unterscheidet, öffnen Sie Atom im Dev-Modus und verwenden Sie den Elementinspektor, um zu sehen, ob eine Klasse vorhanden ist, die Sie anvisieren können. In der Regel können Sie so ziemlich alles anpassen.
Selbst im Beta-Modus sieht Atom bereits sehr vielversprechend aus, weil er die Möglichkeit zur Anpassung für jeden, der über Web-Technologien verfügt, zugänglich macht. Versuchen Si
