Ihr Gehirn auf Front-End-Entwicklung

0
45

Teil der Arbeit eines front-end-Entwickler ist die Anwendung unterschiedlicher Techniken und Technologien ziehen die gewünschten UI-und UX. Vielleicht arbeiten Sie mit einem design-team und Umsetzung Ihrer designs. Ich weiß, wenn ich mir ein design (heck, auch wenn ich weiß, ich bin nicht zu bauen), meine front-end-Gehirn beginnt, auslösen, alle möglichen Dinge, die ich weiß, wird in Bezug auf die Aufgabe.

Lassen Sie uns nehmen einen Blick an, was ich meine.

Überprüfen Sie heraus dieses schöne Dribbble shot für eine-Food-Rezept-Website von Riko Sapto Dimo.

Es ist ein sehr ansprechendes design, und es gibt jede Menge dort zu denken, von einem front-end-web-design und Entwicklung Sicht.

Wir gehen meist werden reden über design-pattern-Auswahl-und HTML – /CSS-tech-Möglichkeiten. Es gibt viel mehr, um den job des front-end-Entwicklung. Zugänglichkeit! Leistung! Semantik! Design-Systeme! Alle wichtigen Sachen, wie gut.

Multi-line-gepolsterte text

Ah ja, das suchen, wo der text hat einen hintergrund folgt, dass die Länge der Textzeilen. Wir haben aufgerufen, dass Multi-Line Gepolsterten Text in die Vergangenheit und sah eine Reihe von Möglichkeiten, es zu tun. Die einfachste und modernste Art und Weise, es zu handhaben ist mit Kasten-Dekoration-brechen.

Finden Sie die Stift-Multiline-Polsterung mit box-decoration-break von Chris Coyier (@chriscoyier) auf CodePen.

Flexbox-header

Das header-Bereich ist nur betteln für flexbox. Es ist ein single-Richtung layout mit Elementen in verschiedenen Größen und verschiedenen Raum zwischen Ihnen. Ausdruck, dass in flexbox wird einfacher als jede andere Methode und erfordert keine Feste Größe oder Magische zahlen — und nicht zu vergessen flexibel!

Grid-layout

Die gesamte Seite layout hier könnte ausgedrückt werden schön mit CSS-raster. Denken Sie daran, dass die flexbox-und grid nicht im Widerspruch stehen. Ein element platziert in einer grid-Zelle werden kann flexbox! Wie der header oben, das macht Sinn. Der Haupt-content-Bereich und footer, als grid-Zellen, könnte wohl gehen, so oder so.

Vertikale Schrift

Nicht die offensichtliche Sache zu ziehen aus! Ihre beste Wette ist, mit dem schreiben-Modi. Jen Simmons geschrieben hat, über diese, und hier ist eine demo:

Finden Sie die Stift-Schreiben-Modus-Demo — Schlagzeile von Jen Simmons (@jensimmons) auf CodePen.

Line spannen

Sieht aus wie wir haben einige abschneiden hier Los ist. Allgemeine performance-Weise, wir würden wahrscheinlich wollen, dass die gesendeten Daten nur ein paar Zeilen lang. Aber der front-end kann mit Hilfe dieser auch, wenn es muss. Drei Zeilen text sind hier mit Auslassungszeichen am Ende. Vielleicht ist das design wirklich braucht die Kopie, um immer ein maximum von drei Linien. Das nennt man line spannen.

Finden Sie die Pen-Linie Clampin ” von Chris Coyier (@chriscoyier) auf CodePen.

Benutzerdefinierte Schriftarten

Wie die meisten Websites in diesen Tagen, dieses design ist beschichtet in kundenspezifische web-Schriftarten. Mit einem design, das Auffällig ist, würde ich sehr vorsichtig sein, über meine font-loading-Technik. Mein Bauchgefühl sagt mir, ich wäre mehr in FOIT als FOUT hier, und im Idealfall würde ich cache, font-Datei so hart wie ich konnte, damit hätten wir weder so oft wie möglich.

Text über die Bilder

Text “Dinner-Menü” ist direkt über damit beschäftigt, fotografische Bilder unten. Es ist immer noch lesbar, obwohl, vor allem, weil das helle weiß der text über ein dunkles Bild. Wir habe bedeckt dieses denken durch die in der Vergangenheit im detail. Weißer text auf einem dunklen Bild-ist in der Regel der Weg zu gehen, und verdunkelt genug solcher, die einfach nur über ein Bild OK. Es gibt andere Optionen, obwohl, wie Farbverläufe und Unschärfe (die auch hier im Einsatz in der Fußzeile)

Finden Sie den Stift ByKwaq von Chris Coyier (@chriscoyier) auf CodePen.

SVG-Symbole / Sterne-Bewertungen

Es gibt eine Reihe von einfachen, Vektor-icons verstreut rund um das design. Diese sind eine sichere Wette für ein SVG-Symbol-system. Dies ist meine aktuelle Empfehlung für die Annäherung an ein SVG-Symbol-system. Inline-SVG. Einfach und leistungsstark.

Diese Sterne-Bewertungen sind wahrscheinlich SVG-Territorium. Hier ist eine gute Sammlung von Optionen. Die fortlaufende Verbesserung von radio-buttons immer scheint, wie eine intelligente Art und Weise zu gehen:

Finden Sie den Stift CSS: Radio-Input-Stars von Jake Albaugh (@jakealbaugh) auf CodePen.

Hamburger

Es mag ein wenig überflüssig, auf eine große screen-design, wie, vor allem, weil es ist die navigation bereits sichtbar. Aber hey, es ist schwer zu vermeiden, in diesen Tagen, und es gibt etwas gesagt werden über die Ausbildung der Benutzer, wo die Website-navigation kann passieren, unabhängig davon, wo Sie schauen auf der Website.

Hier ist eine Sammlung dieser Art von Menüs.

Finden Sie den Stift, Hamburger Menü flip mit text ändern von Eric Grucza (@egrucza) auf CodePen.

Alles andere in dem design, das ich nicht erwähnen, dass Ihr Geist geht nach rechts Weg???

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!