Die eigentliche Website sieht bisher noch gar nicht so sehr nach unserem Photoshop-Design aus. In diesem Screencast widmen wir uns genau dem und beginnen oben mit unserem Header- und Logo-Bereich. Es fühlt sich gut an, einen "echten" visuellen Start beim Erstellen der Website zu haben.
Wir verwenden Frank DeLoupe als Farbwähler, der sich gut in Photoshop integriert (er macht die ausgewählte Farbe zur aktiven Farbe in Photoshop und kopiert sie zusätzlich in Ihre Zwischenablage).
An einer Stelle ändern wir die Sass/Compass-Konfiguration, um das CSS als :expanded statt :compressed zu kompilieren, um aus Debugging-Gründen das tatsächlich generierte CSS zu sehen.
Wir müssen ein wenig überlegen, wie die Elemente platziert werden und wie sie auf die fließende Natur eines Browserfensters reagieren. Zum Beispiel sollte das Logo immer die obere linke Ecke berühren.
Wir verschieben viele Werte hin und her, um alles perfekt abzustimmen, und fügen hier und da kleine Details hinzu, um die Dinge besser aussehen zu lassen, wie z. B. leichte Schatten für den Papierstapel-Effekt.
Bestes Video bisher! Ich liebe die SASS-Techniken
Der beste Weg, Frank DeLoupe zu verwenden, ist, eine Tastenkombination für Ihren Farbwähler einzurichten, anstatt ihn jedes Mal mit der Maus aus dem Menü auszuwählen (unter Einstellungen). Ich benutze (
Option F) für Mac, wobei 'F' für Frank steht... Duh!Außerdem können Farbmodelle in Sass effizienter verwendet werden, indem sie basierend auf ihrer Platzierung oder Verwendung im Design beschrieben werden. Anstatt beispielsweise den Hintergrund der Seite als
$grayzu bezeichnen, wäre es schlauer, $pageBG zu sagen. Durch die Verwendung dieses Ansatzes ist die Farbe nicht an die tatsächliche Farbvariable gebunden - nur für den Fall, dass Sie später kein Grau mehr wünschen. Wenn Sie den Hintergrund des Seitenwraps in Weiß ändern würden, wäre $gray nicht mehr sinnvoll.Ja, ich habe jetzt einen Tastenkürzel, definitiv der richtige Weg bei allen Computer-Dingen. (Besonders StarCraft II!)
Was die Farbnennung angeht – Ihr Gedankengang ist ideal und ergibt perfekt Sinn, aber manchmal mache ich Dinge so, wie mein Gehirn funktioniert, anstatt den bestmöglichen semantischen Ansatz zu verfolgen. Ich finde, wenn ich Namen wie page-bg oder top-border-emphasis oder so etwas verwende, kann ich mich nie erinnern, wie ich sie genannt habe, und das macht die Entwicklung langsamer und frustrierender, als sie ohnehin schon ist. $orange und ähnliches funktioniert für mich in diesem Design einfach.
Ich habe mich gefragt, wie man Pseudoelemente in Sass verschachtelt, ich wollte es immer nachschlagen, aber es wurde irgendwie immer zur Seite geschoben. Das bisher beste Video, Chris!
Keines dieser Videos funktioniert auf meinem iPad. Ich hoffe, Sie gehen etwas mehr auf das CSS ein. Ich benutze kein Sass, also ist es etwas fragwürdig, das CSS aus Ihrem Sass herauszufinden.
Kann das Video nicht herunterladen, es ist eine 'download.htm'
Ach egal, ich bin ein 'Fuchs', kein Bär. Okay, wo ist der Link zum Upgrade?
Oh, und ich wünschte, ich könnte meine Kommentare bearbeiten, übrigens.
Bezüglich des Downloads: Bitte aktualisieren Sie die Seite, bevor Sie auf die Download-Schaltfläche klicken. Die sicheren Links laufen relativ schnell ab, und das Aktualisieren scheint zu funktionieren.
Auf Ihrem Fuchs-Level können Sie die Videos immer noch herunterladen, nur nicht die Begleitdateien.
Wenn Sie immer noch ein Upgrade wünschen, kontaktieren Sie mich unter [email protected] und ich werde Ihnen den Weg zeigen.
Ich werde diesen Kommentar begraben, um Kommentar-Threads über den Inhalt statt über technische Probleme zu erhalten.
Haha, ich wollte die ganze Zeit nur "Variable" schreien, bis du gemerkt hast, dass du das $-Zeichen nicht eingefügt hattest.
Ich habe genau das Gleiche gemacht!!!
Ich auch :D
Hey Chris!! Großartige Arbeit, nicht nur am Redesign, sondern auch mit neuen Sachen, die einen großen Unterschied in unserem Workflow machen. Nur eine Frage: Wäre es möglich, die finale PSD-Datei des Projekts zu teilen?
Tolles Video, Chris. Besonders die Issues-Repo auf Git gefällt mir.
https://github.com/chriscoyier/CSS-Tricks-v10
Ich hatte ein paar Probleme mit dem Video und habe dann festgestellt, dass Sie daran arbeiten. Tolle Idee.
Ich bin neu in all dem und das ist vielleicht eine dumme Frage, aber zu welcher Syntax ist Sublime eingestellt, um SCSS anzuzeigen? Ich habe es auf CSS eingestellt und das Farbschema auf Twilight, aber es wird nicht richtig angezeigt.
Ich wähle "SASS" :: http://cl.ly/JQ9E
Es *könnte* ein Add-on sein. Hier ist eins :: https://github.com/n00ge/sublime-text-haml-sass
Danke, Chris! Ich bin unter Windows und nicht sicher, ob alles perfekt übereinstimmt.
Ich meinte subtile Unterschiede bei Programmen.
Das Add-on funktioniert perfekt! Danke nochmals. Für alle, die neu sind wie ich, unter Win7...
user/appdata/roaming/sublime text 2/packages
Fügen Sie die Add-ons ein
Chris, ich liebe es, wie Sie so klug die gemeinsamen Elemente in die `_bits.scss`-Datei und all das packen.
Falls Sie es sich gefragt haben, Compass hat einen kleinen Abschnitt über Best Practices, der viel von denselben Dingen behandelt, sowie einige andere Punkte, die Sie dort erwähnt haben.
http://compass-style.org/help/tutorials/best_practices/
Schön, dass Sie einen gemeinsamen Ausgangspunkt haben, so dass alle Compass-Projekte dieselbe anfängliche Struktur haben und die Leute wissen, wo sie nach Variablen und benutzerdefinierten Mixins usw. suchen müssen.
Ich persönlich pflege auch meine eigene Version von Normalize, die ich von jemandem kopiert habe, der bereits eine Menge Zeug für mich in SASS umgewandelt hat, und sie enthält eine _base.scss, die einen Großteil der anfänglichen Typografie und so weiter steuert. Und sie enthält all meine kleinen Anpassungen wie das Entfernen von Unterstreichungen bei Links und border-box usw. Mein eigenes kleines Boilerplate.
Hallo Chris!
Ich frage mich, wie Sie Dinge mit diesem Rechteck messen? Ist es in Mac eingebaut oder eine App oder was?
Ja, unter Mac können Sie Befehl-Umschalt-4 drücken und erhalten ein Fadenkreuz, mit dem Sie einen Screenshot aufnehmen können. Aber es zeigt Ihnen auch die Abmessungen des ausgewählten Bereichs, was oft genauso nützlich ist.
Aber stellen Sie sicher, dass Sie es auf einer Photoshop-Datei tun, und dass Photoshop auf "tatsächliche" Größe eingestellt ist. Ich war leicht hineingezoomt, sodass ich es mit bloßem Auge nicht bemerkt habe, aber es hat alle meine Messungen durcheinander gebracht.
Dieses Video war genial, Chris. Habe gerade Frank DeLoupe und CodeKit heruntergeladen. Diese Videos erinnern mich an ein Gespräch, das ich mit meinem Bruder hatte, nachdem die zweite Star Wars-Trilogie herauskam und Lucas Yodas erste tatsächliche, auf dem Bildschirm erscheinende, Backflip-CGI-Schlacht enthüllte. Ich sagte: "Man sollte Yoda in der Schule unterrichten." Mein Bruder sagte: "Das haben sie gerade getan."
Gestern habe ich auch das CSS-Tricks-Shirt erhalten. Danke!
Dieses Video haut mich um. Sass hat mich vorher verängstigt.
Tolles Video und einige wirklich nützliche Kommentare/Links von anderen. Danke euch allen!
Hey Chris, in Photoshop können Sie tatsächlich Befehl+Klick verwenden, um Auto-Auswahl zu verwenden, wenn diese nicht aktiviert ist :)
Ich liebe es absolut, Ihre Arbeit zu sehen. Es erinnert mich so sehr an meinen Denkprozess beim Bauen, was sehr hilft, wenn ich mich frage, ob ich es "richtig mache" oder nicht.
Danke für die tolle Präsentation! Besonders der neue Farbwähler hat mir sehr gefallen. Bis jetzt habe ich ColorSnapper verwendet und musste den Wert in Photoshop kopieren/einfügen, was eine massive Zeitverschwendung war.
Hey,
Zuallererst möchte ich Ihnen danken. Diese Videos haben mir sehr geholfen, und ich bin noch nicht einmal zur Hälfte durch. Machen Sie weiter so!
Ich habe eine Frage.
Ich habe bemerkt, dass der Textabstand meines Menüs in Firefox niedriger positioniert ist als in Chrome. Gibt es eine Möglichkeit, dies nur für Firefox anzupassen? Ich weiß nicht, ob ich mich richtig ausgedrückt habe, ich bin neu im Programmieren.
Danke!
Ist es sehr auffällig und offensichtlich falsch aussehend? Es könnte ein anderes Problem vorliegen, das es verursacht. Oder es könnte ein Browser-Bug sein, in welchem Fall am besten ein reduzierter Testfall erstellt und gemeldet wird. Als allerletzter Ausweg wäre die Verwendung eines Browser-Hacks, um Firefox anzuzielen und anzupassen: http://browserhacks.com/
Ich bin wahrscheinlich etwas spät dran, das zu sagen, und Sie haben es wahrscheinlich inzwischen herausgefunden. Um Ihre Standard-Tabulatorgröße in Sublime Text einzustellen, gehen Sie zu
Preferences–Settings Defaultund scrollen Sie bis etwa Zeile 45 und ändern Sie dort, wotab-sizesteht, auf Ihre bevorzugte Tabulatorgröße, speichern und schließen Sie dann. Es gibt dort auch andere nützliche Dinge zum Ausprobieren.Tolle Tutorials, Chris, danke