Letzten Monat war ich in Honolulu, Hawaii für In Control. Am ersten Tag hielt ich einen ganztägigen Workshop über den Aufbau einer responsiven Website von Anfang bis Ende. Es war der längste seiner Art, den ich je gemacht habe. Wie wir es zuvor getan haben, werde ich die Notizen hier veröffentlichen.
Ich habe eine Photoshop-Datei zusammengestellt, mit der wir arbeiten konnten. Es war ein fiktives Autohaus für Gebrauchtwagen namens „Boxtown Cars“. Sie können sie herunterladen.
Was ihr an Schönheit mangelt, macht sie durch eine Fülle von Ausreden wett, um über moderne Webentwicklungs-Themen zu sprechen.
Ich habe das Projekt auf GitHub gestellt, falls Sie es von dort herunterladen möchten. Oder Sie können eine Live-Demo ansehen. Wir sind nicht ganz fertig geworden, wie Sie deutlich sehen können, aber wir sind weit genug gekommen, um über viele Dinge zu sprechen.
Wir haben CodeKit ausgiebig genutzt. Es ermöglichte uns, Sass und Compass für das Projekt zu verwenden, Style Injection durchzuführen, was für den Workflow großartig ist, sowie alle unsere CSS- und JavaScript-Dateien zu minimieren und zu verketten.
Die Verwendung von Compass bedeutet, dass wir @mixins für alle wichtigen CSS3-Funktionen kostenlos erhalten. Zum Beispiel kann das „Modul“-Muster, das wir überall verwendet haben,
.module {
/* Doesn't need a mixin */
box-shadow: 0 0 10px rgba(black, 0.4);
/* Our global number */
padding: $padding;
/* Compass! */
@include background(
linear-gradient(
top,
white,
#e4e4e4
)
);
}Wir haben eine lokale Domain zum Arbeiten mit MAMP (Video) eingerichtet. Das bedeutet, wir können intelligente Dinge tun, wie z. B. auf Assets vom Stammverzeichnis zu verweisen (z. B. <img src="/images/logo.png">), was meiner Meinung nach verständlicher ist. Wir planen auch, einige Ajax-Anfragen zu stellen, sodass wir dafür auf einem „echten“ Domainnamen sein müssen. Außerdem werden wir TypeKit verwenden, wofür wir eine Domain eingeben müssen, um den Zugriff zu ermöglichen. Nichts davon ist möglich, wenn man von einer Datei-URL aus arbeitet (d. h. eine index.html-Datei vom Desktop aus öffnet).
Unser Projektordner wurde von Grund auf als leerer Ordner auf dem Desktop erstellt. Wir haben index.php und Ordner für js, css, scss, images erstellt. Wir haben schnell die HTML-Struktur in index.php mit dem Befehl html:5-TAB in Emmet ausgearbeitet. Wir verwenden PHP, weil 1) es einfach ist, include()s zu machen (was wir nicht ganz geschafft haben, aber für kleine Demo-Sites wie diese super nützlich ist) und 2) wir Kommentare im Markup mit PHP-Kommentaren anstelle von HTML-Kommentaren machen können (diese müssen nicht über die Internet-Röhren kommen).
Wir laden nur eine CSS-Datei auf der Seite, global.css. Diese Datei wird aus global.scss erstellt, die viele verschiedene kleinere Teile @importiert. Dinge wie normalize.css (Link), Komponenten wie icons.scss, typography.scss und buttons.scss, sowie Abschnitte wie header.scss und footer.scss.
Die Schriftarten sind von TypeKit: Proxima Nova und Market Web. Wir haben ihren Standard-Einbettungscode verwendet, der keinen kurzzeitigen Textdurchschein garantiert, da es sich naturgemäß um ein blockierendes Skript handelt. Wir erwähnen jedoch, dass sie asynchrone Ladeverfahren anbieten, die etwas sicherer sein können.
Eine unserer SCSS-Dateien nennen wir _bits.scss (die Unterstrich-Namenskonvention bedeutet „Teil“ oder „woanders einzufügen“). Diese Datei enthält Dinge wie Variablen, die wir wiederverwenden möchten, und unsere eigenen erstellten @mixins.
Wir machen es mit unseren Farbvariablennamen nicht zu kompliziert und bleiben bei $yellow, $blue und $green, damit wir uns daran erinnern.
Es scheint immer eine Zahl zu geben, die in einem CSS-Layout immer wieder vorkommt. Ich nenne sie $padding und verwende sie überall, um Konsistenz zu gewährleisten.
Diese Datei enthält auch unser @mixin für Media Queries, sodass wir diese bei Bedarf an einer Stelle ändern können. Erfahren Sie mehr darüber.
Wir haben eine Textur für den Hintergrund von Subtle Patterns verwendet. Sie bieten die Texturen in @2x für Retina-Bildschirme an. Um diese Retina-Grafik bedingt zu laden, haben wir eine Retina-Media-Query verwendet. Wir haben diese zu unserem benutzerdefinierten Breakpoint @mixin hinzugefügt.
@mixin breakpoint($point) {
@if $point == papa-bear {
@media (min-width: 1600px) { @content; }
}
/* etc */
@else if $point == retina {
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@content;
}
}
}Das allgemeine Layout der Website benötigt Spalten mit fließender Breite, die **gleich hoch** sind. Es gibt zahlreiche Möglichkeiten, dies zu tun, aber da wir hier einen Workshop veranstalten und zukunftsweisende Dinge zeigen, entscheiden wir uns für Flexbox. Diese Art von Dingen ist in Flexbox sehr, sehr einfach, bemerken Sie nur, dass die Cross-Browser-Unterstützung für die neueste Syntax nicht besonders gut ist.
Das Design ist fließend, in dem Sinne, dass wir niemals Breiten festlegen, die keine Prozente sind. Diese werden auf kleinen Bildschirmen kleiner, da wir richtig eingestellt haben.
<meta name="viewport" content="width=device-width">Um die Spalten zu stapeln, entfernen wir einfach die Flexbox.
@include breakpoint(baby-bear) {
.guts {
display: block; // remove flexbox
}
}Wir haben ein Raster im „nicht zu viel nachdenken“-Stil im Einsatz, das wir ähnlich korrigieren, indem wir alle gefloateten Spalten zu 100 % Breite machen. „Don’t overthink it“-Stil.
Wir brauchten ein paar Icons für das Design, also haben wir nur ein paar aus IcoMoon ausgewählt und Font-Dateien mit nur diesen Icons darin heruntergeladen. Wir haben sie mit zugänglichem Markup auf die Seite geladen. Im Wesentlichen.
<a href="#" class="star" data-icon="">
<span class="visually-hidden">
Star This Car
</span>
</a>Das Logo der Seite ist vektorbasiert, daher verwenden wir SVG. SVG ist ziemlich fantastisch: klein, leicht weiter zu komprimieren, gut skalierbar und hat ausgefallene Funktionen wie die Möglichkeit, CSS direkt darin einzubetten. In unserem Fall haben wir es einfach als background-image verwendet. Wir haben Modernizr verwendet, um die SVG-Unterstützung zu testen. Modernizr fügt dem HTML-Element eine Klasse hinzu, die die Unterstützung anzeigt. So landen wir bei.
.main-header {
background: url(/images/logo.svg) no-repeat top left;
background-size: contain;
.no-svg & {
background-image: url(/images/logo.png);
}
}Die Navigation war auf kleinen Bildschirmen etwas unhandlich, also haben wir sie versteckt und einen „Menü anzeigen“-Link (mit einem Navicon) angezeigt. Das Klicken auf diesen Link zeigte das Menü an – das einen weiteren neuen Link zum Ausblenden des Menüs enthielt. Dies alles wurde nur mit CSS gemacht – Sie können ein Beispiel hier sehen.
Im Footer zeigen wir eine Google Map des Standorts des Autohauses an. Auf großen Bildschirmen möchten wir eine interaktive Karte anzeigen. Auf kleinen Bildschirmen nur eine statische Grafik mit einem Link zu Google Maps. Dies sind unterschiedliche Inhalte für unterschiedliche Bildschirme und werden am besten nicht von CSS gehandhabt, sondern von unserem Server, der uns unterschiedliche Inhalte liefert. Wir verwenden Enquire.js dafür und Ajax für die korrekten Inhalte.
// wait until the site loads, it's in the footer anyway
$(window).load(function() {
enquire
.register("(min-width: 650px)", {
// reverso mama-bear, essentially
match: function() {
$("#map").load(
"/parts/map-papabear.html"
);
},
// baby-bear
unmatch: function() {
$("#map").load(
"/parts/map-babybear.html"
);
}
})
.listen();
});Unsere global.js-Datei enthielt schließlich die Verkettung von drei Bibliotheken. CodeKit erledigt das gut mit seinen Kommentar-Direktiven.
// @codekit-prepend "jquery.fitvids.js";
// @codekit-prepend "modernizr.js";
// @codekit-prepend "enquire.js";
// our custom code...Wir haben keine Videos im endgültigen Beispiel belassen, aber wir haben im Workshop damit herumgespielt und FitVids.js verwendet, um sie in unserem fließenden Design funktionsfähig zu machen.
$(".main-column").fitVids();Gute Reise!
Schöner Spaziergang – wie immer. Und die Leute bei Howdy Honda danken Ihnen für die Verwendung ihrer Adresse.
Alles an einem Tag – jetzt protzt du aber!
Hallo, wieder großartige Arbeit. Ich habe die Dateien heruntergeladen und versuche, sie lokal mit MAMP anzuzeigen (etwas, das ich mit WordPress gemacht habe, aber nicht mit einer normalen Website). Wenn ich die index.php-Datei in MAMP lade, werden die CSS- und JS-Dateien nicht korrekt verknüpft. Hat das etwas mit relativen Pfaden zu tun? Jede Hilfe wäre sehr willkommen.
Bezüglich des SVG-Logo-Austauschs, sind Sie besser dran, wenn Sie Folgendes verwenden?
Laden die Browser, die das SVG-Asset nicht unterstützen, es trotzdem herunter/verursachen sie eine HTTP-Anfrage?
Ich verwende derzeit ein Mixin für diese Aufgabe, da ich meine Logos immer als SVG erstelle.
und rufen dieses Mixin wie folgt auf:
Ich war einer der sieben Glücklichen, die am Workshop teilgenommen haben (und in Hawaii, um genau zu sein). Tolle Präsentation, Chris, und danke fürs Hochladen der Dateien!
Gute Idee, wie immer, und exzellente Arbeit. Großartige Demonstration und danke für die Veröffentlichung der Informationen, da sie wirklich von Vorteil sind..:-)