interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

More media query

Browse source
This commit is contained in:
Stephan Hagedorn 2017-09-18 16:58:53 +02:00
parent 5f8b8e3b60
commit ebffacd3fd
10 changed files with 288 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

1
_hippie.scss
View file

@ -79,6 +79,7 @@
// in dependency to other styles
// Additional modules can be defined here
// -----------------------------------------------------------------------------
@import "modules/breakpoint/breakpoint_module";
@import "modules/navigation/nav_module";
@import "modules/tables/tables_module";
@import "modules/card/card_module";

23
demo-index.html
View file

@ -424,10 +424,29 @@
<section class="sec__main_center">
<header>
<h1>Einzelne Elemente</h1>
<h1>Medienformat Abfragen</h1>
</header>
<article>
<div class="demo__query_example">Umbruch bei&nbsp;</div>
<div class="demo__queries">
<p class="query__phoneUp">Telefone und größer</p>
<p class="query__phoneOnly">Nur Telefone</p>
<p class="query__tabletPortaitOnly"Nur >Schreibtafeln hochkant</p>
<p class="query__tabletPortraitUp">Schreibtafeln und größer</p>
<p class="query__tabletLandscapeOnly">Schreibtafeln im Querformat</p>
<p class="query__tabletLandscapeUp">Schreibtafeln quer und größer</p>
<p class="query__desktopOnly">Nur Arbeitsplatzrechner</p>
<p class="query__desktopUp">Arbeitsplatzrechner und größer</p>
<p class="query__bigDesktopUp">Richtige Monitore und größer</p>
</div>
</article>
</section>
<section class="sec__main_center">
<header>
<h1>Sammlung formatierter Elemente</h1>
<p>Die Elemente werden fortlaufend komplexer</p>
</header>
<article>
<h2>Bereiche</h2>
<pre class="pre__code"><code>h3.txt_light_color+p</code></pre>
<h3 class="txt_light_color">Helle Überschrift</h3>
<p>Mit normalem Textabsatz</p>

14
elements/_sections.scss
View file

@ -47,23 +47,15 @@ section {
margin: 0 auto;
padding-top: $space_3;
@media screen and (orientation: landscape) {
@media (min-width: $screen_small) {
@include forTabletPortraitUp {
width: $width_small;
}
@media (min-width: $screen_medium) {
@include forTabletLandscapeUp {
width: $width_medium;
}
@media (min-width: $screen_large) {
@include forBigDesktopUp {
width: $width_large;
}
}
@media screen and (orientation: portrait) {
@media (min-width: $screen_small) {
width: $width_small;
}
}
}
aside {

99
example.css
View file

@ -202,7 +202,7 @@ textarea:not([disabled]):focus {
font-size: 1em;
line-height: 1.5; }
pre, code, .code__solo, input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
pre, code, .demo__query_example:after, .code__solo, input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
font-family: Courier New, monospace;
font-size: 1em;
line-height: 1.5; }
@ -266,20 +266,16 @@ body {
width: 96%;
margin: 0 auto;
padding-top: 32px; }
@media screen and (orientation: landscape) and (min-width: 1024px) {
@media (min-width: 768px) {
.sec__main_center, .demo__intro {
width: 80%; } }
@media screen and (orientation: landscape) and (min-width: 1280px) {
@media (min-width: 1024px) {
.sec__main_center, .demo__intro {
width: 60%; } }
@media screen and (orientation: landscape) and (min-width: 1920px) {
@media (min-width: 1680px) {
.sec__main_center, .demo__intro {
width: 48%; } }
@media screen and (orientation: portrait) and (min-width: 1024px) {
.sec__main_center, .demo__intro {
width: 80%; } }
aside.right + section {
margin-right: calc(20% + 8px); }
aside.left + section {
@ -322,7 +318,7 @@ h6 {
p, .block__column_2, .block__column_3, caption {
margin: 8px 0; }
p code, .block__column_2 code, .block__column_3 code, caption code {
p code, .block__column_2 code, .block__column_3 code, caption code, p .demo__query_example:after, .block__column_2 .demo__query_example:after, .block__column_3 .demo__query_example:after, caption .demo__query_example:after {
padding: 1px 4px;
font-size: 1em;
line-height: 1; }
@ -346,7 +342,7 @@ hr, .hr__hidden, .hr__dotted {
border-radius: 1px;
padding: 8px;
background-color: rgba(255, 255, 255, 0.1); }
.pre__code code {
.pre__code code, .pre__code .demo__query_example:after {
background-color: transparent; }
blockquote {
@ -493,7 +489,7 @@ b, strong {
cite {
font-style: italic; }
code {
code, .demo__query_example:after {
color: #1f1f1f;
background-color: rgba(255, 255, 255, 0.1); }
@ -1143,6 +1139,87 @@ nav li {
width: 32px;
height: 32px; }
.demo__queries > p, .demo__queries > .block__column_2, .demo__queries > .block__column_3, .demo__queries > caption {
padding: calc(8px - 3px) 8px; }
.query__phoneUp {
background-color: rgba(0, 0, 0, 0.2); }
@media (max-width: 767px) {
.query__phoneOnly {
background-color: rgba(0, 0, 0, 0.2); } }
@media (min-width: 768px) and (max-width: 1023px) {
.query__tabletPortaitOnly {
background-color: rgba(0, 0, 0, 0.2); } }
@media (min-width: 768px) {
.query__tabletPortraitUp {
background-color: rgba(0, 0, 0, 0.2); } }
@media (min-width: 1024px) and (max-width: 1279px) {
.query__tabletLandscapeOnly {
background-color: rgba(0, 0, 0, 0.2); } }
@media (min-width: 1024px) {
.query__tabletLandscapeUp {
background-color: rgba(0, 0, 0, 0.2); } }
@media (min-width: 1280px) and (max-width: 1679px) {
.query__desktopOnly {
background-color: rgba(0, 0, 0, 0.2); } }
@media (min-width: 1280px) {
.query__desktopUp {
background-color: rgba(0, 0, 0, 0.2); } }
@media (min-width: 1680px) {
.query__bigDesktopUp {
background-color: rgba(0, 0, 0, 0.2); } }
.demo__query_example {
margin-bottom: 32px;
padding: 32px;
text-align: center; }
@media (min-width: 48em) {
.demo__query_example {
background-color: #fad803; } }
@media (min-width: 64em) {
.demo__query_example {
background-color: #d30a51; } }
@media (min-width: 80em) {
.demo__query_example {
background-color: #273f8b; } }
@media (min-width: 90em) {
.demo__query_example {
background-color: #b7e0f0; } }
@media (min-width: 105em) {
.demo__query_example {
background-color: #52bed1; } }
@media (min-width: 120em) {
.demo__query_example {
background-color: #0c85ff; } }
.demo__query_example:after {
content: '< 768px';
padding: calc(8px - 3px) 8px;
border-radius: 2px;
background-color: rgba(0, 0, 0, 0.2); }
@media (min-width: 48em) {
.demo__query_example:after {
content: '768px'; } }
@media (min-width: 64em) {
.demo__query_example:after {
content: '1024px'; } }
@media (min-width: 80em) {
.demo__query_example:after {
content: '1280px'; } }
@media (min-width: 105em) {
.demo__query_example:after {
content: '1680px'; } }
@media (min-width: 120em) {
.demo__query_example:after {
content: '1920px'; } }
.test li::after {
content: "";
display: block;

2
global/_config.scss
View file

@ -153,6 +153,8 @@ $basic_border: $tiny_space solid $basic_border_color;
$dotted_border: $tiny_space dotted $basic_border_color;
$cell_border: $tiny_space solid $darkest_color;
$basic_corner_radius: $tiny_space * 2;
$basic_aside_width: 20%;

3
mixins/_all.scss
View file

@ -1,3 +1,4 @@
@import "clearflow";
@import "media_query";
@import "flow";
@import "color";
@import "user_agent";

4
mixins/_clearflow.scss → mixins/_flow.scss
View file

@ -6,7 +6,7 @@
//
// @example scss - Usage
// .element {
// @include clearflow;
// @include clearFlow;
// }
//
// @example css - CSS Output
@ -16,7 +16,7 @@
// display: table;
// }
@mixin clearflow {
@mixin clearFlow {
&::after {
content: "";
clear: both;

35
mixins/_media_query.scss Normal file
View file

@ -0,0 +1,35 @@
//Sections for Media Queries
@mixin forPhoneOnly {
@media (max-width: #{$screen_tiny - 1}) { @content; } //599px
}
@mixin forTabletPortraitUp {
@media (min-width: $screen_tiny) { @content; } //600px
}
@mixin forTabletPortraitOnly {
@media (min-width: $screen_tiny) and (max-width: #{$screen_small - 1}) { @content; } //600px - 899px
}
@mixin forTabletLandscapeUp {
@media (min-width: $screen_small) { @content; } //900px
}
@mixin forTabletLandscapeOnly {
@media (min-width: $screen_small) and (max-width: #{$screen_medium - 1}) { @content; } //900px - 1199px
}
@mixin forDesktopUp {
@media (min-width: $screen_medium) { @content; } //1200px
}
@mixin forDesktopOnly {
@media (min-width: $screen_medium) and (max-width: #{$screen_huge - 1}) { @content; } //1200px - 1799px
}
@mixin forBigDesktopUp {
@media (min-width: $screen_huge) { @content; } //1800px
}
//Mobile-first Media Query
@mixin goingLarge($width) {
@media (min-width: $width/16+em) { @content; }
}
//Desktop-first Media Query
@mixin goingSmall($width) {
@media (max-width: $width/16+em) { @content; }
}

46
modules/breakpoint/_breakpoint_module.scss Normal file
View file

@ -0,0 +1,46 @@
.query__goingLarge {
@include goingLarge($screen_tiny) {};
}
.query__goingSmall {
@include goingSmall($screen_gigantic) {};
}
.query__phoneUp {
}
.query__phoneOnly {
@include forPhoneOnly {}
}
.query__tabletPortaitOnly {
@include forTabletPortraitOnly {
}
}
.query__tabletPortraitUp {
@include forTabletPortraitUp {
}
}
.query__tabletLandscapeOnly {
@include forTabletLandscapeOnly {}
}
.query__tabletLandscapeUp {
@include forTabletLandscapeUp {}
}
.query__desktopOnly {
@include forDesktopOnly {
}
}
.query__desktopUp {
@include forDesktopUp {
}
}
.query__bigDesktopUp {
@include forBigDesktopUp {}
}

77
modules/demo/_demo_module.scss
View file

@ -96,3 +96,80 @@
width: 32px;
height: 32px;
}
.demo__queries > p {
padding: $basic_padding;
}
.query__phoneUp {
background-color: rgba($basic_front_color, .2);
}
.query__phoneOnly {
@include forPhoneOnly { background-color: rgba($basic_front_color, .2); }
}
.query__tabletPortaitOnly {
@include forTabletPortraitOnly { background-color: rgba($basic_front_color, .2); }
}
.query__tabletPortraitUp {
@include forTabletPortraitUp { background-color: rgba($basic_front_color, .2); }
}
.query__tabletLandscapeOnly {
@include forTabletLandscapeOnly { background-color: rgba($basic_front_color, .2); }
}
.query__tabletLandscapeUp {
@include forTabletLandscapeUp { background-color: rgba($basic_front_color, .2); }
}
.query__desktopOnly {
@include forDesktopOnly { background-color: rgba($basic_front_color, .2); }
}
.query__desktopUp {
@include forDesktopUp { background-color: rgba($basic_front_color, .2); }
}
.query__bigDesktopUp {
@include forBigDesktopUp { background-color: rgba($basic_front_color, .2); }
}
.demo__query_example {
@include goingLarge($screen_tiny/1px) {background-color: $alpha_color; }
@include goingLarge($screen_small/1px) {background-color: $bravo_color; }
@include goingLarge($screen_medium/1px) {background-color: $charlie_color; }
@include goingLarge($screen_large/1px) {background-color: $delta_color; }
@include goingLarge($screen_huge/1px) {background-color: $echo_color; }
@include goingLarge($screen_gigantic/1px) {background-color: $foxtrot_color; }
margin-bottom: $space_3;
padding: $space_3;
text-align: center;
&:after {
@extend code;
@include goingLarge($screen_tiny/1px) {
& { content: '768px'; }
}
@include goingLarge($screen_small/1px) {
& { content: '1024px'; }
}
@include goingLarge($screen_medium/1px) {
& { content: '1280px'; }
}
@include goingLarge($screen_huge/1px) {
& { content: '1680px'; }
}
@include goingLarge($screen_gigantic/1px) {
& { content: '1920px'; }
}
content: '< 768px';
padding: $basic_padding;
border-radius: $basic_corner_radius;
background-color: rgba($basic_front_color, .2);
}
}