Skip to content

Commit

Permalink
rework scaling functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
flurinduerst committed Jul 28, 2016
1 parent 6c31cf8 commit a0742f0
Show file tree
Hide file tree
Showing 10 changed files with 156 additions and 166 deletions.
5 changes: 3 additions & 2 deletions CHANGELOG.md
@@ -1,11 +1,12 @@
# CHANGELOG

## Head
## 0.13.0 «Scale»
* rework scaling functionality
* bugfix enqueue jQuery from Google CDN
* bugfix remove hardcoded scripts from footer
* bugfix (typo) in backend function `onlyadmin_update`

## 0.12.0
## 0.12.0 «Heads up»
* enqueue scripts, styles, fonts
* add wp_head
* add wp_head cleaner
Expand Down
22 changes: 14 additions & 8 deletions README.md
@@ -1,6 +1,6 @@
<img src="/assets/images/wpseed.png" width="518"/>

**Version:** 0.12.3
**Version:** 0.13.0

## What is WPSeed?
WPSeed is a WordPress starter theme following the intention of being able to skip the time-consuming first steps when creating a new theme.
Expand Down Expand Up @@ -47,8 +47,8 @@ WPSeeds environment (Gulp, Bower, Browsersync, asset-builder) uses the [sage](ht
* `assets/styles/general.scss` (re-usable classes and settings)
* `assets/styles/main.scss` (gathers all .scss files for compiling with gulp)
* `assets/styles/nav.scss` (navigation)
* `assets/styles/responsive.scss` (responsive stuff, **this file is not meant to be changed**)
* `assets/styles/vars.scss` (manages all colors, fonts and re-sizing and other presets)
* `assets/styles/essentials.scss` (required SASS functions and all presets for responsive, **this file is not meant to be changed**)
* `assets/styles/vars.scss` (manages scaling, all colors, fonts and other presets)

##### Javascript
* `assets/scrips/essentials.js` (re-usable essential javascript/jQuery functions/variables)
Expand All @@ -72,22 +72,28 @@ All templates are seperate into three categories recognizable by their prefix:
* **`str`**: structure files that have to be included in other sites or the main structure.


### Responsive mixins/classes
##### defined by variables
### Responsive/Fluid presets

#### Scaling
By default, the layout will scale with the viewport-width as all units are `rem` based and `html` uses font-size as the root unit.
This scaling can be configured at the `SIZE/SCALING` section in `vars.scss`. It is also possible to stop the scaling at a certain viewport-width. See instructions inside `vars.scss`.

#### Mixins/Classes
**defined by variables**
* The width of the two available variables `mobile` and `desktop` are defined in vars.scss. Usage (with default values):
* min 800px `@include desktop {...}`
* max 799px`@include mobile {...}`

##### defined by individual pixel widths
**defined by individual pixel widths**
* at least 750px: `@include vpw_min(750px)`
* at most 500px: `@include vpw_max(500px)`
* between 1000px and 1200px: `vpw(1000px, 1200px)`

##### defined by ascepct-ratio
**defined by ascepct-ratio**
* at least 16:9: `@include asr_min(16,9) { ... }`
* at most 4:3: `@include asr_max(4,3) { ... }`

##### defined by css-class
**defined by css-class**
the two available classes `mobile` and `desktop` perform as followed (with default values):
```SCSS
.desktop {
Expand Down
48 changes: 24 additions & 24 deletions assets/styles/content.scss
Expand Up @@ -3,7 +3,7 @@
* Contains all content related styles
*
* @author Flurin Dürst
* @version 1.6.1
* @version 1.7
* @since WPSeed 0.1
*
*/
Expand All @@ -16,26 +16,26 @@
.content {
position: relative;
width: 80%;
padding-top: 4rem;
padding-top: 2rem;
@include mobile {
width: 100%;
padding: 2rem;
padding: 1rem;
}
section img,
article img {
float: left;
width: 50%;
padding: 0 2rem 2rem 0;
padding: 0 1rem 1rem 0;
@include mobile {
float: none;
width: 100%;
padding: -2rem;
padding: -1rem;
}
}
}

.top + div {
margin-top: 8rem;
margin-top: 4rem;
}

/* TOP
Expand All @@ -51,17 +51,17 @@
justify-content: flex-start;
align-items: center;
width: 100%;
height: 8rem;
height: 4rem;
padding: 0 10%;
background-color: $color_bright;
box-shadow: $shadow_material_soft_s1;
@include mobile {
padding: 0 2rem;
padding: 0 1rem;
}
.logo {
width: 6rem;
height: 6rem;
margin-right: 5rem;
width: 3rem;
height: 3rem;
margin-right: 2rem;
background-image: url('../images/logo.svg');
background-size: contain;
background-repeat: no-repeat;
Expand All @@ -73,17 +73,17 @@
/===================================================== */

h1 {
margin: 0 0 .5rem 0;
font-size: 4rem;
margin: 0 0 .25rem 0;
font-size: 2rem;
}

h2 {
margin: 0 0 .5rem 0;
font-size: 3rem;
font-size: 1.5rem;
}

p {
margin: 0 0 1rem 0;
margin: 0 0 .5rem 0;
}


Expand All @@ -94,7 +94,7 @@ p {
/------------------------*/
.teaser {
width: 100%;
height: 50rem;
height: 25rem;
background-position: center;
background-size: cover;
}
Expand All @@ -109,7 +109,7 @@ p {
justify-content: space-between;
article {
flex-basis: calc(90% / 2);
margin-bottom: 2rem;
margin-bottom: 1rem;
@include mobile {
flex-basis: 100%;
}
Expand All @@ -125,14 +125,14 @@ p {
.blog,
.post {
.postinfo {
margin: 0 0 2rem 0;
margin: 0 0 1rem 0;
color: $color_grey;
}

.thumbnail {
width: 100%;
height: 30rem;
margin-bottom: 1rem;
height: 15rem;
margin-bottom: .5rem;
background-size: cover;
}
}
Expand All @@ -147,7 +147,7 @@ p {
justify-content: space-between;
section {
flex-basis: calc(90% / 3);
margin-bottom: 2rem;
margin-bottom: 1rem;
@include vpw_min(1600px) {
flex-basis: calc(90% / 4);
}
Expand All @@ -159,7 +159,7 @@ p {
}
.thumbnail {
width: 100%;
height: 30rem;
height: 15rem;
background-size: cover;
}
}
Expand All @@ -172,8 +172,8 @@ p {
.footer {
width: 100%;
margin-top: auto;
padding: 3rem;
font-size: 1.5rem;
padding: 1.5rem;
font-size: .8rem;
color: $color_grey;
background: $color_bright;
box-shadow: $shadow_material_s1;
Expand Down
81 changes: 81 additions & 0 deletions assets/styles/essentials.scss
@@ -0,0 +1,81 @@
/**
* SASS Functions/Mixings/Toolbox
* Contains general SASS functions aswell all responsive/fluid mixins
* This file is not meant to be changed
*
* @author Flurin Dürst
* @version 1.0
* @since WPSeed 0.13
*
*/


@import 'vars';

/* GENERAL FUNCTIONS
/===================================================== */

/* STRIP UNIT
/------------------------*/
// removes a unit from a variable
@function stripunit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}


/* RESPONSIVE MIXINS
/===================================================== */
// contains styles & mixins for responsive/fluid usage

/* BY BREAKPOINTS
/------------------------*/
// breakpoint-width defined in vars.scss
@mixin desktop {
@media (min-width: #{$desktop_min}) {
@content;
}
}
@mixin mobile {
@media (max-width: #{$desktop_min - 1px}) {
@content;
}
}

/* BY PIXELS
/------------------------*/
// usage example: { ... }
@mixin vpw_min($min) {
@media (min-width: #{$min}) { @content; }
}
@mixin vpw_max($max) {
@media (max-width: #{$max}) { @content; }
}
@mixin vpw($min: 0px, $max: 0px) {
@media (min-width: #{$min}) and (max-width: #{$max}) { @content; }
}

/* BY ASPECT RATIO
/------------------------*/
// usage example: asr_min(16,9) { ... }
@mixin asr_min($width: 16, $height: 9) {
@media (min-aspect-ratio: #{$width} / #{$height}) { @content; }
}
@mixin asr_max($width: 16, $height: 9) {
@media (max-aspect-ratio: #{$width} / #{$height}) { @content; }
}

/* BY CLASS
/------------------------*/
.mobile {
@include desktop {
display: none;
}
}
.desktop {
@include mobile {
display: none;
}
}
41 changes: 12 additions & 29 deletions assets/styles/general.scss
Expand Up @@ -6,7 +6,7 @@
* minimum while using vars.scss for very basic styling.
*
* @author Flurin Dürst
* @version 1.5.1
* @version 1.6
* @since WPSeed 0.1
*
*/
Expand Down Expand Up @@ -35,36 +35,18 @@ html {
overflow-x: hidden;
margin: 0;
padding: 0;
font-family: $font_name;
font-size: $base_size;
color: $color_text;
background-color: $color_bright;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@include vpw_min(2000px) {
font-size: $size_2000;
}
@include vpw_max(1999px) {
font-size: $size_1800;
}
@include vpw_max(1800px) {
font-size: $size_1800;
}
@include vpw_max(1600px) {
font-size: $size_1600;
}
@include vpw_max(1400px) {
font-size: $size_1400;
}
@include vpw_max(1200px) {
font-size: $size_1200;
}
@include vpw_max(1000px) {
font-size: $size_1000;
font-family: $font_name, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: $size;
@include vpw_min($scl_breakpoint) {
font-size: $scl_breakpoint / 100 * stripunit($size);
}
@include mobile {
font-size: $size_mobile;
}
color: $color_text;
background-color: $color_bright;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
Expand All @@ -75,6 +57,7 @@ body {
min-height: 100vh;
font-size: $font_size;
font-weight: $font_weight;
line-height: $line_height;
}

a {
Expand Down Expand Up @@ -139,7 +122,7 @@ table {
// used in dd() @ functions-dev.php

.dev {
margin: 5rem 0;
margin: 2.5rem 0;
border: 5px dashed #abb2c0;
&.noborder {
border: none;
Expand All @@ -161,7 +144,7 @@ pre {
margin: .1rem;
padding: .3rem;
font-family: 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace;
font-size: 2rem;
font-size: .5rem;
color: #abb2c0;
border-radius: 5px;
background-color: #282c34;
Expand Down

0 comments on commit a0742f0

Please sign in to comment.