├── .bowerrc ├── .gitattributes ├── .gitignore ├── .jshintrc ├── bower.json ├── contributors.txt ├── gulpfile.js ├── package.json ├── readme.md ├── src ├── 404.php ├── archive.php ├── comments.php ├── content-none.php ├── content-page.php ├── content-search.php ├── content-single.php ├── content.php ├── footer.php ├── functions-sample.php ├── functions.php ├── header.php ├── inc │ ├── conditionals.php │ ├── custom-header.php │ ├── customizer.php │ ├── extras.php │ ├── fonts.php │ ├── init.php │ ├── jetpack.php │ ├── template-tags.php │ ├── template-tags │ │ ├── archive-description.php │ │ ├── archive-title.php │ │ ├── entry-footer.php │ │ ├── featured-image.php │ │ ├── post-navigation.php │ │ ├── posted-on.php │ │ ├── posts-navigation.php │ │ └── social-links.php │ ├── theme.php │ └── widgets.php ├── index.php ├── js │ ├── core.js │ └── extras.js ├── languages │ ├── forward.pot │ ├── readme.md │ └── readme.txt ├── page.php ├── readme.txt ├── screenshot.png ├── scss │ ├── base │ │ ├── _fix.scss │ │ ├── _grid.scss │ │ ├── _normalize.scss │ │ ├── _reset.scss │ │ └── _wp-header.scss │ ├── components │ │ ├── _comments.scss │ │ ├── _footer.scss │ │ ├── _forms.scss │ │ ├── _global.scss │ │ ├── _header.scss │ │ ├── _html.scss │ │ ├── _layout.scss │ │ ├── _media.scss │ │ ├── _navigation.scss │ │ └── _search.scss │ ├── layouts │ │ ├── _404.scss │ │ ├── _blog.scss │ │ ├── _main-content.scss │ │ └── _sidebar.scss │ ├── mixins │ │ ├── _type-styles.scss │ │ ├── _unsorted.scss │ │ └── _utilities.scss │ ├── style.scss │ └── variables │ │ ├── _color.scss │ │ ├── _typography.scss │ │ └── _unsorted.scss ├── search.php ├── sidebar.php ├── single.php └── templates │ └── full-width.php └── yarn.lock /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "./bower_components", 3 | "scripts": { 4 | "postinstall": "gulp bower" 5 | } 6 | } -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # .gitattributes adapted from https://github.com/Danimoth/gitattributes 2 | 3 | # Auto detect text files and perform LF normalization via http://davidlaing.com/2012/09/19/customise-your-gitattributes-to-become-a-git-ninja/ 4 | * text=auto 5 | 6 | # These files are text and should be normalized (Convert crlf => lf) 7 | *.php text 8 | *.css text 9 | *.js text 10 | *.htm text 11 | *.html text 12 | *.xml text 13 | *.txt text 14 | *.ini text 15 | *.inc text 16 | .htaccess text 17 | 18 | # Documents 19 | *.doc diff=astextplain 20 | *.DOC diff=astextplain 21 | *.docx diff=astextplain 22 | *.DOCX diff=astextplain 23 | *.dot diff=astextplain 24 | *.DOT diff=astextplain 25 | *.pdf diff=astextplain 26 | *.PDF diff=astextplain 27 | *.rtf diff=astextplain 28 | *.RTF diff=astextplain 29 | 30 | # These files are binary and should be left untouched 31 | # (binary is a macro for -text -diff) 32 | *.png binary 33 | *.jpg binary 34 | *.jpeg binary 35 | *.gif binary 36 | *.ico binary 37 | *.mov binary 38 | *.mp4 binary 39 | *.mp3 binary 40 | *.flv binary 41 | *.fla binary 42 | *.swf binary 43 | *.gz binary 44 | *.zip binary 45 | *.7z binary 46 | *.ttf binary 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## General 2 | .cvs 3 | .htaccess 4 | .svn 5 | *.bak 6 | *.log 7 | *.swp 8 | 9 | ## Windows 10 | Desktop.ini 11 | Thumbs.db 12 | 13 | ## Mac 14 | .DS_Store 15 | 16 | ## WordPress 17 | wp-config.php 18 | wp-content/uploads/ 19 | wp-content/blogs.dir/ 20 | wp-content/upgrade/ 21 | wp-content/backup-db/ 22 | wp-content/advanced-cache.php 23 | wp-content/wp-cache-config.php 24 | wp-content/cache/* 25 | wp-content/cache/supercache/* 26 | wp-content/cache/ 27 | wp-content/backups/ 28 | sitemap.xml 29 | sitemap.xml.gz 30 | 31 | ## Development 32 | .sass-cache 33 | bower_components 34 | node_modules 35 | build 36 | dist 37 | ._* 38 | 39 | ## Optionally track the stylesheet 40 | # build/* 41 | # !build/style.css 42 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "bitwise": true, 3 | "eqeqeq": true, 4 | "eqnull": true, 5 | "immed": true, 6 | "newcap": true, 7 | "esnext": true, 8 | "camelcase": true, 9 | "latedef": true, 10 | "noarg": true, 11 | "node": true, 12 | "undef": true, 13 | "browser": true, 14 | "trailing": true, 15 | "jquery": true, 16 | "curly": true, 17 | "supernew": true, 18 | "globals": { 19 | "Backbone": true, 20 | "_": true, 21 | "jQuery": true 22 | } 23 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forward", 3 | "version": "1.0.0", 4 | "authors": [ 5 | "Ben Leivian " 6 | ], 7 | "moduleType": [ 8 | "node" 9 | ], 10 | "license": "MIT", 11 | "homepage": "http://drawbackwards.com", 12 | "ignore": [ 13 | "**/.*", 14 | "node_modules", 15 | "bower_components", 16 | "./bower_components", 17 | "test", 18 | "tests" 19 | ], 20 | "devDependencies": { 21 | "bourbon": "~4.2.2", 22 | "neat": "~1.7.2", 23 | "normalize.css": "~3.0.3", 24 | "meyer-reset": "*" 25 | }, 26 | "description": "Components for the Forward Framework." 27 | } 28 | -------------------------------------------------------------------------------- /contributors.txt: -------------------------------------------------------------------------------- 1 | Ben Leivian 2 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // Setup 3 | // =========================================================================== 4 | 5 | 6 | // Project Variables 7 | // --------------------------------------------------------------------------- 8 | 9 | var project = 'forward'; 10 | var build = 'build/'; 11 | var dist = 'dist/'+project+'/'; 12 | var source = 'src/'; 13 | var lang = 'languages/'; 14 | var bower = 'bower_components/'; 15 | var url = 'forward.local'; 16 | 17 | 18 | // Plugins 19 | // --------------------------------------------------------------------------- 20 | 21 | var gulp = require('gulp'); 22 | var del = require('del'); 23 | var plugins = require('gulp-load-plugins')({ camelize: true }); // This loads all modules prefixed with "gulp-" to plugins.moduleName 24 | var browserSync = require('browser-sync').create(); 25 | 26 | 27 | // PostCSS Processors 28 | // --------------------------------------------------------------------------- 29 | 30 | var postcss = require('gulp-postcss'); 31 | var perfectionist = require('perfectionist'); 32 | var autoprefixer = require('autoprefixer'); 33 | var cssnano = require('cssnano'); 34 | var combinemq = require("css-mqpacker"); 35 | 36 | 37 | // =========================================================================== 38 | // Styles 39 | // =========================================================================== 40 | 41 | // Main Styles 42 | // --------------------------------------------------------------------------- 43 | 44 | gulp.task('styles', function() { 45 | gulp.src(source + 'scss/style.scss') 46 | .pipe(plugins.sourcemaps.init()) 47 | .pipe(plugins.sass({ 48 | sourcemap: true, 49 | includePaths: [bower] 50 | }).on('error', plugins.sass.logError)) 51 | .pipe(postcss([autoprefixer, combinemq({ 52 | sort: true 53 | }), cssnano, perfectionist({ 54 | format: 'compact' 55 | })])) 56 | .pipe(plugins.sourcemaps.write('.')) 57 | .pipe(gulp.dest(build)) 58 | .pipe(browserSync.stream({match: '**/*.css'})); 59 | }); 60 | 61 | 62 | // =========================================================================== 63 | // Scripts 64 | // =========================================================================== 65 | 66 | // Scripts; broken out into different tasks to create specific bundles which are then compressed in place 67 | // 68 | gulp.task('scripts', ['scripts-lint', 'scripts-core', 'scripts-extras'], function(){ 69 | return gulp.src([build+'js/**/*.js', '!'+build+'js/**/*.min.js']) // Avoid recursive min.min.min.js 70 | .pipe(plugins.rename({suffix: '.min'})) 71 | .pipe(plugins.uglify()) 72 | .pipe(gulp.dest(build+'js/')); 73 | }); 74 | 75 | // Lint scripts for errors and sub-optimal formatting 76 | // 77 | gulp.task('scripts-lint', function() { 78 | return gulp.src(source+'js/**/*.js') 79 | .pipe(plugins.jshint('.jshintrc')) 80 | .pipe(plugins.jshint.reporter('default')); 81 | }); 82 | 83 | // These are the core custom scripts loaded on every page; pass an array to bundle several scripts in order 84 | // 85 | gulp.task('scripts-core', function() { 86 | return gulp.src([ 87 | source+'js/core.js' 88 | //, source+'js/navigation.js' // An example of how to add files to a bundle 89 | ]) 90 | .pipe(plugins.concat('core.js')) 91 | .pipe(gulp.dest(build+'js/')); 92 | }); 93 | 94 | // An example task for extra scripts that aren't loaded on every page 95 | // 96 | gulp.task('scripts-extras', function() { 97 | return gulp.src([ 98 | // You can also add dependencies from Bower components e.g.: bower+'dependency/dependency.js', 99 | source+'js/extras.js' 100 | ]) 101 | .pipe(plugins.concat('extras.js')) 102 | .pipe(gulp.dest(build+'js/')); 103 | }); 104 | 105 | 106 | // =========================================================================== 107 | // Images 108 | // =========================================================================== 109 | 110 | // Copy images; minification occurs during packaging 111 | // 112 | gulp.task('images', function() { 113 | return gulp.src(source+'**/*(*.png|*.jpg|*.jpeg|*.gif)') 114 | .pipe(gulp.dest(build)); 115 | }); 116 | 117 | 118 | // =========================================================================== 119 | // Languages 120 | // =========================================================================== 121 | 122 | // Copy everything under `src/languages` indiscriminately 123 | // 124 | gulp.task('languages', function() { 125 | return gulp.src(source+lang+'**/*') 126 | .pipe(gulp.dest(build+lang)); 127 | }); 128 | 129 | 130 | // =========================================================================== 131 | // PHP 132 | // =========================================================================== 133 | 134 | // Copy PHP source files to the build directory 135 | // 136 | gulp.task('php', function() { 137 | return gulp.src(source+'**/*.php') 138 | .pipe(gulp.dest(build)); 139 | }); 140 | 141 | 142 | // =========================================================================== 143 | // Distribution 144 | // =========================================================================== 145 | 146 | // Prepare a distribution, the properly minified, uglified, and sanitized version of the theme ready for installation 147 | // 148 | 149 | // Clean out junk files after build 150 | // 151 | gulp.task('clean', ['build'], function(cb) { 152 | del([build+'**/.DS_Store'], cb) 153 | }); 154 | 155 | // Totally wipe the contents of the distribution folder after doing a clean build 156 | // 157 | gulp.task('dist-wipe', ['clean'], function(cb) { 158 | del([dist], cb) 159 | }); 160 | 161 | // Copy everything in the build folder (except previously minified stylesheets) to the `dist/project` folder 162 | // 163 | gulp.task('dist-copy', ['dist-wipe'], function() { 164 | return gulp.src([build+'**/*', '!'+build+'**/*.min.css']) 165 | .pipe(gulp.dest(dist)); 166 | }); 167 | 168 | // Minify stylesheets in place 169 | // 170 | gulp.task('dist-styles', ['dist-copy'], function() { 171 | return gulp.src([dist+'**/*.css', '!'+dist+'**/*.min.css']) 172 | .pipe(postcss([cssnano])) 173 | .pipe(gulp.dest(dist)); 174 | }); 175 | 176 | // Optimize images in place 177 | // 178 | // Use the line below if you wish to compress the styles to a single line. 179 | // gulp.task('dist-images', ['dist-styles'], function() { 180 | gulp.task('dist-images', ['dist-copy'], function() { 181 | return gulp.src([dist+'**/*.png', dist+'**/*.jpg', dist+'**/*.jpeg', dist+'**/*.gif', '!'+dist+'screenshot.png']) 182 | .pipe(plugins.imagemin({ 183 | optimizationLevel: 7 184 | , progressive: true 185 | , interlaced: true 186 | })) 187 | .pipe(gulp.dest(dist)); 188 | }); 189 | 190 | 191 | // =========================================================================== 192 | // Bower 193 | // =========================================================================== 194 | 195 | // Executed on `bower update` which is in turn triggered by `npm update`; use this to manually copy front-end dependencies into your working source folder 196 | // 197 | gulp.task('bower', ['bower-normalize']); 198 | 199 | // Used to get around Sass's inability to properly @import vanilla CSS 200 | // 201 | gulp.task('bower-normalize', function() { 202 | return gulp.src(bower+'normalize.css/normalize.css') 203 | .pipe(plugins.rename('_normalize.scss')) 204 | .pipe(gulp.dest(source+'scss/base')); 205 | }); 206 | 207 | 208 | // =========================================================================== 209 | // Tasks 210 | // =========================================================================== 211 | 212 | // Build styles and scripts; copy PHP files 213 | // 214 | gulp.task('build', ['styles', 'scripts', 'images', 'languages', 'php']); 215 | 216 | // Release creates a clean distribution package under `dist` after running build, clean, and wipe in sequence 217 | // 218 | gulp.task('dist', ['dist-images']); 219 | 220 | // Watch Task 221 | // 222 | gulp.task('watch', ['styles'], function(gulpCallback) { 223 | browserSync.init({ 224 | proxy: url 225 | }, function callback() { 226 | gulp.watch(source+'scss/**/*.scss', ['styles']); 227 | gulp.watch([source+'js/**/*.js', bower+'**/*.js'], ['scripts']); 228 | gulp.watch(source+'**/*(*.png|*.jpg|*.jpeg|*.gif)', ['images']); 229 | gulp.watch(source+'**/*.php', ['php']); 230 | gulpCallback(); 231 | }); 232 | }); 233 | 234 | // Default Task (Watch) 235 | // 236 | gulp.task('default', ['watch']); 237 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forward-framework", 3 | "version": "1.0.3", 4 | "description": "A killer WordPress theme framework built using underscores, gulp, sass, bourbon neat, bower & browsersync.", 5 | "homepage": "https://github.com/drawbackwards/Forward-Framework", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/drawbackwards/Forward-Framework.git" 9 | }, 10 | "keywords": [ 11 | "wordpress", 12 | "gulp", 13 | "bower", 14 | "sass" 15 | ], 16 | "scripts": { 17 | "postinstall": "bower install" 18 | }, 19 | "author": "Drawbackwards", 20 | "license": "GNU General Public Licence 2.0", 21 | "main": "index.js", 22 | "private": true, 23 | "devDependencies": { 24 | "autoprefixer": "^6.6.0", 25 | "browser-sync": "^2.18.5", 26 | "css-mqpacker": "^5.0.1", 27 | "cssnano": "^3.9.1", 28 | "del": "^0.1.3", 29 | "gulp": "^3.9.0", 30 | "gulp-cache": "^0.2.2", 31 | "gulp-concat": "^2.6.1", 32 | "gulp-imagemin": "^1.0.1", 33 | "gulp-jshint": "^1.8.4", 34 | "gulp-load-plugins": "^0.6.0", 35 | "gulp-postcss": "^6.1.1", 36 | "gulp-rename": "^1.2.2", 37 | "gulp-sass": "^2.3.2", 38 | "gulp-sourcemaps": "^1.9.1", 39 | "gulp-uglify": "^1.0.0", 40 | "perfectionist": "^2.3.0" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![forward-wordpress-starter-theme](https://cloud.githubusercontent.com/assets/1250818/8885259/dc5923d0-3212-11e5-9579-25d6731ba6ca.jpg) 2 | 3 | # Forward Framework 4 | 5 | A killer WordPress theme framework built using underscores, gulp, sass, bourbon, bourbon neat, bower & browsersync. This project is also available as a pre-compiled [WordPress starter theme](https://github.com/drawbackwards/Forward-WordPress-Starter-Theme/releases). 6 | 7 | #### Where Do I Put This? 8 | 9 | Clone/Fork/Download this project wherever you like and symlink `build/` to `wp-content/themes/[example-theme]`. 10 | 11 | __Note:__ Values `[inside-brackets]` can be changed. 12 | 13 | $ git clone git@github.com:drawbackwards/Forward-Framework.git ~/[Sites]/[forward-framework] 14 | 15 | $ cd ~/Sites/[example-wordpress-install]/wp-content/themes/ 16 | 17 | $ ln -s ~/Sites/forward-framework/build [example-theme] 18 | 19 | Your themes directory should now look like this: 20 | 21 | `- wp-content/ 22 | |- plugins/ 23 | `- themes/ 24 | |- example-theme -> ~/Sites/forward-framework/build 25 | `- twentyfifteen/ 26 | 27 | #### Modify Project Variables 28 | 29 | 1. Open `gulpfile.js` and modify the `project` and `url` variables accordingly. 30 | 2. __MAMP Users:__ Enable the port 8888 parameter for BrowserSync (Search for 'Port setting for MAMP users' in `gulpfile.js`). 31 | 32 | #### Install Gulp Globally 33 | 34 | $ npm install --global gulp 35 | 36 | #### Install Yarn (preferred over npm) 37 | 38 | # Using homebrew 39 | $ brew update 40 | $ brew install yarn 41 | 42 | # OR using npm 43 | $ npm install -g yarn 44 | 45 | For additional methods see the [yarn install page](https://yarnpkg.com/en/docs/install). 46 | 47 | #### Install Gulp Plugins / Dependencies 48 | 49 | $ cd ~/Sites/forward-framework/ 50 | $ yarn 51 | 52 | # OR use npm 53 | $ npm install 54 | 55 | #### Install Bower & Components 56 | 57 | $ npm install -g bower 58 | $ bower install 59 | 60 | #### Install sass 61 | 62 | Sass is a Ruby component (known as a gem). If you're a Mac user Ruby is already on your system but if you're developing 63 | on Linux or Windows you may have to install it. Once you've got Ruby you should be able to install sass from the 64 | command line (you may need to use `sudo`). 65 | 66 | $ gem install sass 67 | 68 | For troubleshooting see the [sass install page](http://sass-lang.com/install). 69 | 70 | #### Generate Theme Files 71 | 72 | This will generate the initial theme files in `build/`. 73 | 74 | $ gulp build 75 | 76 | #### Activate Theme & Create a Navigation Menu 77 | 78 | 1. Activate theme at `[localhost]/wp-admin/themes.php` 79 | 2. Create a new menu at `[localhost]/wp-admin/nav-menus.php` and assign to the _Primary Menu_ Theme location. 80 | 81 | ## Project Commands 82 | 83 | #### gulp build 84 | 85 | Running `gulp build` will generate/rebuild the `build/` directory without starting a watch process. 86 | 87 | $ gulp build 88 | 89 | #### gulp 90 | 91 | Running `gulp` or `gulp watch` will start the watch process & browser-sync. Changes to `src/` are written to `build/`. 92 | 93 | $ gulp 94 | 95 | #### gulp dist 96 | 97 | Running `gulp dist` will generate an optimized, production ready version of the theme based on `build/`. This will be the folder you deploy to production. 98 | 99 | $ gulp dist 100 | 101 | ## License 102 | 103 | * Licensed under the [GPLv3](http://www.gnu.org/licenses/gpl.txt). 104 | 105 | ## Credits 106 | 107 | * [Underscores](https://github.com/Automattic/_s) 108 | * [Alexander Synaptic](https://github.com/synapticism/wordpress-gulp-bower-sass) 109 | * [CSScomb](http://csscomb.com) 110 | * [Gulp](http://gulpjs.com) 111 | * [Sass](http://sass-lang.com) 112 | * [Bourbon](https://github.com/thoughtbot/bourbon) 113 | * [Bourbon Neat](http://neat.bourbon.io) 114 | * [Bower](http://bower.io) 115 | * [Browsersync](http://www.browsersync.io) 116 | * [Autoprefixer](https://github.com/postcss/autoprefixer-core) 117 | * [Normalize](https://necolas.github.io/normalize.css/) 118 | -------------------------------------------------------------------------------- /src/404.php: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 |
12 | 13 |
14 |
15 |

16 |
17 | 18 |
19 |

20 | 21 | 22 |
23 |
24 | 25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /src/archive.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 | 15 | 16 | 17 |
18 | ', '' ); 20 | the_archive_description( '
', '
' ); 21 | ?> 22 |
23 | 24 | 25 | 26 | 27 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 |
47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/comments.php: -------------------------------------------------------------------------------- 1 | 20 | 21 |
22 | 23 | 24 | 25 | 26 |

27 | ' . get_the_title() . '' ); 30 | ?> 31 |

32 | 33 |
    34 | 'ul', 37 | 'short_ping' => true, 38 | 'avatar_size' => 50, 39 | ) ); 40 | ?> 41 |
42 | 43 | 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?> 44 | 49 | 50 | 51 | 52 | 53 | 57 |

58 | 59 | 60 | 61 | 62 |
63 | -------------------------------------------------------------------------------- /src/content-none.php: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |
13 |

14 |
15 | 16 |
17 | 18 | 19 |

Get started here.', 'forward' ), esc_url( admin_url( 'post-new.php' ) ) ); ?>

20 | 21 | 22 | 23 |

24 | 25 | 26 | 27 | 28 |

29 | 30 | 31 | 32 |
33 |
34 | -------------------------------------------------------------------------------- /src/content-page.php: -------------------------------------------------------------------------------- 1 | 8 | 9 |
> 10 | 11 | 12 | 13 |
14 | ', '' ); ?> 15 |
16 | 17 |
18 | 19 | '
' . __( 'Pages:', 'forward' ), 22 | 'after' => '
', 23 | 'pagelink' => '%', 24 | ) ); 25 | ?> 26 |
27 | 28 |
29 | ', '' ); ?> 30 |
31 |
32 | -------------------------------------------------------------------------------- /src/content-search.php: -------------------------------------------------------------------------------- 1 | 10 | 11 | 30 | -------------------------------------------------------------------------------- /src/content-single.php: -------------------------------------------------------------------------------- 1 | 6 | 7 |
> 8 | 9 | 10 | 11 |
12 | ', '' ); ?> 13 | 14 |
15 | 16 |
17 |
18 | 19 |
20 | 21 | '
' . __( 'Pages:', 'forward' ), 24 | 'after' => '
', 25 | 'pagelink' => '%', 26 | ) ); 27 | ?> 28 |
29 | 30 |
31 | 32 |
33 | 34 |
35 | 36 |
37 | 38 |
39 | -------------------------------------------------------------------------------- /src/content.php: -------------------------------------------------------------------------------- 1 | 6 | 7 |
> 8 | 9 | 10 | 11 |
12 | ', esc_url( get_permalink() ) ), '' ); ?> 13 | 14 | 15 |
16 | 17 |
18 | 19 |
20 | 21 |
22 | "', '"', false ) 27 | ) ); 28 | ?> 29 | 30 | '
' . __( 'Pages:', 'forward' ), 33 | 'after' => '
', 34 | 'pagelink' => '%', 35 | ) ); 36 | ?> 37 |
38 | 39 |
40 | 41 |
42 |
-------------------------------------------------------------------------------- /src/footer.php: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | Design.org', 'Drawbackwards' ); ?> 18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/functions-sample.php: -------------------------------------------------------------------------------- 1 | section and everything up till
6 | * 7 | * @package Forward 8 | */ 9 | ?> 10 | > 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | > 21 |
22 | 23 | 24 | 40 | 41 |
42 |
43 | -------------------------------------------------------------------------------- /src/inc/conditionals.php: -------------------------------------------------------------------------------- 1 | 'ids', 13 | 'hide_empty' => 1, 14 | 15 | // We only need to know if there is more than one category. 16 | 'number' => 2, 17 | ) ); 18 | 19 | // Count the number of categories that are attached to the posts. 20 | $all_the_cool_cats = count( $all_the_cool_cats ); 21 | 22 | set_transient( 'forward_categories', $all_the_cool_cats ); 23 | } 24 | 25 | if ( $all_the_cool_cats > 1 ) { 26 | // This blog has more than 1 category so forward_categorized_blog should return true. 27 | return true; 28 | } else { 29 | // This blog has only 1 category so forward_categorized_blog should return false. 30 | return false; 31 | } 32 | } 33 | 34 | /** 35 | * Flush out the transients used in forward_categorized_blog. 36 | */ 37 | function forward_category_transient_flusher() { 38 | if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) { 39 | return; 40 | } 41 | // Like, beat it. Dig? 42 | delete_transient( 'forward_categories' ); 43 | } 44 | add_action( 'edit_category', 'forward_category_transient_flusher' ); 45 | add_action( 'save_post', 'forward_category_transient_flusher' ); 46 | -------------------------------------------------------------------------------- /src/inc/custom-header.php: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | * 15 | * @package Forward 16 | */ 17 | 18 | /** 19 | * Set up the WordPress core custom header feature. 20 | * 21 | * @uses forward_header_style() 22 | * @uses forward_admin_header_style() 23 | * @uses forward_admin_header_image() 24 | */ 25 | function forward_custom_header_setup() { 26 | add_theme_support( 'custom-header', apply_filters( 'forward_custom_header_args', array( 27 | 'default-image' => '', 28 | 'default-text-color' => '000000', 29 | 'width' => 1000, 30 | 'height' => 250, 31 | 'flex-height' => true, 32 | 'wp-head-callback' => 'forward_header_style', 33 | 'admin-head-callback' => 'forward_admin_header_style', 34 | 'admin-preview-callback' => 'forward_admin_header_image', 35 | ) ) ); 36 | } 37 | add_action( 'after_setup_theme', 'forward_custom_header_setup' ); 38 | 39 | if ( ! function_exists( 'forward_header_style' ) ) : 40 | /** 41 | * Styles the header image and text displayed on the blog 42 | * 43 | * @see forward_custom_header_setup(). 44 | */ 45 | function forward_header_style() { 46 | $header_text_color = get_header_textcolor(); 47 | 48 | // If no custom options for text are set, let's bail 49 | // get_header_textcolor() options: HEADER_TEXTCOLOR is default, hide text (returns 'blank') or any hex value 50 | if ( HEADER_TEXTCOLOR == $header_text_color ) { 51 | return; 52 | } 53 | 54 | // If we get this far, we have custom styles. Let's do this. 55 | ?> 56 | 76 | Header admin panel. 83 | * 84 | * @see forward_custom_header_setup(). 85 | */ 86 | function forward_admin_header_style() { 87 | ?> 88 | 104 | Header admin panel. 111 | * 112 | * @see forward_custom_header_setup(). 113 | */ 114 | function forward_admin_header_image() { 115 | $style = sprintf( ' style="color:#%s;"', get_header_textcolor() ); 116 | ?> 117 |
118 |

onclick="return false;" href="">

119 |
>
120 | 121 | 122 | 123 |
124 | get_setting( 'blogname' )->transport = 'postMessage'; 15 | $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; 16 | 17 | // Optionally disable individual customizer options. 18 | // 19 | // $wp_customize->remove_control('blogdescription'); 20 | 21 | // Optionally disable customizer sections. 22 | // 23 | $wp_customize->remove_section('background_image'); 24 | $wp_customize->remove_section('colors'); 25 | } 26 | add_action( 'customize_register', 'forward_customize_register' ); -------------------------------------------------------------------------------- /src/inc/extras.php: -------------------------------------------------------------------------------- 1 | tag based on what is being viewed. 29 | * 30 | * @param string $title Default title text for current view. 31 | * @param string $sep Optional separator. 32 | * @return string The filtered title. 33 | */ 34 | function forward_wp_title( $title, $sep ) { 35 | if ( is_feed() ) { 36 | return $title; 37 | } 38 | 39 | global $page, $paged; 40 | 41 | // Add the blog name 42 | $title .= get_bloginfo( 'name', 'display' ); 43 | 44 | // Add the blog description for the home/front page. 45 | $site_description = get_bloginfo( 'description', 'display' ); 46 | if ( $site_description && ( is_home() || is_front_page() ) ) { 47 | $title .= " $sep $site_description"; 48 | } 49 | 50 | // Add a page number if necessary: 51 | if ( ( $paged >= 2 || $page >= 2 ) && ! is_404() ) { 52 | $title .= " $sep " . sprintf( __( 'Page %s', 'forward' ), max( $paged, $page ) ); 53 | } 54 | 55 | return $title; 56 | } 57 | add_filter( 'wp_title', 'forward_wp_title', 10, 2 ); 58 | 59 | /** 60 | * Title shim for sites older than WordPress 4.1. 61 | * 62 | * @link https://make.wordpress.org/core/2014/10/29/title-tags-in-4-1/ 63 | * @todo Remove this function when WordPress 4.3 is released. 64 | */ 65 | function forward_render_title() { 66 | ?> 67 | <?php wp_title( '|', true, 'right' ); ?> 68 | 'Source+Sans+Pro:200,300,400,600', 11 | 12 | // Here's an example for changing fonts. 13 | // 14 | // 'family' => 'Open+Sans:400,700|Oswald:700', 15 | // 'subset' => 'latin,latin-ext', 16 | ); 17 | 18 | wp_register_style( 'source-sans', add_query_arg( $query_args, "//fonts.googleapis.com/css" ), array(), null ); 19 | 20 | wp_enqueue_style('source-sans'); 21 | } 22 | endif; // forward_google_fonts 23 | add_action('wp_enqueue_scripts', 'forward_google_fonts'); 24 | -------------------------------------------------------------------------------- /src/inc/init.php: -------------------------------------------------------------------------------- 1 | tag in the document head, and expect WordPress to 28 | * provide it for us. 29 | */ 30 | add_theme_support( 'title-tag' ); 31 | 32 | /* 33 | * Enable support for Post Thumbnails on posts and pages. 34 | * 35 | * @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails 36 | */ 37 | add_theme_support( 'post-thumbnails' ); 38 | 39 | // This theme uses wp_nav_menu() in one location. 40 | register_nav_menus( array( 41 | 'primary' => __( 'Primary Menu', 'forward' ), 42 | ) ); 43 | 44 | /* 45 | * Switch default core markup for search form, comment form, and comments 46 | * to output valid HTML5. 47 | */ 48 | add_theme_support( 'html5', array( 49 | 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption', 50 | ) ); 51 | 52 | /* 53 | * Enable support for Post Formats. 54 | * See http://codex.wordpress.org/Post_Formats 55 | */ 56 | add_theme_support( 'post-formats', array( 57 | 'aside', 'image', 'video', 'quote', 'link', 58 | ) ); 59 | 60 | // Set up the WordPress core custom background feature. 61 | add_theme_support( 'custom-background', apply_filters( 'forward_custom_background_args', array( 62 | 'default-color' => 'ffffff', 63 | 'default-image' => '', 64 | ) ) ); 65 | } 66 | endif; // forward_setup 67 | add_action( 'after_setup_theme', 'forward_setup' ); 68 | -------------------------------------------------------------------------------- /src/inc/jetpack.php: -------------------------------------------------------------------------------- 1 | 'main', 16 | 'footer' => 'page', 17 | ) ); 18 | } 19 | add_action( 'after_setup_theme', 'forward_jetpack_setup' ); 20 | -------------------------------------------------------------------------------- /src/inc/template-tags.php: -------------------------------------------------------------------------------- 1 | ' . get_the_author() . '' ); 21 | } elseif ( is_year() ) { 22 | $title = sprintf( __( 'Year: %s', 'forward' ), get_the_date( _x( 'Y', 'yearly archives date format', 'forward' ) ) ); 23 | } elseif ( is_month() ) { 24 | $title = sprintf( __( 'Month: %s', 'forward' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'forward' ) ) ); 25 | } elseif ( is_day() ) { 26 | $title = sprintf( __( 'Day: %s', 'forward' ), get_the_date( _x( 'F j, Y', 'daily archives date format', 'forward' ) ) ); 27 | } elseif ( is_tax( 'post_format' ) ) { 28 | if ( is_tax( 'post_format', 'post-format-aside' ) ) { 29 | $title = _x( 'Asides', 'post format archive title', 'forward' ); 30 | } elseif ( is_tax( 'post_format', 'post-format-gallery' ) ) { 31 | $title = _x( 'Galleries', 'post format archive title', 'forward' ); 32 | } elseif ( is_tax( 'post_format', 'post-format-image' ) ) { 33 | $title = _x( 'Images', 'post format archive title', 'forward' ); 34 | } elseif ( is_tax( 'post_format', 'post-format-video' ) ) { 35 | $title = _x( 'Videos', 'post format archive title', 'forward' ); 36 | } elseif ( is_tax( 'post_format', 'post-format-quote' ) ) { 37 | $title = _x( 'Quotes', 'post format archive title', 'forward' ); 38 | } elseif ( is_tax( 'post_format', 'post-format-link' ) ) { 39 | $title = _x( 'Links', 'post format archive title', 'forward' ); 40 | } elseif ( is_tax( 'post_format', 'post-format-status' ) ) { 41 | $title = _x( 'Statuses', 'post format archive title', 'forward' ); 42 | } elseif ( is_tax( 'post_format', 'post-format-audio' ) ) { 43 | $title = _x( 'Audio', 'post format archive title', 'forward' ); 44 | } elseif ( is_tax( 'post_format', 'post-format-chat' ) ) { 45 | $title = _x( 'Chats', 'post format archive title', 'forward' ); 46 | } 47 | } elseif ( is_post_type_archive() ) { 48 | $title = sprintf( __( 'Archives: %s', 'forward' ), post_type_archive_title( '', false ) ); 49 | } elseif ( is_tax() ) { 50 | $tax = get_taxonomy( get_queried_object()->taxonomy ); 51 | /* translators: 1: Taxonomy singular name, 2: Current taxonomy term */ 52 | $title = sprintf( __( '%1$s: %2$s', 'forward' ), $tax->labels->singular_name, single_term_title( '', false ) ); 53 | } else { 54 | $title = __( 'Archives', 'forward' ); 55 | } 56 | 57 | /** 58 | * Filter the archive title. 59 | * 60 | * @param string $title Archive title to be displayed. 61 | */ 62 | $title = apply_filters( 'get_the_archive_title', $title ); 63 | 64 | if ( ! empty( $title ) ) { 65 | echo $before . $title . $after; 66 | } 67 | } 68 | endif; 69 | -------------------------------------------------------------------------------- /src/inc/template-tags/entry-footer.php: -------------------------------------------------------------------------------- 1 | ' . __( 'Posted in %1$s', 'forward' ) . '', $categories_list ); 14 | } 15 | 16 | /* translators: used between list items, there is a space after the comma */ 17 | $tags_list = get_the_tag_list( '', __( ', ', 'forward' ) ); 18 | if ( $tags_list ) { 19 | printf( '' . __( 'Tagged %1$s', 'forward' ) . '', $tags_list ); 20 | } 21 | } 22 | 23 | if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) { 24 | echo ''; 25 | comments_popup_link( __( 'Leave a comment', 'forward' ), __( '1 Comment', 'forward' ), __( '% Comments', 'forward' ) ); 26 | echo ''; 27 | } 28 | 29 | edit_post_link( __( 'Edit', 'forward' ), '', '' ); 30 | } 31 | endif; 32 | -------------------------------------------------------------------------------- /src/inc/template-tags/featured-image.php: -------------------------------------------------------------------------------- 1 | 10 |
11 | 12 |
13 | post_parent ) : get_adjacent_post( false, '', true ); 10 | $next = get_adjacent_post( false, '', false ); 11 | 12 | if ( ! $next && ! $previous ) { 13 | return; 14 | } 15 | ?> 16 |
24 | 25 | %2$s'; 9 | if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) { 10 | $time_string = ''; 11 | // Optionally include the updated timestamp below. 12 | // $time_string .= ''; 13 | } 14 | 15 | $time_string = sprintf( $time_string, 16 | esc_attr( get_the_date( 'c' ) ), 17 | esc_html( get_the_date() ), 18 | esc_attr( get_the_modified_date( 'c' ) ), 19 | esc_html( get_the_modified_date() ) 20 | ); 21 | 22 | $posted_on = sprintf( 23 | _x( 'Posted on %s', 'post date', 'forward' ), 24 | '' . $time_string . '' 25 | ); 26 | 27 | $byline = sprintf( 28 | _x( 'by %s', 'post author', 'forward' ), 29 | '' . esc_html( get_the_author() ) . '' 30 | ); 31 | 32 | echo '' . $posted_on . ' ' . $byline . ''; 33 | 34 | } 35 | endif; 36 | -------------------------------------------------------------------------------- /src/inc/template-tags/posts-navigation.php: -------------------------------------------------------------------------------- 1 | max_num_pages < 2 ) { 12 | return; 13 | } 14 | ?> 15 | 29 | 10 | 15 | __( 'Sidebar', 'forward' ), 12 | 'id' => 'sidebar-1', 13 | 'description' => '', 14 | 'before_widget' => '', 16 | 'before_title' => '

', 17 | 'after_title' => '

', 18 | ) ); 19 | } 20 | endif; // forward_widgets_init 21 | add_action( 'widgets_init', 'forward_widgets_init' ); 22 | -------------------------------------------------------------------------------- /src/index.php: -------------------------------------------------------------------------------- 1 | 15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |
43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /src/js/core.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | 3 | // Resize mobile menu to 4 | function setMobileMenuHeight() { 5 | var headerHeight = $('#masthead').outerHeight(); 6 | var windowHeight = window.innerHeight; 7 | var menuOffset = headerHeight; 8 | var menuHeight = windowHeight - menuOffset; 9 | 10 | $("#site-navigation").css("height", menuHeight); 11 | // .css("top", menuOffset); 12 | } 13 | 14 | $(document).ready(function() { 15 | 16 | // Show mobile menu 17 | $('#mobile-menu-switch .toggle').click(function(event) { 18 | event.stopPropagation(); 19 | $(this).toggleClass('on'); 20 | $('#site-navigation').toggle(); 21 | setMobileMenuHeight(); 22 | event.preventDefault(); 23 | }); 24 | 25 | // Open social sharing links in new window 26 | $('#social-sharing a').click(function(event) { 27 | window.open(this.href, '', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0'); 28 | event.preventDefault(); 29 | }); 30 | 31 | }); 32 | 33 | $(window).resize(function() { 34 | setMobileMenuHeight(); 35 | }); 36 | 37 | })(jQuery); 38 | -------------------------------------------------------------------------------- /src/js/extras.js: -------------------------------------------------------------------------------- 1 | /* Plugins */ 2 | -------------------------------------------------------------------------------- /src/languages/forward.pot: -------------------------------------------------------------------------------- 1 | # Copyright (C) 2015 Design.org 2 | # This file is distributed under the GNU General Public License v2 or later. 3 | msgid "" 4 | msgstr "" 5 | "Project-Id-Version: Forward 1.0.3\n" 6 | "Report-Msgid-Bugs-To: http://wordpress.org/support/theme/build\n" 7 | "POT-Creation-Date: 2015-07-27 23:58:08+00:00\n" 8 | "MIME-Version: 1.0\n" 9 | "Content-Type: text/plain; charset=UTF-8\n" 10 | "Content-Transfer-Encoding: 8bit\n" 11 | "PO-Revision-Date: 2015-MO-DA HO:MI+ZONE\n" 12 | "Last-Translator: FULL NAME \n" 13 | "Language-Team: LANGUAGE \n" 14 | 15 | #: 404.php:15 16 | msgid "404" 17 | msgstr "" 18 | 19 | #: 404.php:19 20 | msgid "The page requested could not be found." 21 | msgstr "" 22 | 23 | #: comments.php:28 24 | msgctxt "comments title" 25 | msgid "One thought on “%2$s”" 26 | msgid_plural "%1$s thoughts on “%2$s”" 27 | msgstr[0] "" 28 | msgstr[1] "" 29 | 30 | #: comments.php:45 31 | msgid "Comment navigation" 32 | msgstr "" 33 | 34 | #: comments.php:46 35 | msgid "Older Comments" 36 | msgstr "" 37 | 38 | #: comments.php:47 39 | msgid "Newer Comments" 40 | msgstr "" 41 | 42 | #: comments.php:57 43 | msgid "Comments are closed." 44 | msgstr "" 45 | 46 | #: content-none.php:13 47 | msgid "Nothing Found" 48 | msgstr "" 49 | 50 | #: content-none.php:19 51 | msgid "" 52 | "Ready to publish your first post? Get started here." 53 | msgstr "" 54 | 55 | #: content-none.php:23 56 | msgid "" 57 | "Sorry, but nothing matched your search terms. Please try again with some " 58 | "different keywords." 59 | msgstr "" 60 | 61 | #: content-none.php:28 62 | msgid "" 63 | "It seems we can’t find what you’re looking for. Perhaps " 64 | "searching can help." 65 | msgstr "" 66 | 67 | #: content-page.php:21 content-single.php:23 content.php:32 68 | msgid "Pages:" 69 | msgstr "" 70 | 71 | #: content-page.php:29 inc/template-tags.php:157 72 | msgid "Edit" 73 | msgstr "" 74 | 75 | #. translators: %s: Name of current post 76 | #: content.php:25 77 | msgid "Continue Reading %s" 78 | msgstr "" 79 | 80 | #: footer.php:17 81 | msgid "Forward by %1$s — A %2$s Project." 82 | msgstr "" 83 | 84 | #: functions.php:77 85 | msgid "Primary Menu" 86 | msgstr "" 87 | 88 | #: functions.php:114 89 | msgid "Sidebar" 90 | msgstr "" 91 | 92 | #: header.php:22 93 | msgid "Skip to content" 94 | msgstr "" 95 | 96 | #: inc/extras.php:52 97 | msgid "Page %s" 98 | msgstr "" 99 | 100 | #: inc/template-tags.php:54 101 | msgid "Posts navigation" 102 | msgstr "" 103 | 104 | #: inc/template-tags.php:58 105 | msgid "Older Posts" 106 | msgstr "" 107 | 108 | #: inc/template-tags.php:62 109 | msgid "Newer Posts" 110 | msgstr "" 111 | 112 | #: inc/template-tags.php:85 113 | msgid "Post navigation" 114 | msgstr "" 115 | 116 | #: inc/template-tags.php:117 117 | msgctxt "post date" 118 | msgid "Posted on %s" 119 | msgstr "" 120 | 121 | #: inc/template-tags.php:122 122 | msgctxt "post author" 123 | msgid "by %s" 124 | msgstr "" 125 | 126 | #. translators: used between list items, there is a space after the comma 127 | #: inc/template-tags.php:139 inc/template-tags.php:145 128 | msgid ", " 129 | msgstr "" 130 | 131 | #: inc/template-tags.php:141 132 | msgid "Posted in %1$s" 133 | msgstr "" 134 | 135 | #: inc/template-tags.php:147 136 | msgid "Tagged %1$s" 137 | msgstr "" 138 | 139 | #: inc/template-tags.php:153 140 | msgid "Leave a comment" 141 | msgstr "" 142 | 143 | #: inc/template-tags.php:153 144 | msgid "1 Comment" 145 | msgstr "" 146 | 147 | #: inc/template-tags.php:153 148 | msgid "% Comments" 149 | msgstr "" 150 | 151 | #: inc/template-tags.php:174 152 | msgid "Category: %s" 153 | msgstr "" 154 | 155 | #: inc/template-tags.php:176 156 | msgid "Tag: %s" 157 | msgstr "" 158 | 159 | #: inc/template-tags.php:178 160 | msgid "Author: %s" 161 | msgstr "" 162 | 163 | #: inc/template-tags.php:180 164 | msgid "Year: %s" 165 | msgstr "" 166 | 167 | #: inc/template-tags.php:180 168 | msgctxt "yearly archives date format" 169 | msgid "Y" 170 | msgstr "" 171 | 172 | #: inc/template-tags.php:182 173 | msgid "Month: %s" 174 | msgstr "" 175 | 176 | #: inc/template-tags.php:182 177 | msgctxt "monthly archives date format" 178 | msgid "F Y" 179 | msgstr "" 180 | 181 | #: inc/template-tags.php:184 182 | msgid "Day: %s" 183 | msgstr "" 184 | 185 | #: inc/template-tags.php:184 186 | msgctxt "daily archives date format" 187 | msgid "F j, Y" 188 | msgstr "" 189 | 190 | #: inc/template-tags.php:187 191 | msgctxt "post format archive title" 192 | msgid "Asides" 193 | msgstr "" 194 | 195 | #: inc/template-tags.php:189 196 | msgctxt "post format archive title" 197 | msgid "Galleries" 198 | msgstr "" 199 | 200 | #: inc/template-tags.php:191 201 | msgctxt "post format archive title" 202 | msgid "Images" 203 | msgstr "" 204 | 205 | #: inc/template-tags.php:193 206 | msgctxt "post format archive title" 207 | msgid "Videos" 208 | msgstr "" 209 | 210 | #: inc/template-tags.php:195 211 | msgctxt "post format archive title" 212 | msgid "Quotes" 213 | msgstr "" 214 | 215 | #: inc/template-tags.php:197 216 | msgctxt "post format archive title" 217 | msgid "Links" 218 | msgstr "" 219 | 220 | #: inc/template-tags.php:199 221 | msgctxt "post format archive title" 222 | msgid "Statuses" 223 | msgstr "" 224 | 225 | #: inc/template-tags.php:201 226 | msgctxt "post format archive title" 227 | msgid "Audio" 228 | msgstr "" 229 | 230 | #: inc/template-tags.php:203 231 | msgctxt "post format archive title" 232 | msgid "Chats" 233 | msgstr "" 234 | 235 | #: inc/template-tags.php:206 236 | msgid "Archives: %s" 237 | msgstr "" 238 | 239 | #. translators: 1: Taxonomy singular name, 2: Current taxonomy term 240 | #: inc/template-tags.php:210 241 | msgid "%1$s: %2$s" 242 | msgstr "" 243 | 244 | #: inc/template-tags.php:212 245 | msgid "Archives" 246 | msgstr "" 247 | 248 | #: search.php:16 249 | msgid "Search Results for: %s" 250 | msgstr "" 251 | 252 | #. Theme Name of the plugin/theme 253 | msgid "Forward" 254 | msgstr "" 255 | 256 | #. Theme URI of the plugin/theme 257 | msgid "http://design.org/wordpress-starter-theme/" 258 | msgstr "" 259 | 260 | #. Description of the plugin/theme 261 | msgid "" 262 | "A modern WordPress starter theme built for designers. Many themes try to do " 263 | "everything, Forward doesn't. Meet a lightweight, WordPress starter theme " 264 | "that gives you a quality jump-start on your next project." 265 | msgstr "" 266 | 267 | #. Author of the plugin/theme 268 | msgid "Design.org" 269 | msgstr "" 270 | 271 | #. Author URI of the plugin/theme 272 | msgid "http://design.org" 273 | msgstr "" 274 | 275 | #. Template Name of the plugin/theme 276 | msgid "Full Width" 277 | msgstr "" 278 | -------------------------------------------------------------------------------- /src/languages/readme.md: -------------------------------------------------------------------------------- 1 | Place your theme language files in this directory. 2 | 3 | Please visit the following links to learn more about translating WordPress themes: 4 | 5 | http://codex.wordpress.org/WordPress_in_Your_Language 6 | https://make.wordpress.org/docs/theme-developer-handbook/part-two-theme-functionality/localization/ 7 | http://codex.wordpress.org/Function_Reference/load_theme_textdomain 8 | -------------------------------------------------------------------------------- /src/languages/readme.txt: -------------------------------------------------------------------------------- 1 | Place your theme language files in this directory. 2 | 3 | Please visit the following links to learn more about translating WordPress themes: 4 | 5 | http://codex.wordpress.org/WordPress_in_Your_Language 6 | https://make.wordpress.org/docs/theme-developer-handbook/part-two-theme-functionality/localization/ 7 | http://codex.wordpress.org/Function_Reference/load_theme_textdomain 8 | -------------------------------------------------------------------------------- /src/page.php: -------------------------------------------------------------------------------- 1 | 14 | 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | 28 | 29 | 30 | 31 |
32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /src/readme.txt: -------------------------------------------------------------------------------- 1 | === Forward === 2 | Contributors: Drawbackwards 3 | Tags: black, blue, gray, white, light, two-columns, left-sidebar, responsive-layout, custom-menu, editor-style, featured-images, microformats, post-formats, sticky-post, threaded-comments, translation-ready 4 | Requires at least: 4.0 5 | Tested up to: 4.3.1 6 | Stable tag: 1.0.3 7 | License: GPLv2 or later 8 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 9 | 10 | == Description == 11 | 12 | A modern WordPress starter theme built for designers. Many themes try to do everything, Forward doesn't. Meet a lightweight, WordPress starter theme that gives you a quality jump-start on your next project. 13 | 14 | == Setup == 15 | 16 | 1. Install and activate Forward. 17 | 2. Create a new menu and assign to the 'Primary Menu' theme location. 18 | 19 | == Frequently Asked Questions == 20 | 21 | = How do I change custom web fonts? = 22 | 23 | Custom web fonts are enqueued using https://www.google.com/fonts 24 | 25 | 1. Open functions.php 26 | 2. Search for forward_google_fonts() 27 | 3. Modify $query_args 28 | 29 | == Credits == 30 | 31 | * Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc., [GPLv2 or later](https://www.gnu.org/licenses/gpl-2.0.html) 32 | * SIL Open Font License, 1.1: http://scripts.sil.org/OFL - SourceSansPro: Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. 33 | * CSScomb http://csscomb.com 34 | * Gulp http://gulpjs.com 35 | * Sass http://sass-lang.com 36 | * Bourbon https://github.com/thoughtbot/bourbon 37 | * Bourbon Neat http://neat.bourbon.io 38 | * Bower http://bower.io 39 | * Browsersync http://www.browsersync.io 40 | * CSSmin https://www.npmjs.com/package/gulp-cssmin 41 | * Autoprefixer https://github.com/postcss/autoprefixer-core 42 | * Combine Media Queries https://www.npmjs.com/package/gulp-combine-media-queries 43 | * Pixrem https://www.npmjs.com/package/gulp-pixrem 44 | * Normalize https://necolas.github.io/normalize.css/ 45 | -------------------------------------------------------------------------------- /src/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/drawbackwards/Forward-Framework/74432a61d3d9ac4fbc31e47bd5d7d7c50e5ac6f4/src/screenshot.png -------------------------------------------------------------------------------- /src/scss/base/_fix.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // 3 | // Simple Reset 4 | // - Adapted from Fix v0.1.1: https://github.com/jaydenseric/Fix 5 | // 6 | // =========================================================================== 7 | 8 | 9 | html { 10 | box-sizing: border-box; 11 | 12 | -ms-text-size-adjust: 100%; 13 | -webkit-text-size-adjust: 100%; 14 | // -webkit-font-smoothing: antialiased; 15 | // -moz-osx-font-smoothing: grayscale; 16 | -webkit-tap-highlight-color: transparent; 17 | } 18 | *, 19 | *:before, 20 | *:after { 21 | box-sizing: inherit; 22 | } 23 | body { 24 | font-family: sans-serif; 25 | line-height: 1; 26 | 27 | margin: 0; 28 | } 29 | iframe { 30 | border: 0; 31 | } 32 | main { 33 | display: block; 34 | } 35 | ul, 36 | ol { 37 | margin-top: 0; 38 | margin-bottom: 0; 39 | padding-left: 0; 40 | } 41 | li { 42 | } 43 | dl { 44 | margin-top: 0; 45 | margin-bottom: 0; 46 | } 47 | dd { 48 | margin-left: 0; 49 | } 50 | h1, 51 | h2, 52 | h3, 53 | h4, 54 | h5, 55 | h6 { 56 | font-size: inherit; 57 | font-weight: inherit; 58 | 59 | margin-top: 0; 60 | margin-bottom: 0; 61 | } 62 | blockquote { 63 | margin: 0; 64 | padding: 0; 65 | } 66 | p { 67 | margin-top: 0; 68 | margin-bottom: 0; 69 | } 70 | sup { 71 | font-size: 75%; 72 | line-height: 0; 73 | 74 | position: relative; 75 | top: -.5em; 76 | 77 | vertical-align: baseline; 78 | } 79 | strong { 80 | font-weight: bold; 81 | } 82 | figure { 83 | margin: 0; 84 | } 85 | img { 86 | max-width: 100%; 87 | height: auto; 88 | 89 | vertical-align: middle; 90 | 91 | border: 0; 92 | } 93 | a { 94 | text-decoration: none; 95 | 96 | color: inherit; 97 | } 98 | button { 99 | font: inherit; 100 | 101 | overflow: visible; 102 | 103 | margin: 0; 104 | padding: 0; 105 | 106 | cursor: pointer; 107 | text-align: inherit; 108 | letter-spacing: inherit; 109 | text-transform: inherit; 110 | 111 | border: 0; 112 | background: none; 113 | 114 | -webkit-font-smoothing: inherit; 115 | } 116 | ::-moz-focus-inner { 117 | padding: 0; 118 | 119 | border: 0; 120 | } 121 | // https://codepen.io/absolutholz/post/fieldset-reset 122 | legend { 123 | display: table; 124 | float: left; 125 | 126 | width: 100%; 127 | margin: 0; 128 | padding: 0; 129 | 130 | + * { 131 | clear: both; 132 | } 133 | } 134 | 135 | fieldset { 136 | min-width: 0; 137 | margin: 0; 138 | padding: .01em 0 0 0; 139 | 140 | border: 0; 141 | } 142 | 143 | body:not(:-moz-handler-blocked) fieldset { 144 | display: table-cell; 145 | } 146 | 147 | table { 148 | border-collapse: collapse; 149 | } 150 | -------------------------------------------------------------------------------- /src/scss/base/_grid.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Grid Settings 4 | // 5 | // =========================================================================== 6 | 7 | $max-width: 68em; 8 | $gutter: golden-ratio(1.25em, 1); 9 | 10 | // Breakpoints 11 | $tablet: new-breakpoint(max-width 768px 4); 12 | $mobile: new-breakpoint(max-width 480px 2); 13 | $desktop: new-breakpoint(min-width 769px 12); 14 | -------------------------------------------------------------------------------- /src/scss/base/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS and IE text size adjust after device orientation change, 6 | * without disabling user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability of focused elements when they are also in an 95 | * active/hover state. 96 | */ 97 | 98 | a:active, 99 | a:hover { 100 | outline: 0; 101 | } 102 | 103 | /* Text-level semantics 104 | ========================================================================== */ 105 | 106 | /** 107 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 108 | */ 109 | 110 | abbr[title] { 111 | border-bottom: 1px dotted; 112 | } 113 | 114 | /** 115 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 116 | */ 117 | 118 | b, 119 | strong { 120 | font-weight: bold; 121 | } 122 | 123 | /** 124 | * Address styling not present in Safari and Chrome. 125 | */ 126 | 127 | dfn { 128 | font-style: italic; 129 | } 130 | 131 | /** 132 | * Address variable `h1` font-size and margin within `section` and `article` 133 | * contexts in Firefox 4+, Safari, and Chrome. 134 | */ 135 | 136 | h1 { 137 | font-size: 2em; 138 | margin: 0.67em 0; 139 | } 140 | 141 | /** 142 | * Address styling not present in IE 8/9. 143 | */ 144 | 145 | mark { 146 | background: #ff0; 147 | color: #000; 148 | } 149 | 150 | /** 151 | * Address inconsistent and variable font size in all browsers. 152 | */ 153 | 154 | small { 155 | font-size: 80%; 156 | } 157 | 158 | /** 159 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 160 | */ 161 | 162 | sub, 163 | sup { 164 | font-size: 75%; 165 | line-height: 0; 166 | position: relative; 167 | vertical-align: baseline; 168 | } 169 | 170 | sup { 171 | top: -0.5em; 172 | } 173 | 174 | sub { 175 | bottom: -0.25em; 176 | } 177 | 178 | /* Embedded content 179 | ========================================================================== */ 180 | 181 | /** 182 | * Remove border when inside `a` element in IE 8/9/10. 183 | */ 184 | 185 | img { 186 | border: 0; 187 | } 188 | 189 | /** 190 | * Correct overflow not hidden in IE 9/10/11. 191 | */ 192 | 193 | svg:not(:root) { 194 | overflow: hidden; 195 | } 196 | 197 | /* Grouping content 198 | ========================================================================== */ 199 | 200 | /** 201 | * Address margin not present in IE 8/9 and Safari. 202 | */ 203 | 204 | figure { 205 | margin: 1em 40px; 206 | } 207 | 208 | /** 209 | * Address differences between Firefox and other browsers. 210 | */ 211 | 212 | hr { 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 354 | */ 355 | 356 | input[type="search"] { 357 | -webkit-appearance: textfield; /* 1 */ 358 | box-sizing: content-box; /* 2 */ 359 | } 360 | 361 | /** 362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 363 | * Safari (but not Chrome) clips the cancel button when the search input has 364 | * padding (and `textfield` appearance). 365 | */ 366 | 367 | input[type="search"]::-webkit-search-cancel-button, 368 | input[type="search"]::-webkit-search-decoration { 369 | -webkit-appearance: none; 370 | } 371 | 372 | /** 373 | * Define consistent border, margin, and padding. 374 | */ 375 | 376 | fieldset { 377 | border: 1px solid #c0c0c0; 378 | margin: 0 2px; 379 | padding: 0.35em 0.625em 0.75em; 380 | } 381 | 382 | /** 383 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 385 | */ 386 | 387 | legend { 388 | border: 0; /* 1 */ 389 | padding: 0; /* 2 */ 390 | } 391 | 392 | /** 393 | * Remove default vertical scrollbar in IE 8/9/10/11. 394 | */ 395 | 396 | textarea { 397 | overflow: auto; 398 | } 399 | 400 | /** 401 | * Don't inherit the `font-weight` (applied by a rule above). 402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 403 | */ 404 | 405 | optgroup { 406 | font-weight: bold; 407 | } 408 | 409 | /* Tables 410 | ========================================================================== */ 411 | 412 | /** 413 | * Remove most spacing between table cells. 414 | */ 415 | 416 | table { 417 | border-collapse: collapse; 418 | border-spacing: 0; 419 | } 420 | 421 | td, 422 | th { 423 | padding: 0; 424 | } 425 | -------------------------------------------------------------------------------- /src/scss/base/_reset.scss: -------------------------------------------------------------------------------- 1 | // ==== RESET ==== // 2 | 3 | // Eric Meyer reset 4 | @import "meyer-reset/stylesheets/meyer-reset"; 5 | -------------------------------------------------------------------------------- /src/scss/base/_wp-header.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // WordPress Style Header 4 | // 5 | // =========================================================================== 6 | 7 | /*! 8 | Theme Name: Forward 9 | Theme URI: http://design.org/wordpress-starter-theme/ 10 | Author: Design.org 11 | Author URI: http://design.org 12 | Description: A modern WordPress starter theme built for designers. Many themes try to do everything, Forward doesn't. Meet a lightweight, WordPress starter theme that gives you a quality jump-start on your next project. 13 | Version: 1.0.3 14 | Text Domain: forward 15 | Tags: black, blue, gray, white, light, two-columns, left-sidebar, responsive-layout, custom-menu, editor-style, featured-images, microformats, post-formats, sticky-post, threaded-comments, translation-ready 16 | 17 | License: GNU General Public License v2 or later 18 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 19 | */ 20 | -------------------------------------------------------------------------------- /src/scss/components/_comments.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Comments 4 | // 5 | // =========================================================================== 6 | 7 | .comments-title { 8 | @include type-style-h2; 9 | 10 | margin-bottom: ms(2); 11 | } 12 | 13 | .comment-body { 14 | @include row; 15 | @include media($mobile) { 16 | margin-bottom: unit(1); 17 | padding-bottom: unit(1); 18 | padding-left: 0; 19 | } 20 | 21 | margin-bottom: unit(2); 22 | padding-bottom: unit(2); 23 | padding-left: 65px; 24 | .comment-meta { 25 | margin-bottom: ms(-4); 26 | .comment-author { 27 | @include position(relative, 0 0 0 0 ); 28 | 29 | display: inline; 30 | } 31 | .comment-metadata { 32 | @include type-style-small; 33 | 34 | display: inline; 35 | 36 | margin-left: ms(-2); 37 | a { 38 | color: $hex-light-grey; 39 | } 40 | } 41 | .avatar { 42 | @include position(absolute, 0px 0 0 -65px ); 43 | @include media($mobile) { 44 | display: none; 45 | } 46 | 47 | border-radius: 50%; 48 | } 49 | .says { 50 | display: none; 51 | } 52 | } 53 | .comment-content { 54 | p { 55 | margin-bottom: ms(-4); 56 | } 57 | } 58 | .reply { 59 | @include type-style-small; 60 | 61 | padding-top: ms(-4); 62 | a { 63 | color: $hex-light-grey; 64 | } 65 | } 66 | } 67 | 68 | .comment-form-comment { 69 | margin-bottom: 0; 70 | } 71 | 72 | .comment-list { 73 | @include media($tablet) { 74 | margin-bottom: unit(1); 75 | padding-bottom: unit(0); 76 | } 77 | @include zero-left; 78 | 79 | margin-bottom: unit(2); 80 | padding-bottom: unit(1); 81 | 82 | list-style: none; 83 | li.comment { 84 | @include zero-left; 85 | @include no-bullet; 86 | } 87 | .children { 88 | @include media($mobile) { 89 | @include zero-left; 90 | } 91 | } 92 | } 93 | 94 | .form-allowed-tags { 95 | @include type-style-small; 96 | // You might just want to hide this 97 | // display: none; 98 | 99 | margin-bottom: ms(0); 100 | code { 101 | } 102 | } 103 | 104 | .comment-reply-title, 105 | .comments-title { 106 | @include type-style-h2; 107 | small { 108 | @include type-style-small; 109 | @include font-weight(light); 110 | 111 | float: right; 112 | 113 | margin-top: 10px; 114 | 115 | text-transform: capitalize; 116 | a { 117 | color: $hex-light-grey; 118 | } 119 | } 120 | } 121 | 122 | .comment-notes { 123 | @include type-style-small; 124 | 125 | margin-bottom: unit(2); 126 | } 127 | 128 | .comment-respond { 129 | @include media($mobile) { 130 | margin-bottom: unit(1); 131 | padding-bottom: unit(1); 132 | } 133 | 134 | margin-bottom: unit(2); 135 | padding-bottom: unit(2); 136 | // border-bottom: 1px solid $hex-border; 137 | .submit { 138 | @include media($mobile) { 139 | width: 100%; 140 | } 141 | 142 | margin-bottom: 0; 143 | } 144 | } 145 | 146 | // Pingbacks 147 | // 148 | .pingback { 149 | .comment-body { 150 | margin-bottom: unit(1); 151 | padding-bottom: unit(1); 152 | padding-left: 0; 153 | } 154 | + .comment .comment-body { 155 | @include media($mobile) { 156 | margin-top: unit(1); 157 | } 158 | 159 | margin-top: unit(2); 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /src/scss/components/_footer.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Footer 4 | // 5 | // =========================================================================== 6 | 7 | .site-footer { 8 | @include media($tablet) { 9 | padding-top: unit(2); 10 | padding-bottom: unit(2); 11 | } 12 | 13 | padding-top: unit(4); 14 | padding-bottom: unit(4); 15 | 16 | border-top: 1px solid $hex-border; 17 | .site-info { 18 | @include type-style-small; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/components/_forms.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Forms 4 | // 5 | // =========================================================================== 6 | 7 | label { 8 | .content-area & { 9 | @include type-style-h5; 10 | 11 | display: block; 12 | 13 | margin-bottom: .5em; 14 | } 15 | } 16 | 17 | %input-defaults { 18 | margin-top: ms(-4); 19 | margin-bottom: ms(0); 20 | padding: 6px 8px; 21 | 22 | border: 1px solid shade($hex-border, 10%); 23 | &:hover, 24 | &:focus { 25 | border-color: shade($hex-border, 30%); 26 | outline: none; 27 | } 28 | } 29 | 30 | @include all-text-inputs { 31 | @extend %input-defaults; 32 | 33 | width: 100%; 34 | } 35 | 36 | input[type=search] { 37 | @extend %input-defaults; 38 | 39 | width: auto; 40 | 41 | border-right: none; 42 | } 43 | 44 | input[type=submit] { 45 | @include font-weight(normal); 46 | @include media($mobile) { 47 | width: 100%; 48 | } 49 | 50 | padding: 6px ms(2); 51 | 52 | color: $hex-primary; 53 | border: 1px solid $hex-primary; 54 | background-color: transparent; 55 | &:hover { 56 | color: $hex-white; 57 | background-color: $hex-primary; 58 | } 59 | &:active { 60 | // #depress-links (submit buttons) by 1 pixel (may cause issues with 3rd party styles). 61 | // @include position(relative, 1px 0 0 0 ); 62 | } 63 | } 64 | 65 | // Post password form 66 | // 67 | .post-password-form { 68 | label { 69 | margin-top: ms(2); 70 | } 71 | input[type='password'] { 72 | margin-top: ms(-1); 73 | } 74 | input[type='submit'] { 75 | margin-top: 0; 76 | } 77 | } 78 | 79 | // Gravity forms 80 | // 81 | .gform_fields { 82 | @include no-bullets; 83 | @include zero-left; 84 | } 85 | .gfield { 86 | } 87 | .ginput_container { 88 | } 89 | .gfield_description { 90 | @include type-style-small; 91 | 92 | margin-bottom: ms(0); 93 | } 94 | .gform_footer { 95 | } 96 | .gform_button.button { 97 | margin-top: 0; 98 | } 99 | .gform_validation_container.gfield { 100 | display: none; 101 | } 102 | .validation_error { 103 | margin-bottom: unit(2); 104 | 105 | color: $hex-red; 106 | } 107 | .gfield_error { 108 | @include all-text-inputs { 109 | border-color: $hex-red; 110 | } 111 | .gfield_description { 112 | color: $hex-red; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/scss/components/_global.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Global 4 | // 5 | // =========================================================================== 6 | 7 | body, 8 | button, 9 | input, 10 | select, 11 | textarea { 12 | @include type-style-default; 13 | 14 | color: $hex-default; 15 | } 16 | 17 | body { 18 | @include media($tablet) { 19 | margin-top: $header-bar-height-mobile; 20 | } 21 | 22 | margin-top: 0; 23 | margin-bottom: 0; 24 | 25 | background-color: $hex-background; 26 | } 27 | 28 | // Remove iOS styling/ 29 | @include all-text-inputs { 30 | border-radius: 0; 31 | 32 | -webkit-appearance: none; 33 | } 34 | -------------------------------------------------------------------------------- /src/scss/components/_header.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Header 4 | // 5 | // =========================================================================== 6 | 7 | .site-header { 8 | // @include transition (padding, height $timing-default $easing-default); 9 | @include media($tablet) { 10 | @include position(fixed, 0px null null 0px); 11 | 12 | z-index: 1; 13 | 14 | width: 100%; 15 | height: $header-bar-height-mobile; 16 | padding-top: 0; 17 | padding-bottom: 0; 18 | 19 | background-color: $hex-real-white; 20 | } 21 | 22 | height: $header-bar-height; 23 | padding-top: unit(2); 24 | padding-bottom: unit(2); 25 | 26 | border-bottom: 1px solid $hex-border; 27 | // Adjust for wp admin bar 28 | .admin-bar & { 29 | @include media($tablet) { 30 | top: $wp-admin-bar-height; 31 | } 32 | } 33 | } 34 | .site-branding { 35 | @include media($tablet) { 36 | left: $gutter / 2; 37 | } 38 | @include position(absolute, 0px null null $gutter); 39 | } 40 | .site-title { 41 | @include type-style-h1; 42 | @include font-weight(light); 43 | } 44 | .site-logo { 45 | // @include transition (font-size $timing-default $easing-default); 46 | @include media($tablet) { 47 | line-height: $header-bar-height-mobile; 48 | } 49 | 50 | display: inline-block; 51 | 52 | margin-top: 0; 53 | margin-bottom: 0; 54 | } 55 | .site-description { 56 | display: none; 57 | } 58 | 59 | // Admin bar 60 | // 61 | #wpadminbar { 62 | @include media($tablet) { 63 | @include position(fixed, 0px null null 0px); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/scss/components/_html.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // HTML Tags & Formatting 4 | // 5 | // 6 | // =========================================================================== 7 | 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6 { 14 | @include font-weight(normal); 15 | 16 | clear: both; 17 | } 18 | 19 | a { 20 | @include link-hover; 21 | @include links(hex-primary); 22 | &:active { 23 | // #depress-links by 1 pixel (may cause issues with 3rd party styles). 24 | // @include position(relative, 1px null null null); 25 | } 26 | } 27 | 28 | p { 29 | margin-bottom: 1em; 30 | } 31 | 32 | b, 33 | strong { 34 | @include font-weight(normal); 35 | } 36 | 37 | dfn, 38 | cite, 39 | em, 40 | i { 41 | font-style: italic; 42 | } 43 | 44 | blockquote { 45 | line-height: ms(2); 46 | 47 | margin-bottom: ms(0); 48 | padding-left: ms(1); 49 | 50 | border-left: 1px solid $hex-border; 51 | p { 52 | margin-bottom: ms(0); 53 | > &:last-child { 54 | margin-bottom: 0; 55 | } 56 | } 57 | } 58 | 59 | address { 60 | margin-bottom: ms(0); 61 | } 62 | 63 | code, 64 | kbd, 65 | tt, 66 | var, 67 | samp, 68 | pre { 69 | font-family: $mono; 70 | font-size: rem(12); 71 | line-height: ms(2); 72 | 73 | -webkit-hyphens: none; 74 | -moz-hyphens: none; 75 | hyphens: none; 76 | 77 | -ms-hyphens: none; 78 | } 79 | 80 | code { 81 | margin-right: ms(-4); 82 | margin-left: ms(-4); 83 | padding: ms(-5) ms(-3) ms(-5) ms(-3); 84 | 85 | background-color: $hex-faint; 86 | // Increase specificity 87 | body & { 88 | border: 1px solid $hex-border; 89 | } 90 | } 91 | 92 | pre { 93 | overflow: auto; 94 | 95 | max-width: 100%; 96 | margin-bottom: 1.6em; 97 | padding: ms(2); 98 | // Uncomment below for 'word-wrap' 99 | // white-space: pre; 100 | // white-space: pre-wrap; 101 | // word-wrap: break-word; 102 | 103 | background-color: $hex-faint; 104 | // Increase specificity 105 | body & { 106 | border: 1px solid $hex-border; 107 | } 108 | } 109 | 110 | acronym, 111 | abbr { 112 | cursor: help; 113 | 114 | border-bottom: 1px dotted #eaeaea; 115 | border-bottom: 1px dotted rgba(51, 51, 51, .1); 116 | } 117 | 118 | mark, 119 | ins { 120 | padding-right: ms(-5); 121 | padding-left: ms(-5); 122 | 123 | text-decoration: none; 124 | 125 | background-color: $hex-highlight; 126 | } 127 | 128 | sup, 129 | sub { 130 | font-size: 75%; 131 | line-height: 0; 132 | 133 | position: relative; 134 | 135 | height: 0; 136 | 137 | vertical-align: baseline; 138 | } 139 | 140 | sup { 141 | bottom: 1ex; 142 | } 143 | 144 | sub { 145 | top: .5ex; 146 | } 147 | 148 | small { 149 | font-size: 75%; 150 | } 151 | 152 | big { 153 | font-size: 125%; 154 | } 155 | 156 | // Lists 157 | // 158 | 159 | hr { 160 | height: 1px; 161 | margin-bottom: 1.6em; 162 | 163 | border: 0; 164 | background-color: #eaeaea; 165 | background-color: rgba(51, 51, 51, .1); 166 | } 167 | 168 | ul, 169 | ol { 170 | margin: 0 0 ms(0) ms(1); 171 | } 172 | 173 | ul { 174 | list-style: disc; 175 | } 176 | 177 | ol { 178 | list-style: decimal; 179 | } 180 | 181 | li > ul, 182 | li > ol { 183 | margin-bottom: 0; 184 | } 185 | 186 | dl { 187 | margin-bottom: ms(0); 188 | } 189 | 190 | dt { 191 | @include font-weight(normal); 192 | } 193 | 194 | dd { 195 | margin-bottom: ms(0); 196 | } 197 | 198 | .no-bullets { 199 | @include no-bullets; 200 | } 201 | -------------------------------------------------------------------------------- /src/scss/components/_layout.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Layout 4 | // 5 | // =========================================================================== 6 | 7 | 8 | // Containers 9 | // --------------------------------------------------------------------------- 10 | 11 | %container { 12 | @include outer-container; 13 | // @include transition (padding $timing-default $easing-default); 14 | @include media($tablet) { 15 | padding-right: $gutter / 2; 16 | padding-left: $gutter / 2; 17 | } 18 | 19 | padding-right: $gutter; 20 | padding-left: $gutter; 21 | } 22 | 23 | .container { 24 | @extend %container; 25 | } 26 | 27 | .header-container { 28 | @extend %container; 29 | 30 | position: relative; 31 | } 32 | 33 | .content-container { 34 | @extend %container; 35 | } 36 | 37 | .footer-container { 38 | @extend %container; 39 | } 40 | -------------------------------------------------------------------------------- /src/scss/components/_media.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Images & Media 4 | // 5 | // =========================================================================== 6 | 7 | embed, 8 | iframe, 9 | object, 10 | video { 11 | max-width: 100%; 12 | } 13 | img { 14 | max-width: 100%; 15 | height: auto; 16 | 17 | -ms-interpolation-mode: bicubic; 18 | border: 0; 19 | } 20 | 21 | .entry-content img, 22 | .entry-summary img, 23 | .comment-content img[height], 24 | img[class*='align'], 25 | img[class*='wp-image-'], 26 | img[class*='attachment-'] { 27 | height: auto; 28 | 29 | vertical-align: bottom; 30 | } 31 | 32 | img.size-full, 33 | img.size-large, 34 | img.wp-post-image, 35 | figure.wp-caption { 36 | max-width: 100%; 37 | height: auto; 38 | } 39 | 40 | .entry-content .twitter-tweet-rendered { 41 | max-width: 100% !important; 42 | } 43 | 44 | // Image caption 45 | // 46 | .wp-caption-text { 47 | @include type-style-small; 48 | 49 | padding-top: ms(0); 50 | padding-bottom: ms(0); 51 | 52 | text-align: center; 53 | } 54 | 55 | // Alignments 56 | // 57 | .alignleft { 58 | @include media($mobile) { 59 | display: block; 60 | float: none; 61 | } 62 | 63 | display: inline; 64 | float: left; 65 | } 66 | 67 | .alignright { 68 | @include media($mobile) { 69 | display: block; 70 | float: none; 71 | } 72 | 73 | display: inline; 74 | float: right; 75 | } 76 | 77 | .aligncenter { 78 | display: block; 79 | 80 | margin-right: auto; 81 | margin-left: auto; 82 | } 83 | 84 | .alignnone { 85 | display: block; 86 | } 87 | 88 | blockquote, 89 | .wp-caption, 90 | img { 91 | &.alignleft { 92 | @include media($mobile) { 93 | margin: ms(1) auto ms(0) auto; 94 | } 95 | 96 | margin: ms(-2) ms(1) ms(-2) 0; 97 | } 98 | &.alignright { 99 | @include media($mobile) { 100 | margin: ms(1) auto ms(0) auto; 101 | } 102 | 103 | margin: ms(-2) 0 ms(-2) ms(1); 104 | } 105 | &.aligncenter, 106 | &.alignnone { 107 | clear: both; 108 | 109 | margin-top: ms(1); 110 | margin-bottom: ms(0); 111 | } 112 | } 113 | 114 | .wp-caption { 115 | &.alignleft, 116 | &.alignright, 117 | &.aligncenter, 118 | &.alignnone { 119 | @include media($mobile) { 120 | margin-bottom: ms(-3); 121 | } 122 | 123 | margin-bottom: ms(-3); 124 | } 125 | } 126 | 127 | // Featured image 128 | // 129 | .attachment-post-thumbnail { 130 | display: block; 131 | 132 | margin-bottom: ms(3); 133 | } 134 | -------------------------------------------------------------------------------- /src/scss/components/_navigation.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Navigation 4 | // 5 | // =========================================================================== 6 | 7 | 8 | // Main Navigation 9 | // --------------------------------------------------------------------------- 10 | 11 | .main-navigation { 12 | @include media($tablet) { 13 | @include position(fixed, $header-bar-height-mobile null null 0px); 14 | 15 | display: none; 16 | float: none; 17 | overflow-y: scroll; 18 | 19 | width: 100%; 20 | 21 | background-color: $hex-white; 22 | 23 | -webkit-overflow-scrolling: touch; 24 | } 25 | @include media($desktop) { 26 | display: block !important; 27 | 28 | height: auto !important; 29 | } 30 | @include position(absolute, 20px 0px null null); 31 | // Adjust for wp admin bar 32 | .admin-bar & { 33 | @include media($tablet) { 34 | top: $header-bar-height-mobile + $wp-admin-bar-height; 35 | } 36 | } 37 | a { 38 | @include media($tablet) { 39 | color: $hex-default; 40 | } 41 | } 42 | .container { 43 | @include media($tablet) { 44 | padding-right: 0; 45 | padding-left: 0; 46 | } 47 | } 48 | .menu { 49 | @include row; 50 | @include no-bullets; 51 | @include media($tablet) { 52 | padding-top: $gutter / 3; 53 | padding-bottom: $gutter / 3; 54 | } 55 | &:first-child { 56 | margin-left: 0; 57 | } 58 | .page_item, 59 | .menu-item { 60 | @include media($tablet) { 61 | float: none; 62 | 63 | margin-bottom: 0; 64 | margin-left: 0; 65 | padding-top: unit(.5); 66 | padding-bottom: rem(5); 67 | } 68 | @include font-weight(light); 69 | @include position(relative); 70 | 71 | float: left; 72 | 73 | margin-left: 2em; 74 | &:first-child { 75 | margin-left: 0; 76 | } 77 | a { 78 | @include media($tablet) { 79 | display: block; 80 | } 81 | } 82 | } 83 | > ul { 84 | @include clearfix; 85 | 86 | margin-left: 0; 87 | } 88 | .current_page_item, 89 | .current_page_parent { 90 | @include font-weight(semi-bold); 91 | } 92 | > .menu-item-has-children, 93 | .page_item_has_children { 94 | @include media($desktop) { 95 | min-height: 40px; 96 | } 97 | @include media($tablet) { 98 | } 99 | &:hover .sub-menu, 100 | &:hover .children { 101 | display: block; 102 | } 103 | } 104 | > .menu-item, 105 | .page_item { 106 | @include media($tablet) { 107 | margin-bottom: rem(10); 108 | padding-top: 0; 109 | padding-right: $gutter / 2; 110 | padding-bottom: rem(10); 111 | padding-left: $gutter / 2; 112 | 113 | border-bottom: $border-thin; 114 | } 115 | } 116 | } 117 | .sub-menu { 118 | @include media($desktop) { 119 | @include position(absolute, 38px null null -11px); 120 | @include zero-left; 121 | 122 | display: none; 123 | 124 | min-width: 150px; 125 | padding: rem(10); 126 | 127 | border: $border-thin; 128 | background-color: $hex-white; 129 | } 130 | @include media($tablet) { 131 | float: none; 132 | 133 | margin-left: 0; 134 | } 135 | .page_item, 136 | .menu-item { 137 | @include media($desktop) { 138 | margin-bottom: rem(10); 139 | } 140 | @include media($tablet) { 141 | padding-left: rem(10); 142 | } 143 | 144 | line-height: ms(1); 145 | 146 | float: none; 147 | 148 | margin-left: 0; 149 | &:last-child { 150 | margin-bottom: 0; 151 | } 152 | } 153 | .sub-menu { 154 | @include media($desktop) { 155 | position: static; 156 | top: 30px; 157 | 158 | padding-bottom: 0; 159 | padding-left: 0; 160 | 161 | border: none; 162 | } 163 | @include media($tablet) { 164 | @include zero-bottom; 165 | 166 | padding-left: 0; 167 | li:last-child { 168 | @include zero-bottom; 169 | } 170 | } 171 | .page_item, 172 | .menu-item { 173 | @include media($desktop) { 174 | padding-left: rem(10); 175 | } 176 | @include media($tablet) { 177 | padding-left: rem(10); 178 | } 179 | } 180 | } 181 | } 182 | .children { 183 | // Required if primary menu is not set. 184 | @extend .sub-menu; 185 | .page_item { 186 | @include media($tablet) { 187 | margin-bottom: 0; 188 | padding-top: unit(.5); 189 | padding-bottom: rem(5); 190 | 191 | border-bottom: 0; 192 | } 193 | } 194 | } 195 | } 196 | 197 | 198 | // Mobile Menu Switch 199 | // --------------------------------------------------------------------------- 200 | 201 | #mobile-menu-switch { 202 | @include media($tablet) { 203 | display: block; 204 | } 205 | @include position(fixed, 0px 0px null null); 206 | 207 | display: none; 208 | // Adjust for wp admin bar 209 | .admin-bar & { 210 | @include media($tablet) { 211 | top: $wp-admin-bar-height; 212 | } 213 | } 214 | .toggle { 215 | font-size: rem(14); 216 | line-height: $header-bar-height-mobile; 217 | 218 | display: block; 219 | 220 | width: $header-bar-height-mobile + 10px; 221 | height: $header-bar-height-mobile; 222 | 223 | text-align: center; 224 | text-transform: uppercase; 225 | 226 | color: $hex-primary; 227 | &:hover { 228 | text-decoration: none; 229 | } 230 | &:active { 231 | // Enable if #depress-links is active. 232 | // top: 0; 233 | } 234 | &.on { 235 | border-left: 1px solid $hex-border; 236 | background-color: $hex-white; 237 | } 238 | } 239 | } 240 | 241 | 242 | // Post Navigation 243 | // --------------------------------------------------------------------------- 244 | 245 | .post-navigation { 246 | @include media($tablet) { 247 | margin-top: unit(2); 248 | margin-bottom: unit(2); 249 | } 250 | 251 | margin-top: unit(4); 252 | margin-bottom: unit(4); 253 | } 254 | 255 | 256 | // Comment Navigation 257 | // --------------------------------------------------------------------------- 258 | 259 | .comment-navigation { 260 | @include media($tablet) { 261 | margin-top: 0; 262 | margin-bottom: unit(2); 263 | } 264 | 265 | margin-top: unit(-2); 266 | margin-bottom: unit(4); 267 | } 268 | -------------------------------------------------------------------------------- /src/scss/components/_search.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Search 4 | // 5 | // =========================================================================== 6 | 7 | .search-form { 8 | @include row; 9 | 10 | margin-bottom: unit(2); 11 | .content-area & { 12 | margin-top: unit(2); 13 | } 14 | label { 15 | .content-area & { 16 | margin-top: 0; 17 | margin-bottom: 0; 18 | } 19 | } 20 | input[type=search] { 21 | width: 100%; 22 | margin-top: 0; 23 | margin-bottom: 0; 24 | } 25 | .search-submit { 26 | @include span-columns(1.5 of 4, block-collapse); 27 | 28 | margin-top: 0; 29 | padding-right: 0; 30 | padding-left: 0; 31 | } 32 | label { 33 | @include span-columns(2.5 of 4, block-collapse); 34 | input[type=search] { 35 | box-sizing: border-box; 36 | width: 100%; 37 | } 38 | } 39 | } 40 | 41 | .search-results { 42 | article:last-child { 43 | margin-bottom: unit(2); 44 | padding-bottom: 0; 45 | 46 | border: none; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/scss/layouts/_404.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // 404 4 | // 5 | // =========================================================================== 6 | 7 | .error404 { 8 | .content-area { 9 | @include span-columns(12); 10 | @include zero-right; 11 | } 12 | .page-title { 13 | @include type-style-h1; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/scss/layouts/_blog.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Blog 4 | // 5 | // =========================================================================== 6 | 7 | article.post, 8 | article.page, 9 | .comment-body { 10 | @include media($tablet) { 11 | margin-bottom: unit(2); 12 | padding-bottom: unit(2); 13 | } 14 | 15 | margin-bottom: unit(4); 16 | padding-bottom: unit(4); 17 | 18 | border-bottom: 1px solid $hex-border; 19 | h1 { 20 | @include type-style-h1; 21 | } 22 | h2 { 23 | @include type-style-h2; 24 | } 25 | h3 { 26 | @include type-style-h3; 27 | } 28 | h4 { 29 | @include type-style-h4; 30 | } 31 | h5 { 32 | @include type-style-h5; 33 | } 34 | h6 { 35 | @include type-style-h6; 36 | } 37 | table { 38 | width: 100%; 39 | } 40 | th { 41 | @include font-weight(normal); 42 | } 43 | td, 44 | th { 45 | line-height: ms(1); 46 | 47 | padding: ms(-1) ms(-1) ms(-1) 0; 48 | 49 | text-align: left; 50 | 51 | border-bottom: 1px solid $hex-border; 52 | } 53 | } 54 | 55 | .page article.page { 56 | padding-bottom: 0; 57 | // margin-bottom: 0; 58 | 59 | border: none; 60 | } 61 | 62 | .entry-title { 63 | @include type-style-h1; 64 | // Long title fix (will affect all titles). 65 | // @include word-wrap; 66 | 67 | margin-bottom: ms(-3); 68 | } 69 | .entry-meta { 70 | @include type-style-small; 71 | } 72 | .entry-content, 73 | .entry-summary, 74 | .page-content { 75 | margin-top: ms(0); 76 | margin-bottom: ms(2); 77 | } 78 | .entry-footer { 79 | @include type-style-small; 80 | .cat-links, 81 | .tags-links, 82 | .comments-link { 83 | // margin-right: ms(0); 84 | } 85 | > span { 86 | margin-right: ms(0); 87 | &:last-child { 88 | margin-right: 0; 89 | } 90 | } 91 | } 92 | .page-title { 93 | @include type-style-h4; 94 | 95 | margin-bottom: ms(1); 96 | 97 | color: $hex-light-grey; 98 | } 99 | 100 | .nav-links { 101 | @include row; 102 | 103 | line-height: ms(1); 104 | .nav-next { 105 | @include span-columns(12); 106 | 107 | text-align: right; 108 | } 109 | .nav-previous { 110 | @include span-columns(6); 111 | & + .nav-next { 112 | @include span-columns(6); 113 | } 114 | } 115 | } 116 | 117 | // Continue reading link 118 | // 119 | .more-link { 120 | } 121 | 122 | // Post pagination 123 | // 124 | .page-links { 125 | span { 126 | margin-right: 2px; 127 | margin-left: 2px; 128 | } 129 | } 130 | 131 | // Gallery 132 | // 133 | .gallery { 134 | @include row; 135 | 136 | margin-bottom: ms(0); 137 | padding-top: ms(0); 138 | .gallery-item { 139 | @include media($mobile) { 140 | @include mobile-single; 141 | } 142 | 143 | margin-bottom: ms(0); 144 | 145 | text-align: center; 146 | } 147 | } 148 | .gallery-columns-2 { 149 | .gallery-item { 150 | @include span-columns(6); 151 | @include omega(2n); 152 | &:nth-child(2n + 1) { 153 | clear: left; 154 | } 155 | } 156 | } 157 | .gallery-columns-3 { 158 | .gallery-item { 159 | @include span-columns(4); 160 | @include omega(3n); 161 | &:nth-child(3n + 1) { 162 | clear: left; 163 | } 164 | } 165 | } 166 | .gallery-columns-4, 167 | .gallery-columns-5 { 168 | .gallery-item { 169 | @include span-columns(3); 170 | @include omega(4n); 171 | &:nth-child(4n + 1) { 172 | clear: left; 173 | } 174 | } 175 | } 176 | .gallery-columns-6, 177 | .gallery-columns-7, 178 | .gallery-columns-8, 179 | .gallery-columns-9 { 180 | .gallery-item { 181 | @include span-columns(2); 182 | @include omega(6n); 183 | &:nth-child(6n + 1) { 184 | clear: left; 185 | } 186 | } 187 | } 188 | 189 | // Theme-Check requirements 190 | .gallery-caption { 191 | display: block; 192 | } 193 | .bypostauthor { 194 | display: block; 195 | } 196 | 197 | // Social sharing links 198 | // 199 | .social-sharing { 200 | @include row; 201 | @include zero-left; 202 | @include no-bullets; 203 | 204 | margin-bottom: unit(2); 205 | li { 206 | @include type-style-small; 207 | 208 | float: left; 209 | 210 | margin-right: 1em; 211 | &:last-child { 212 | margin-right: 0; 213 | } 214 | } 215 | } 216 | 217 | 218 | // =========================================================================== 219 | // Post Formats 220 | // =========================================================================== 221 | 222 | article.sticky { 223 | // Sticky Post 224 | display: block; 225 | } 226 | 227 | article.status-draft { 228 | // Draft Post 229 | } 230 | 231 | article.future { 232 | // Scheduled Post 233 | } 234 | 235 | // Image 236 | // 237 | .single-format-image { 238 | // Single page body element 239 | } 240 | article.format-image { 241 | // Global article element 242 | } 243 | 244 | // Audio 245 | // 246 | .single-format-audio { 247 | // Single page body element 248 | } 249 | article.format-audio { 250 | // Global article element 251 | } 252 | 253 | // Video 254 | // 255 | .single-format-video { 256 | // Single page body element 257 | } 258 | article.format-video { 259 | // Global article element 260 | } 261 | 262 | // Aside 263 | // 264 | .single-format-aside { 265 | // Single page body element 266 | } 267 | article.format-aside { 268 | // Global article element 269 | } 270 | 271 | // Status 272 | // 273 | .single-format-status { 274 | // Single page body element 275 | } 276 | article.format-status { 277 | // Global article element 278 | } 279 | 280 | // Link 281 | // 282 | .single-format-link { 283 | // Single page body element 284 | } 285 | article.format-link { 286 | // Global article element 287 | } 288 | 289 | // Quote 290 | // 291 | .single-format-quote { 292 | // Single page body element 293 | } 294 | article.format-quote { 295 | // Global article element 296 | } 297 | 298 | // Chat 299 | // 300 | .single-format-chat { 301 | // Single page body element 302 | } 303 | article.format-chat { 304 | // Global article element 305 | } 306 | -------------------------------------------------------------------------------- /src/scss/layouts/_main-content.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Main Content 4 | // 5 | // =========================================================================== 6 | 7 | .content-area { 8 | @include span-columns(8); 9 | @include tablet-single; 10 | // @include transition (margin $timing-default $easing-default); 11 | @include media($desktop) { 12 | @include double-gutter; 13 | } 14 | @include media($tablet) { 15 | margin-top: unit(2); 16 | margin-bottom: unit(2); 17 | } 18 | 19 | margin-top: unit(4); 20 | margin-bottom: unit(4); 21 | } 22 | 23 | // No Sidebar on Full Width 24 | // 25 | .page-template-page-full-width .content-area { 26 | @include span-columns(12); 27 | 28 | padding-right: 0; 29 | } 30 | 31 | // Remove margin on single posts 32 | // 33 | .single .content-area, 34 | .page .content-area { 35 | margin-bottom: 0; 36 | } 37 | -------------------------------------------------------------------------------- /src/scss/layouts/_sidebar.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Sidebar 4 | // 5 | // =========================================================================== 6 | 7 | .widget-area { 8 | @include span-columns(4); 9 | @include tablet-single; 10 | // @include transition (margin $timing-default $easing-default); 11 | @include media($tablet) { 12 | margin-top: unit(2); 13 | margin-bottom: unit(2); 14 | } 15 | 16 | margin-top: unit(4); 17 | margin-bottom: unit(4); 18 | } 19 | .screen-reader-text { 20 | display: none; 21 | } 22 | .widget-title { 23 | @include type-style-h5; 24 | } 25 | 26 | // Widget 27 | // 28 | .widget { 29 | margin-bottom: ms(0); 30 | padding-top: ms(0); 31 | padding-bottom: ms(0); 32 | 33 | border-bottom: 1px solid $hex-border; 34 | &:first-child { 35 | padding-top: 0; 36 | } 37 | &:last-child { 38 | padding-bottom: 0; 39 | 40 | border-bottom: none; 41 | } 42 | ul { 43 | @include no-bullets; 44 | 45 | margin-left: 0; 46 | li { 47 | &:last-child { 48 | } 49 | } 50 | } 51 | } 52 | 53 | // Removes border & spacing for top widget position 54 | // 55 | .widget_search { 56 | @include zero-bottom; 57 | 58 | border-bottom: none; 59 | .search-submit { 60 | margin-bottom: 0; 61 | } 62 | .search-form { 63 | margin-bottom: ms(0); 64 | } 65 | } 66 | 67 | // Calendar widget 68 | // 69 | .widget_calendar { 70 | caption { 71 | margin-bottom: ms(-2); 72 | } 73 | table { 74 | width: 100%; 75 | 76 | text-align: center; 77 | } 78 | td, 79 | th { 80 | font-weight: inherit; 81 | line-height: ms(1); 82 | 83 | padding: ms(-1); 84 | 85 | border-bottom: 1px solid $hex-border; 86 | } 87 | tfoot td { 88 | border-bottom: none; 89 | } 90 | #prev { 91 | text-align: left; 92 | } 93 | #next { 94 | text-align: right; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /src/scss/mixins/_type-styles.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Type Styles 4 | // 5 | // =========================================================================== 6 | 7 | @mixin type-style-h1 { 8 | @include font-weight(light); 9 | @include media($tablet) { 10 | font-size: ms(3); 11 | } 12 | 13 | font-size: ms(4); 14 | line-height: ms(0); 15 | 16 | margin-top: ms(-2); 17 | margin-bottom: ms(-2); 18 | &:first-child { 19 | margin-top: 0; 20 | } 21 | a { 22 | @include link-hover-none; 23 | } 24 | } 25 | 26 | @mixin type-style-h2 { 27 | @include font-weight(light); 28 | 29 | font-size: ms(2); 30 | line-height: ms(1); 31 | 32 | margin-top: ms(0); 33 | margin-bottom: ms(-1); 34 | } 35 | 36 | @mixin type-style-h3 { 37 | @include font-weight(normal); 38 | 39 | font-size: ms(1); 40 | line-height: ms(0); 41 | 42 | margin-top: ms(0); 43 | margin-bottom: ms(0); 44 | } 45 | 46 | @mixin type-style-h4 { 47 | @include font-weight(normal); 48 | 49 | font-size: ms(0); 50 | line-height: ms(0); 51 | 52 | margin-top: ms(0); 53 | margin-bottom: ms(0); 54 | 55 | text-transform: uppercase; 56 | } 57 | 58 | @mixin type-style-h5 { 59 | @include font-weight(normal); 60 | 61 | font-size: ms(0); 62 | line-height: ms(0); 63 | 64 | margin-top: ms(0); 65 | margin-bottom: ms(0); 66 | } 67 | 68 | @mixin type-style-h6 { 69 | @include font-weight(normal); 70 | 71 | font-size: ms(0); 72 | line-height: ms(0); 73 | 74 | margin-top: ms(0); 75 | margin-bottom: ms(0); 76 | } 77 | 78 | @mixin type-style-small { 79 | font-size: rem(14); 80 | line-height: ms(1); 81 | } 82 | 83 | @mixin type-style-default { 84 | @include font-weight($default-font-weight); 85 | @include media($tablet) { 86 | @include font-weight(normal); 87 | } 88 | 89 | font-family: $default-font; 90 | font-size: ms(0); 91 | line-height: ms(2); 92 | 93 | margin-top: ms(0); 94 | margin-bottom: ms(0); 95 | } 96 | 97 | @mixin code { 98 | font-family: $mono; 99 | font-size: 12px; 100 | line-height: 1.5em; 101 | } 102 | -------------------------------------------------------------------------------- /src/scss/mixins/_unsorted.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Mixins (Unsorted) 4 | // 5 | // =========================================================================== 6 | 7 | // Standard unit of measurement to keep things simple 8 | // 9 | $global-unit: 15; 10 | @function unit($value) { 11 | @return rem($global-unit * $value); 12 | } 13 | 14 | // Wrapper for modular scale function 15 | // 16 | $modular-scale-ratio: $perfect-fourth; 17 | $modular-scale-base: 1em; 18 | @function ms($value: 0) { 19 | @return modular-scale($value); 20 | } 21 | 22 | // Font weight translations 23 | // 24 | @mixin font-weight($weight: default) { 25 | @if ($weight == thin) or ($weight == ultralight) or ($weight == ultra-light) { 26 | font-weight: 100; 27 | } 28 | @if ($weight == extralight) or ($weight == extra-light) { 29 | font-weight: 200; 30 | } 31 | @if ($weight == light) { 32 | font-weight: 300; 33 | } 34 | @if ($weight == normal) or ($weight == book) or ($weight == regular) or ($weight == default) { 35 | font-weight: 400; 36 | } 37 | @if ($weight == medium) { 38 | font-weight: 500; 39 | } 40 | @if ($weight == semibold) or ($weight == semi-bold) or ($weight == demi) { 41 | font-weight: 600; 42 | } 43 | @if ($weight == bold) { 44 | font-weight: 700; 45 | } 46 | @if ($weight == extrabold) or ($weight == extrabold) { 47 | font-weight: 800; 48 | } 49 | @if ($weight == black) or ($weight == heavy) { 50 | font-weight: 900; 51 | } 52 | } 53 | 54 | @mixin link-hover { 55 | text-decoration: none; 56 | &:hover { 57 | text-decoration: underline; 58 | } 59 | } 60 | @mixin link-hover-none { 61 | &:hover { 62 | text-decoration: none; 63 | } 64 | } 65 | 66 | @mixin double-gutter { 67 | @include media($tablet) { 68 | padding-right: 0; 69 | } 70 | 71 | padding-right: 2.35765% * 2; 72 | } 73 | 74 | @mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) { 75 | color: $normal; 76 | @if $visited { 77 | &:visited { 78 | color: $visited; 79 | } 80 | } 81 | @if $focus { 82 | &:focus { 83 | color: $focus; 84 | } 85 | } 86 | @if $hover { 87 | &:hover { 88 | color: $hover; 89 | } 90 | } 91 | @if $active { 92 | &:active { 93 | color: $active; 94 | } 95 | } 96 | } 97 | 98 | @mixin links($style: default) { 99 | @if $style == hex-white { 100 | @include link-colors($hex-white, $hex-real-white); 101 | } 102 | @if $style == hex-primary { 103 | @include link-colors($hex-primary, $hex-primary-hover); 104 | } 105 | @if $style == hex-secondary { 106 | @include link-colors($hex-secondary, $hex-secondary-hover); 107 | } 108 | @if $style == hex-footer { 109 | @include link-hover; 110 | @include link-colors($hex-footer, $hex-footer-hover); 111 | } 112 | @if $style == default { 113 | @include link-colors($hex-default, $hex-default-hover); 114 | @include link-hover; 115 | } 116 | } 117 | 118 | @mixin bg-image($filename, $x: left, $y: top, $ext: png ) { 119 | background-image: url('./img/#{$filename}.#{$ext}'); 120 | background-repeat: no-repeat; 121 | background-position: $x $y; 122 | } 123 | 124 | @mixin bg-image-hidpi($filename, $width, $height, $x: left, $y: top, $ext: png ) { 125 | @include hidpi { 126 | background-image: url('./img/#{$filename}@2x.#{$ext}'); 127 | background-size: $width + px $height + px; 128 | } 129 | 130 | background-image: url('./img/#{$filename}.#{$ext}'); 131 | background-repeat: no-repeat; 132 | background-position: $x $y; 133 | } 134 | 135 | @mixin tablet-single { 136 | @include media($tablet) { 137 | @include span-columns(8 of 8); 138 | } 139 | } 140 | @mixin mobile-single { 141 | @include media($mobile) { 142 | @include span-columns(4 of 4); 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /src/scss/mixins/_utilities.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Utilities 4 | // 5 | // =========================================================================== 6 | 7 | @mixin no-bullet { 8 | margin-left: 0; 9 | 10 | list-style-type: none; 11 | list-style-image: none; 12 | } 13 | @mixin no-bullets { 14 | padding-left: 0; 15 | 16 | list-style: none; 17 | li { 18 | @include zero-left; 19 | @include no-bullet; 20 | } 21 | } 22 | 23 | @mixin no-wrap { 24 | white-space: nowrap; 25 | } 26 | 27 | @mixin ellipsis { 28 | overflow: hidden; 29 | 30 | white-space: nowrap; 31 | text-overflow: ellipsis; 32 | } 33 | 34 | @mixin zero-all { 35 | margin: 0; 36 | padding: 0; 37 | } 38 | @mixin zero-top { 39 | margin-top: 0; 40 | padding-top: 0; 41 | } 42 | @mixin zero-bottom { 43 | margin-bottom: 0; 44 | padding-bottom: 0; 45 | } 46 | @mixin zero-left { 47 | margin-left: 0; 48 | padding-left: 0; 49 | } 50 | @mixin zero-right { 51 | margin-right: 0; 52 | padding-right: 0; 53 | } 54 | @mixin zero-last { 55 | &:last-child { 56 | @include zero-bottom; 57 | } 58 | } 59 | 60 | @mixin hide { 61 | display: none; 62 | visibility: hidden; 63 | } 64 | 65 | @mixin all-text-inputs { 66 | input[type='color'], 67 | input[type='date'], 68 | input[type='datetime'], 69 | input[type='datetime-local'], 70 | input[type='email'], 71 | input[type='month'], 72 | input[type='number'], 73 | input[type='password'], 74 | input[type='search'], 75 | input[type='tel'], 76 | input[type='text'], 77 | input[type='time'], 78 | input[type='url'], 79 | input[type='week'], 80 | textarea { 81 | @content; 82 | } 83 | // Alternate bourbon implementation below (Causes csscomb errors) 84 | // #{$all-text-inputs} { 85 | // @content; 86 | // } 87 | } 88 | -------------------------------------------------------------------------------- /src/scss/style.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Forward Framework 4 | // 5 | // =========================================================================== 6 | 7 | 8 | // Base / Settings 9 | // --------------------------------------------------------------------------- 10 | 11 | @import 'base/wp-header'; 12 | // @import 'base/fonts'; 13 | @import 'base/fix'; // Replaces reset & normalize below 14 | // @import 'base/reset'; 15 | // @import 'base/normalize'; 16 | @import 'bourbon/app/assets/stylesheets/bourbon'; 17 | @import 'neat/app/assets/stylesheets/neat'; 18 | 19 | 20 | // Variables 21 | // --------------------------------------------------------------------------- 22 | 23 | @import 'variables/color'; 24 | @import 'variables/typography'; 25 | @import 'variables/unsorted'; 26 | @import 'base/grid'; 27 | 28 | 29 | // Mixins 30 | // --------------------------------------------------------------------------- 31 | 32 | @import 'mixins/unsorted'; 33 | @import 'mixins/utilities'; 34 | @import 'mixins/type-styles'; 35 | 36 | 37 | // Components 38 | // --------------------------------------------------------------------------- 39 | 40 | @import 'components/global'; 41 | @import 'components/html'; 42 | @import 'components/media'; 43 | @import 'components/layout'; 44 | @import 'components/header'; 45 | @import 'components/navigation'; 46 | @import 'components/comments'; 47 | @import 'components/search'; 48 | @import 'components/footer'; 49 | @import 'components/forms'; 50 | 51 | 52 | // Layouts 53 | // --------------------------------------------------------------------------- 54 | 55 | // @import 'layouts/global'; 56 | @import 'layouts/main-content'; 57 | @import 'layouts/sidebar'; 58 | @import 'layouts/blog'; 59 | @import 'layouts/404'; 60 | -------------------------------------------------------------------------------- /src/scss/variables/_color.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Colors 4 | // 5 | // =========================================================================== 6 | 7 | $hex-default: tint(#000, 35%); 8 | $hex-default-hover: shade($hex-default, 20%); 9 | 10 | $hex-white: #f9f9f9; 11 | $hex-real-white: #fff; 12 | 13 | $hex-red: #B2432C; 14 | $hex-blue: #3185CB; 15 | 16 | $hex-highlight: #fff9c0; 17 | 18 | // Greys 19 | // 20 | $hex-faint: #fdfdfd; 21 | $hex-light-grey: tint(#000, 60%); 22 | $hex-grey: tint(#000, 50%); 23 | 24 | $hex-primary: $hex-blue; 25 | $hex-primary-hover: shade($hex-primary, 20%); 26 | 27 | $hex-secondary: $hex-red; 28 | $hex-secondary-hover: shade($hex-secondary, 20%); 29 | 30 | $hex-border: shade(#e6e6e6, 5%); 31 | $hex-border-hover: shade($hex-border, 20%); 32 | 33 | $hex-footer: tint(#000, 50%); 34 | $hex-footer-hover: shade($hex-footer, 20%); 35 | $hex-footer-bg: #f3f3f3; 36 | 37 | $hex-background: shade($hex-real-white, 0%); 38 | -------------------------------------------------------------------------------- /src/scss/variables/_typography.scss: -------------------------------------------------------------------------------- 1 | // =========================================================================== 2 | // 3 | // Typography 4 | // 5 | // =========================================================================== 6 | 7 | $helvetica: 'Helvetica Neue', Helvetica, Arial, sans-serif; 8 | $source-sans: 'Source Sans Pro', $helvetica; 9 | $mono: Monaco, Consolas, 'Lucida Console', monospace; 10 | $default-font: $source-sans; 11 | $default-font-weight: light; 12 | -------------------------------------------------------------------------------- /src/scss/variables/_unsorted.scss: -------------------------------------------------------------------------------- 1 | /////////////// 2 | // Variables // 3 | /////////////// 4 | 5 | // Global Variables 6 | // 7 | $wp-admin-bar-height: 46px; 8 | $wp-admin-bar-height-desktop: 32px; 9 | $header-bar-height: 120px; 10 | $header-bar-height-mobile: 60px; 11 | $header-logo-width: 260px; 12 | $timing-default: .25s; 13 | $easing-default: ease-in-out; 14 | 15 | // Margin / Padding 16 | // 17 | $margin: $gutter; 18 | $padding: $gutter; 19 | 20 | // Borders 21 | // 22 | $border-thin: 1px solid $hex-border; 23 | -------------------------------------------------------------------------------- /src/search.php: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 |
12 | 13 | 14 | 15 |
16 |

' . get_search_query() . '' ); ?>

17 |
18 | 19 | 20 | 21 | 22 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 |
43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/sidebar.php: -------------------------------------------------------------------------------- 1 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/single.php: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 25 | 26 | 27 | 28 |
29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /src/templates/full-width.php: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 24 | 25 | 26 | 27 |
28 |
29 | 30 | --------------------------------------------------------------------------------