31.05.2017 Webinale Berlin
Jonas Hellwig
kulturbanause.de
@_kulturbanause
Front-End-Designer @ kulturbanause
Autor, Dozent
Einführung in modulares Design
Beschreibung des Problems mit MQs
Lösungsansätze
Begriffserklärungen
Live-Beispiele zur Umsetzung
Responsive Web Design erscheint auf alistapart.com
Flexible Grid
Flexible Media
Media Queries
Entstanden aus altem Workflow
Fixed Grid
Globale Breakpoints
Orientierung an Gerätegrößen
»Set breakpoints based on content, never on specific devices,
products or brands«
Google Web Fundamentals
Entstanden aus modernem Workflow
Fluid Grid
Komponentenbasierte Breakpoints
»We’re not designing pages, we’re designing systems of components«
Stephen Hay
Komponenten können auf den Raum im Elternelement reagieren
Echtes modulares Design ist möglich
Der Code ist übersichtlich und schlank
.card {
/* blau */
}
/* Schreibweise nach github.com/marcj/css-element-queries */
.card[min-width~="500px"] {
/* grün */
}
.card {
/* blau */
}
/* Schreibweise nach github.com/tomhodgins/element-queries-spec */
@element .card and (min-width:500px) {
$this {
/* grün */
}
}
.card {
/* blau */
}
/* Schreibweise nach github.com/ausi/cq-prolyfill */
.card:media(min-width:500px) {
/* grün */
}
/* Wenn .sidebar existiert … */
@element .sidebar {
/* … reduziere die Breite des .content */
.content {
width: 60%;
}
}
/* Wenn .card existiert und breiter als 500px ist … */
@element .card and (min-width:500px) {
/* … ordne .card-header und .card-content nebeneinander an */
.card-header, .card-content {
flex:1;
}
}
/* Wenn .card existiert und breiter als 500px ist … */
@element .card and (min-width:500px) {
/* … ordne .card-header und .card-content nebeneinander an */
.card-header, .card-content {
flex:1;
}
}
/* Wenn input mindestens 20 Zeichen enthält … */
@element input and (min-characters:20) {
/* … ändere die Farbe auf grün */
$this {
color:lime;
}
}
Script einbinden
Element Queries im CSS-Code schreiben
<head>
<style>/* EQCSS */</style>
<link href="eqcss.css">
</head>
<body>
<script src="eqcss.js"></script>
</body>
@element SELEKTOR and (RESPONSIVE CONDITION) {
SELEKTOR {
EIGENSCHAFT: WERT;
}
}
@element body and (min-height:800px) {
header {
background: blue;
}
}
min-width & max-width
min-height & max-height
min-children & max-children
min-characters & max-characters
min-lines & max-lines
min-scroll-x, max-scroll-x, min-scroll-y & max-scroll-y
orientation
min-aspect-ratio & max-aspect-ratio
$this
$prev
$next
$parent
$root
eh
ew
emin
emax
Beispiel 1 – Mehrspaltige Komponenten
Endlosschleifen
@element div and (min-width: 1000px) {
$this {
width: 999px;
}
}
Überflüssig
Auf Styling begrenzt
kulturbanause.de
blog.kulturbanause.de
@_kulturbanause