├── .jshintignore ├── sass ├── _theme │ ├── .gitignore │ └── _variables-site │ │ └── _variables-site.scss ├── vendor │ └── .gitignore ├── _typography │ ├── typography-headings.scss │ ├── gutenberg-document.scss │ ├── typography-copy.scss │ ├── _typography.scss │ ├── gutenberg-config.scss │ ├── gutenberg-mixins.scss │ ├── gutenberg-reset.scss │ └── gutenberg-typography.scss ├── _variables-site │ ├── animations.scss │ ├── structure.scss │ ├── spacing.scss │ ├── typography.scss │ ├── colors.scss │ ├── _variables-site.scss │ └── media-queries.scss ├── _reset │ └── _reset.scss ├── _header │ └── _header.scss ├── _footer │ ├── elements.scss │ ├── sticky-footer.scss │ └── _footer.scss ├── _content │ ├── sidebar.scss │ ├── _content.scss │ ├── elements.scss │ └── layout.scss ├── _elements │ ├── tables.scss │ ├── _elements.scss │ └── lists.scss ├── _mixins │ ├── _mixins-master.scss │ ├── mixins-striped-background.scss │ └── mixins-css-locks.scss ├── _media │ ├── captions.scss │ ├── _media.scss │ ├── galleries.scss │ └── reset.scss ├── _forms │ ├── _forms.scss │ ├── buttons.scss │ └── fields.scss ├── _a11y │ └── _accessibility.scss ├── _comments │ └── _comments.scss ├── _navigation │ └── _navigation.scss └── style.scss ├── .gitignore ├── favicon.php ├── languages ├── hr.mo ├── readme.txt ├── _s.pot ├── _bem.pot └── hr.po ├── screenshot.png ├── .jscsrc ├── gulp ├── livereload.js ├── sass.js ├── autoprefixer.js ├── minify.js ├── sequence.js ├── critical.js └── bump.js ├── .editorconfig ├── inc ├── bem-post-edit-link.php ├── wpcom.php ├── bem-post-links.php ├── extras.php ├── bem.php ├── customizer.php ├── jetpack.php ├── bem-posts-navigation-links.php ├── bem-tinymce.php ├── bem-script-loader-tag.php ├── custom-header.php ├── bem-walker-nav-menu.php ├── bem-comments.php ├── template-tags.php └── bem-gallery.php ├── rtl.css ├── sidebar.php ├── layouts ├── content-sidebar.css └── sidebar-content.css ├── template-parts ├── menu-static.php ├── menu-toggle.php ├── content-search.php ├── content-page.php ├── content-none.php └── content.php ├── bower.json ├── searchform.php ├── gulpfile.js ├── codesniffer.ruleset.xml ├── js ├── skip-link-focus-fix.js ├── customizer.js └── navigation.js ├── page.php ├── package.json ├── single.php ├── readme.txt ├── 404.php ├── search.php ├── .jshintrc ├── README.md ├── index.php ├── footer.php ├── archive.php ├── header.php ├── CONTRIBUTING.md ├── .travis.yml ├── functions.php ├── comments.php ├── dist └── css │ ├── style.critical.min.css │ └── style.min.css └── dev └── css └── style.critical.css /.jshintignore: -------------------------------------------------------------------------------- 1 | js/**.min.js -------------------------------------------------------------------------------- /sass/_theme/.gitignore: -------------------------------------------------------------------------------- 1 | _theme.scss 2 | -------------------------------------------------------------------------------- /sass/vendor/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore -------------------------------------------------------------------------------- /sass/_theme/_variables-site/_variables-site.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules/* 2 | **/bower_components/* -------------------------------------------------------------------------------- /favicon.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /languages/hr.mo: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maliMirkec/_bem/HEAD/languages/hr.mo -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/maliMirkec/_bem/HEAD/screenshot.png -------------------------------------------------------------------------------- /sass/_typography/typography-headings.scss: -------------------------------------------------------------------------------- 1 | h1, h2, h3, h4, h5, h6 { 2 | critical: this; 3 | clear: both; 4 | } 5 | -------------------------------------------------------------------------------- /sass/_variables-site/animations.scss: -------------------------------------------------------------------------------- 1 | $transition-duration--regular: .3s; 2 | $transition-animation--default: ease-out; 3 | -------------------------------------------------------------------------------- /sass/_reset/_reset.scss: -------------------------------------------------------------------------------- 1 | * { 2 | critical: this; 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | -------------------------------------------------------------------------------- /sass/_header/_header.scss: -------------------------------------------------------------------------------- 1 | ._header { 2 | @include fluid-type(padding, $mq-mobile, $mq-wide, $spacing-regular--quarter, $spacing-regular--half); 3 | } 4 | -------------------------------------------------------------------------------- /sass/_footer/elements.scss: -------------------------------------------------------------------------------- 1 | ._footer__info { 2 | @include fluid-type(padding, $mq-mobile, $mq-wide, $spacing-regular--quarter, $spacing-regular--half, 0); 3 | } 4 | -------------------------------------------------------------------------------- /.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "preset": "wordpress", 3 | "fileExtensions": [ ".js" ], 4 | "excludeFiles": [ 5 | "js/**.min.js", 6 | "gulpfile.js", 7 | "_gulp/**.js", 8 | ] 9 | } -------------------------------------------------------------------------------- /sass/_typography/gutenberg-document.scss: -------------------------------------------------------------------------------- 1 | html { 2 | critical: this; 3 | @include fluid-type(font-size, $mq-mobile, $mq-wide, $document-font-size--mobile, $document-font-size); 4 | } 5 | -------------------------------------------------------------------------------- /sass/_variables-site/structure.scss: -------------------------------------------------------------------------------- 1 | $size__site-main: 12; 2 | $size__site-sidebar--wide: 2; 3 | $size__site-sidebar--desktop: 3; 4 | $size__site-sidebar--tablet: 4; 5 | $size__site-sidebar--mobile: 0; -------------------------------------------------------------------------------- /sass/_content/sidebar.scss: -------------------------------------------------------------------------------- 1 | @include mq($from: tablet) { 2 | ._sidebar { 3 | @include fluid-type(padding-left, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /sass/_elements/tables.scss: -------------------------------------------------------------------------------- 1 | table { 2 | @include fluid-type(margin-top margin-bottom, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 3 | margin-left: 0; 4 | margin-bottom: 0; 5 | width: 100%; 6 | } 7 | -------------------------------------------------------------------------------- /gulp/livereload.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var livereload = require('gulp-livereload'); 5 | 6 | gulp.task('css:livereload', function() { 7 | return gulp.src('./style.css') 8 | .pipe(livereload()); 9 | }); 10 | -------------------------------------------------------------------------------- /sass/_mixins/_mixins-master.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | # CSS locks 3 | --------------------------------------------------------------*/ 4 | @import "mixins-css-locks"; 5 | @import "mixins-striped-background"; 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | [*] 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | charset = utf-8 11 | indent_style = space 12 | indent_size = 4 13 | -------------------------------------------------------------------------------- /sass/_footer/sticky-footer.scss: -------------------------------------------------------------------------------- 1 | ._site { 2 | critical: this; 3 | @include flex; 4 | @include direction(column); 5 | min-height: 100vh; 6 | 7 | // sticky footer for logged user 8 | .admin-bar & { 9 | min-height: calc(100vh - 32px); 10 | } 11 | } 12 | 13 | ._content { 14 | @include flexbox(1); 15 | } 16 | -------------------------------------------------------------------------------- /sass/_media/captions.scss: -------------------------------------------------------------------------------- 1 | .wp-caption { 2 | @include fluid-type(margin-bottom, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 3 | max-width: 100%; 4 | } 5 | 6 | .wp-caption-text { 7 | @include fluid-type(margin-bottom, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 8 | text-align: center; 9 | } 10 | -------------------------------------------------------------------------------- /gulp/sass.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var sass = require('gulp-sass'); 5 | var cssimport = require('gulp-cssimport'); 6 | 7 | gulp.task('css:sass', function() { 8 | return gulp.src('./sass/style.scss') 9 | .pipe(sass().on('error', sass.logError)) 10 | .pipe(cssimport()) 11 | .pipe(gulp.dest('./')); 12 | }); 13 | -------------------------------------------------------------------------------- /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 | https://make.wordpress.org/polyglots/teams/ 6 | https://developer.wordpress.org/themes/functionality/localization/ 7 | https://developer.wordpress.org/reference/functions/load_theme_textdomain/ 8 | -------------------------------------------------------------------------------- /sass/_elements/_elements.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | # Lists 3 | --------------------------------------------------------------*/ 4 | @import "lists"; 5 | 6 | /*-------------------------------------------------------------- 7 | # Tables 8 | --------------------------------------------------------------*/ 9 | @import "tables"; -------------------------------------------------------------------------------- /sass/_forms/_forms.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | # Buttons 3 | --------------------------------------------------------------*/ 4 | @import "buttons"; 5 | 6 | /*-------------------------------------------------------------- 7 | # Fields 8 | --------------------------------------------------------------*/ 9 | @import "fields"; -------------------------------------------------------------------------------- /gulp/autoprefixer.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var autoprefixer = require('gulp-autoprefixer'); 5 | 6 | gulp.task('css:autoprefix', function() { 7 | return gulp.src('./*.css') 8 | .pipe(autoprefixer({ 9 | browsers: ['last 5 versions'], 10 | cascade: false 11 | })) 12 | .pipe(gulp.dest('./')); 13 | }); 14 | -------------------------------------------------------------------------------- /sass/_footer/_footer.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | # Elements 3 | --------------------------------------------------------------*/ 4 | @import "elements"; 5 | 6 | /*-------------------------------------------------------------- 7 | # Sticky footer 8 | --------------------------------------------------------------*/ 9 | @import "sticky-footer"; -------------------------------------------------------------------------------- /gulp/minify.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var cleanCSS = require('gulp-clean-css'); 5 | var rename = require('gulp-rename'); 6 | 7 | gulp.task('css:minify', function() { 8 | return gulp.src('./dev/css/**/*.css') 9 | .pipe(cleanCSS()) 10 | .pipe(rename({ 11 | suffix: '.min' 12 | })) 13 | .pipe(gulp.dest('./dist/css/')); 14 | }); 15 | -------------------------------------------------------------------------------- /gulp/sequence.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var gulpSequence = require('gulp-sequence'); 5 | 6 | gulp.task('sequence:dist', gulpSequence('css:sass', 'css:critical', 'css:autoprefix', 'css:minify')); 7 | 8 | gulp.task('sequence:dev', gulpSequence('css:sass', 'css:critical')); 9 | 10 | gulp.task('sequence:all', gulpSequence('sequence:dev', 'sequence:dist')); 11 | -------------------------------------------------------------------------------- /inc/bem-post-edit-link.php: -------------------------------------------------------------------------------- 1 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /layouts/content-sidebar.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Theme Name: _bem 3 | * 4 | * Layout: Content-Sidebar 5 | * 6 | * Learn more: https://developer.wordpress.org/themes/basics/template-files/ 7 | */ 8 | 9 | .content-area { 10 | float: left; 11 | margin: 0 -25% 0 0; 12 | width: 100%; 13 | } 14 | .site-main { 15 | margin: 0 25% 0 0; 16 | } 17 | .site-content .widget-area { 18 | float: right; 19 | overflow: hidden; 20 | width: 25%; 21 | } 22 | .site-footer { 23 | clear: both; 24 | width: 100%; 25 | } -------------------------------------------------------------------------------- /layouts/sidebar-content.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Theme Name: _bem 3 | * 4 | * Layout: Sidebar-Content 5 | * 6 | * Learn more: https://developer.wordpress.org/themes/basics/template-files/ 7 | */ 8 | 9 | .content-area { 10 | float: right; 11 | margin: 0 0 0 -25%; 12 | width: 100%; 13 | } 14 | .site-main { 15 | margin: 0 0 0 25%; 16 | } 17 | .site-content .widget-area { 18 | float: left; 19 | overflow: hidden; 20 | width: 25%; 21 | } 22 | .site-footer { 23 | clear: both; 24 | width: 100%; 25 | } -------------------------------------------------------------------------------- /gulp/critical.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var criticalCss = require('gulp-critical-css'); 5 | var stripCssComments = require('gulp-strip-css-comments'); 6 | var removeEmptyLines = require('gulp-remove-empty-lines'); 7 | 8 | gulp.task('css:critical', function() { 9 | return gulp.src('./style.css') 10 | .pipe(criticalCss()) 11 | .pipe(stripCssComments({ 12 | 'preserve': false 13 | })) 14 | .pipe(removeEmptyLines()) 15 | .pipe(gulp.dest('./dev/css')); 16 | }); 17 | -------------------------------------------------------------------------------- /sass/_content/_content.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | # Elements 3 | --------------------------------------------------------------*/ 4 | @import "elements"; 5 | 6 | /*-------------------------------------------------------------- 7 | # Layout 8 | --------------------------------------------------------------*/ 9 | @import "layout"; 10 | 11 | /*-------------------------------------------------------------- 12 | # Sidebar 13 | --------------------------------------------------------------*/ 14 | @import "sidebar"; -------------------------------------------------------------------------------- /sass/_media/_media.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | ## Reset 3 | --------------------------------------------------------------*/ 4 | @import "reset"; 5 | 6 | /*-------------------------------------------------------------- 7 | ## Captions 8 | --------------------------------------------------------------*/ 9 | @import "captions"; 10 | 11 | /*-------------------------------------------------------------- 12 | ## Galleries 13 | --------------------------------------------------------------*/ 14 | @import "galleries"; -------------------------------------------------------------------------------- /template-parts/menu-static.php: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /sass/_forms/buttons.scss: -------------------------------------------------------------------------------- 1 | button, 2 | input[type="button"], 3 | input[type="reset"], 4 | input[type="submit"] { 5 | @include fluid-type(padding, $mq-mobile, $mq-wide, $spacing-regular--quarter, $spacing-regular--half); 6 | // @include font-size(1); 7 | line-height: 1; 8 | border: 1px solid; 9 | height: $input-height; 10 | border-color: $color__border-button; 11 | background: $color__background-button; 12 | color: $color__text-button; 13 | 14 | &:hover { 15 | cursor: pointer; 16 | border-color: $color__border-button-hover; 17 | } 18 | 19 | &:active, 20 | &:focus { 21 | border-color: $color__border-button-focus; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /sass/_typography/typography-copy.scss: -------------------------------------------------------------------------------- 1 | dfn, cite, em, i { 2 | font-style: italic; 3 | } 4 | 5 | pre { 6 | background: $color__background-pre; 7 | font-family: $font__pre; 8 | max-width: 100%; 9 | overflow: auto; 10 | } 11 | 12 | pre { 13 | critical: this; 14 | white-space: pre-wrap; 15 | } 16 | 17 | code, kbd, tt, var { 18 | font-family: $font__code; 19 | } 20 | 21 | abbr, acronym { 22 | border-bottom: 1px dotted $color__border-abbr; 23 | cursor: help; 24 | } 25 | 26 | mark, ins { 27 | background: $color__background-ins; 28 | text-decoration: none; 29 | } 30 | 31 | big { 32 | font-size: 125%; 33 | } 34 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "underscores-bem", 3 | "description": "BEMified underscores theme template.", 4 | "version": "0.10.0", 5 | "main": "index.js", 6 | "authors": [ 7 | "maliMirkec " 8 | ], 9 | "license": "MIT", 10 | "keywords": [ 11 | "bem", 12 | "underscores", 13 | "wordpress" 14 | ], 15 | "homepage": "https://github.com/maliMirkec/_bem", 16 | "ignore": [ 17 | "**/.*", 18 | "node_modules", 19 | "bower_components", 20 | "test", 21 | "tests" 22 | ], 23 | "devDependencies": { 24 | "cita-flex": "latest", 25 | "normalize-css": "latest", 26 | "sass-mq": "latest" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /searchform.php: -------------------------------------------------------------------------------- 1 | 9 | 14 | -------------------------------------------------------------------------------- /inc/wpcom.php: -------------------------------------------------------------------------------- 1 | '', 22 | 'border' => '', 23 | 'text' => '', 24 | 'link' => '', 25 | 'url' => '', 26 | ); 27 | } 28 | } 29 | add_action( 'after_setup_theme', '_s_wpcom_setup' ); 30 | -------------------------------------------------------------------------------- /sass/_variables-site/typography.scss: -------------------------------------------------------------------------------- 1 | /* 2 | see gutenberg-config 3 | if custom fonts used, define it here 4 | */ 5 | $default-font-size: 16; // without unit 6 | $default-font-size--mobile: 12; // without unit 7 | 8 | $document-font-size: 16px; 9 | $document-font-size--mobile: 14px; 10 | 11 | $font__theme: custom; 12 | $font__body: -apple-system, BlinkMacSystemFont, 13 | "Segoe UI", "Roboto", "Oxygen", 14 | "Ubuntu", "Cantarell", "Fira Sans", 15 | "Droid Sans", "Helvetica Neue", sans-serif; 16 | $font__headings: $font__body; 17 | $font__forms: $font__body; 18 | 19 | /* see gutenberg-config */ 20 | $font__pre: "Courier 10 Pitch", Courier, monospace; 21 | $font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; 22 | -------------------------------------------------------------------------------- /gulp/bump.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | var bump = require('gulp-bump'); 5 | 6 | // Will patch the version 7 | gulp.task('bump:patch', function() { 8 | return gulp.src(['./package.json', 'bower.json']) 9 | .pipe(bump()) 10 | .pipe(gulp.dest('./')); 11 | }); 12 | 13 | // Will patch the version 14 | gulp.task('bump:minor', function() { 15 | return gulp.src(['./package.json', 'bower.json']) 16 | .pipe(bump({ 17 | type: 'minor' 18 | })) 19 | .pipe(gulp.dest('./')); 20 | }); 21 | 22 | // Will patch the version 23 | gulp.task('bump:major', function() { 24 | return gulp.src(['./package.json', 'bower.json']) 25 | .pipe(bump({ 26 | type: 'major' 27 | })) 28 | .pipe(gulp.dest('./')); 29 | }); 30 | -------------------------------------------------------------------------------- /sass/_content/elements.scss: -------------------------------------------------------------------------------- 1 | ._content { 2 | @include fluid-type(padding, $mq-mobile, $mq-wide, $spacing-regular--quarter, $spacing-regular--half); 3 | 4 | img { 5 | critical: this; 6 | height: 100%; 7 | } 8 | } 9 | 10 | ._content__footer { 11 | @include fluid-type(margin-top, $mq-mobile, $mq-wide, $spacing-regular--quarter, $spacing-regular--half); 12 | } 13 | 14 | ._post-navigation__item:empty { 15 | critical: this; 16 | display: none; 17 | } 18 | 19 | ._content__edit-link { 20 | critical: this; 21 | clear: both; 22 | display: inline-block; 23 | } 24 | 25 | ._content__meta-time { 26 | ._content__meta-time + & { 27 | @include fluid-type(margin-left, $mq-mobile, $mq-wide, $spacing-regular--quarter, $spacing-regular--half); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /inc/bem-post-links.php: -------------------------------------------------------------------------------- 1 | ul, 17 | li > ol { 18 | margin-bottom: 0; 19 | @include fluid-type(margin-left, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 20 | } 21 | 22 | dt { 23 | font-weight: bold; 24 | } 25 | 26 | dd { 27 | @include fluid-type(margin-bottom, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 28 | margin-top: 0; 29 | margin-right: 0; 30 | margin-left: 0; 31 | } 32 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'); 4 | 5 | var requireDir = require('require-dir'); 6 | var gulpSequence = require('gulp-sequence'); 7 | 8 | requireDir('./gulp'); 9 | 10 | gulp.task('default:dev', ['sequence:dev']); 11 | 12 | gulp.task('watch:dev', function() { 13 | gulp.watch('./sass/**/*.scss', function() { 14 | gulpSequence('css:sass', 'css:critical', 'css:livereload')(function (err) { 15 | if (err) console.log(err) 16 | }); 17 | }); 18 | }); 19 | 20 | gulp.task('default:dist', ['sequence:dist']); 21 | 22 | gulp.task('watch:dist', function() { 23 | gulp.watch('./sass/**/*.scss', function() { 24 | gulpSequence('css:sass', 'css:critical', 'css:autoprefix', 'css:minify', 'css:livereload')(function (err) { 25 | if (err) console.log(err) 26 | }); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /sass/_mixins/mixins-striped-background.scss: -------------------------------------------------------------------------------- 1 | @function makeStripedBackground($direction: to bottom, $steps: 10, $color1: Tomato, $color2: Gold) { 2 | $stripes: ''; 3 | $jump: 100 / $steps; 4 | 5 | $lastColor: $color2; 6 | 7 | @if $steps % 2 == 1 { 8 | $lastColor: $color1; 9 | } 10 | 11 | @for $i from 0 through $steps - 1 { 12 | $percent1: $i * $jump; 13 | $percent2: ($i + 1) * $jump; 14 | 15 | @if $i % 2 == 0 { 16 | $stripes: $stripes + $color1 + ' ' + $percent1 + '%' + ', ' + $color1 + ' ' + $percent2 + '%'; 17 | } @else { 18 | $stripes: $stripes + $color2 + ' ' + $percent1 + '%' + ', ' + $color2 + ' ' + $percent2 + '%'; 19 | } 20 | 21 | @if $i != ($steps - 1) { 22 | $stripes: $stripes + ', '; 23 | } 24 | } 25 | 26 | @return linear-gradient($direction, #{$stripes}); 27 | } 28 | -------------------------------------------------------------------------------- /template-parts/menu-toggle.php: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /codesniffer.ruleset.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | A custom set of code standard rules to check for WordPress themes. 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /sass/_a11y/_accessibility.scss: -------------------------------------------------------------------------------- 1 | /* Text meant only for screen readers. */ 2 | .screen-reader-text { 3 | critical: this; 4 | clip: rect(1px, 1px, 1px, 1px); 5 | position: absolute !important; 6 | height: 1px; 7 | width: 1px; 8 | overflow: hidden; 9 | 10 | &:focus { 11 | critical: this; 12 | background-color: $color__background-screen; 13 | border-radius: 3px; 14 | box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 15 | clip: auto !important; 16 | color: $color__text-screen; 17 | display: block; 18 | // @include font-size(0.875); 19 | font-weight: bold; 20 | height: auto; 21 | left: 5px; 22 | line-height: normal; 23 | padding: 15px 23px 14px; 24 | text-decoration: none; 25 | top: 5px; 26 | width: auto; 27 | z-index: 100000; /* Above WP toolbar. */ 28 | } 29 | } 30 | 31 | /* Do not show the outline on the skip link target. */ 32 | #content[tabindex="-1"]:focus { 33 | critical: this; 34 | outline: 0; 35 | } 36 | -------------------------------------------------------------------------------- /inc/extras.php: -------------------------------------------------------------------------------- 1 | get_setting( 'blogname' )->transport = 'postMessage'; 15 | $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; 16 | $wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage'; 17 | } 18 | add_action( 'customize_register', '_bem_customize_register' ); 19 | 20 | /** 21 | * Binds JS handlers to make Theme Customizer preview reload changes asynchronously. 22 | */ 23 | function _bem_customize_preview_js() { 24 | wp_enqueue_script( '_bem_customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true ); 25 | } 26 | add_action( 'customize_preview_init', '_bem_customize_preview_js' ); 27 | -------------------------------------------------------------------------------- /js/skip-link-focus-fix.js: -------------------------------------------------------------------------------- 1 | /** 2 | * File skip-link-focus-fix.js. 3 | * 4 | * Helps with accessibility for keyboard only users. 5 | * 6 | * Learn more: https://git.io/vWdr2 7 | */ 8 | ( function() { 9 | var isWebkit = navigator.userAgent.toLowerCase().indexOf( 'webkit' ) > -1, 10 | isOpera = navigator.userAgent.toLowerCase().indexOf( 'opera' ) > -1, 11 | isIe = navigator.userAgent.toLowerCase().indexOf( 'msie' ) > -1; 12 | 13 | if ( ( isWebkit || isOpera || isIe ) && document.getElementById && window.addEventListener ) { 14 | window.addEventListener( 'hashchange', function() { 15 | var id = location.hash.substring( 1 ), 16 | element; 17 | 18 | if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) { 19 | return; 20 | } 21 | 22 | element = document.getElementById( id ); 23 | 24 | if ( element ) { 25 | if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) { 26 | element.tabIndex = -1; 27 | } 28 | 29 | element.focus(); 30 | } 31 | }, false ); 32 | } 33 | })(); 34 | -------------------------------------------------------------------------------- /sass/_variables-site/colors.scss: -------------------------------------------------------------------------------- 1 | $color__background-body: #fff; 2 | $color__background-screen: #f1f1f1; 3 | $color__background-hr: #ccc; 4 | $color__background-button: #e6e6e6; 5 | $color__background-pre: #eee; 6 | $color__background-ins: #fff9c0; 7 | 8 | $color__text-screen: #1c1c1c; 9 | $color__text-screen-light: #6c6c6c; 10 | $color__text-input: $color__text-screen-light; 11 | $color__text-input-hover: #151515; 12 | $color__text-input-focus: #111; 13 | $color__text-button: #111; 14 | $color__text-main: #404040; 15 | $color__text-warning: Gold; 16 | $color__text-error: Tomato; 17 | 18 | $color__link: royalblue; 19 | $color__link-visited: lighten($color__link, 10%); 20 | $color__link-hover: darken($color__link, 20%); 21 | $color__link-active: $color__link-hover; 22 | 23 | $color__border-button: #ccc #ccc #bbb; 24 | $color__border-button-hover: #ccc #bbb #aaa; 25 | $color__border-button-focus: #aaa #bbb #bbb; 26 | $color__border-input: #ccc; 27 | $color__border-abbr: #666; 28 | $color__border-comment: #ccc; 29 | 30 | $color__header-menu: #fff; 31 | -------------------------------------------------------------------------------- /inc/jetpack.php: -------------------------------------------------------------------------------- 1 | 'main', 20 | 'render' => '_bem_infinite_scroll_render', 21 | 'footer' => 'page', 22 | ) ); 23 | 24 | // Add theme support for Responsive Videos. 25 | add_theme_support( 'jetpack-responsive-videos' ); 26 | } 27 | add_action( 'after_setup_theme', '_bem_jetpack_setup' ); 28 | 29 | /** 30 | * Custom render function for Infinite Scroll. 31 | */ 32 | function _bem_infinite_scroll_render() { 33 | while ( have_posts() ) { 34 | the_post(); 35 | if ( is_search() ) : 36 | get_template_part( 'template-parts/content', 'search' ); 37 | else : 38 | get_template_part( 'template-parts/content', get_post_format() ); 39 | endif; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /sass/_variables-site/_variables-site.scss: -------------------------------------------------------------------------------- 1 | /*-------------------------------------------------------------- 2 | # Colors 3 | --------------------------------------------------------------*/ 4 | @import "colors"; 5 | 6 | /*-------------------------------------------------------------- 7 | # Typography 8 | --------------------------------------------------------------*/ 9 | @import "typography"; 10 | 11 | /*-------------------------------------------------------------- 12 | # Structure 13 | --------------------------------------------------------------*/ 14 | @import "structure"; 15 | 16 | /*-------------------------------------------------------------- 17 | # Spacing 18 | --------------------------------------------------------------*/ 19 | @import "spacing"; 20 | 21 | /*-------------------------------------------------------------- 22 | # Animations 23 | --------------------------------------------------------------*/ 24 | @import "animations"; 25 | 26 | /*-------------------------------------------------------------- 27 | # Media queries 28 | --------------------------------------------------------------*/ 29 | @import "media-queries"; 30 | -------------------------------------------------------------------------------- /page.php: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 |
19 | 20 | 32 | 33 |
34 |
35 | 36 | ", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/maliMirkec/_bem/issues" 22 | }, 23 | "homepage": "https://github.com/maliMirkec/_bem#readme", 24 | "devDependencies": { 25 | "bower": "^1.8.0", 26 | "gulp": "latest", 27 | "gulp-autoprefixer": "latest", 28 | "gulp-bump": "latest", 29 | "gulp-clean-css": "latest", 30 | "gulp-critical-css": "github:malimirkec/gulp-critical-css", 31 | "gulp-cssimport": "latest", 32 | "gulp-livereload": "^3.8.1", 33 | "gulp-remove-empty-lines": "latest", 34 | "gulp-rename": "latest", 35 | "gulp-sass": "latest", 36 | "gulp-sequence": "latest", 37 | "gulp-strip-css-comments": "latest", 38 | "require-dir": "latest" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /template-parts/content-search.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
> 13 |
14 | ', esc_url( get_permalink() ) ), '' ); ?> 15 | 16 | 17 |
18 | 19 |
20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 |
28 | 29 |
30 |
31 | -------------------------------------------------------------------------------- /single.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 | 15 | 19 | 20 |
    21 |
    • 22 |
    • 23 |
24 | 25 | 33 | 34 |
35 |
36 | 37 | 11 | 12 |
> 13 |
14 | ', '' ); ?> 15 |
16 | 17 |
18 | '
' . esc_html__( 'Pages:', '_bem' ), 23 | 'after' => '
', 24 | ) ); 25 | ?> 26 |
27 | 28 |
29 | "', '"', false ) 35 | ), 36 | '
', 37 | '
' 38 | ); 39 | ?> 40 |
41 |
42 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | === _bem === 2 | 3 | Contributors: automattic 4 | Tags: translation-ready, custom-background, theme-options, custom-menu, post-formats, threaded-comments 5 | 6 | Requires at least: 4.0 7 | Tested up to: 4.4.2 8 | Stable tag: 1.0.0 9 | License: GPLv2 or later 10 | License URI: http://www.gnu.org/licenses/gpl-2.0.html 11 | 12 | A starter theme called _bem, or underscores. 13 | 14 | == Description == 15 | 16 | Hi. I'm a starter theme called _bem, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for. 17 | 18 | == Installation == 19 | 20 | 1. In your admin panel, go to Appearance > Themes and click the Add New button. 21 | 2. Click Upload and Choose File, then select the theme's .zip file. Click Install Now. 22 | 3. Click Activate to use your new theme right away. 23 | 24 | == Frequently Asked Questions == 25 | 26 | = Does this theme support any plugins? = 27 | 28 | _bem includes support for Infinite Scroll in Jetpack. 29 | 30 | == Changelog == 31 | 32 | = 1.0 - May 12 2015 = 33 | * Initial release 34 | 35 | == Credits == 36 | 37 | * Based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc., [GPLv2 or later](https://www.gnu.org/licenses/gpl-2.0.html) 38 | * normalize.css http://necolas.github.io/normalize.css/, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, [MIT](http://opensource.org/licenses/MIT) 39 | -------------------------------------------------------------------------------- /404.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 | 15 |
16 |
17 |

18 |
19 | 20 |
21 |

22 |
23 | 24 |
25 |
26 |
27 | 28 |
29 |
30 | 31 | '; 35 | 36 | if(get_previous_posts_link()) { 37 | $bem_pagination .= '
' . get_previous_posts_link() . '
'; 38 | 39 | } 40 | 41 | if(get_next_posts_link()) { 42 | $bem_pagination .= '
' . get_next_posts_link() . '
'; 43 | 44 | } 45 | 46 | $bem_pagination .= ''; 47 | } 48 | 49 | echo $bem_pagination; 50 | } 51 | -------------------------------------------------------------------------------- /sass/_forms/fields.scss: -------------------------------------------------------------------------------- 1 | label { 2 | display: block; 3 | } 4 | 5 | input[type="text"], 6 | input[type="email"], 7 | input[type="url"], 8 | input[type="password"], 9 | input[type="search"], 10 | input[type="number"], 11 | input[type="tel"], 12 | input[type="range"], 13 | input[type="date"], 14 | input[type="month"], 15 | input[type="week"], 16 | input[type="time"], 17 | input[type="datetime"], 18 | input[type="datetime-local"], 19 | input[type="color"], 20 | textarea, 21 | select { 22 | @include fluid-type(padding, $mq-mobile, $mq-wide, $spacing-regular--quarter, $spacing-regular--half); 23 | // @include font-size(1); 24 | line-height: 1.3; 25 | color: $color__text-input; 26 | border: 1px solid $color__border-input; 27 | width: 100%; 28 | display: block; 29 | box-sizing: border-box; 30 | 31 | &:hover { 32 | critical: this; 33 | color: $color__text-input-hover; 34 | } 35 | 36 | &:focus { 37 | critical: this; 38 | color: $color__text-input-focus; 39 | } 40 | } 41 | 42 | input[type="text"], 43 | input[type="email"], 44 | input[type="url"], 45 | input[type="password"], 46 | input[type="search"], 47 | input[type="number"], 48 | input[type="tel"], 49 | input[type="range"], 50 | input[type="date"], 51 | input[type="month"], 52 | input[type="week"], 53 | input[type="time"], 54 | input[type="datetime"], 55 | input[type="datetime-local"], 56 | input[type="color"], 57 | select { 58 | critical: this; 59 | height: $input-height; 60 | } 61 | 62 | textarea { 63 | height: $input-height--double; 64 | } 65 | -------------------------------------------------------------------------------- /sass/_variables-site/media-queries.scss: -------------------------------------------------------------------------------- 1 | // To enable support for browsers that do not support @media queries, 2 | // (IE <= 8, Firefox <= 3, Opera <= 9) set $mq-responsive to false 3 | // Create a separate stylesheet served exclusively to these browsers, 4 | // meaning @media queries will be rasterized, relying on the cascade itself 5 | $mq-responsive: true; 6 | 7 | // Breakpoints 8 | $mq-mobile: 320px; 9 | $mq-tablet: 780px; 10 | $mq-desktop: 980px; 11 | $mq-wide: 1200px; 12 | 13 | // Name your breakpoints in a way that creates a ubiquitous language 14 | // across team members. It will improve communication between 15 | // stakeholders, designers, developers, and testers. 16 | $mq-breakpoints: ( 17 | mobile: $mq-mobile, 18 | tablet: $mq-tablet, 19 | desktop: $mq-desktop, 20 | wide: $mq-wide 21 | ); 22 | 23 | // Define the breakpoint from the $mq-breakpoints list that should 24 | // be used as the target width when outputting a static stylesheet 25 | // (i.e. when $mq-responsive is set to 'false'). 26 | $mq-static-breakpoint: desktop; 27 | 28 | // If you want to display the currently active breakpoint in the top 29 | // right corner of your site during development, add the breakpoints 30 | // to this list, ordered by width, e.g. (mobile, tablet, desktop). 31 | // $mq-show-breakpoints: (mobile, tablet, desktop, wide); 32 | 33 | /*-------------------------------------------------------------- 34 | # Media queries 35 | --------------------------------------------------------------*/ 36 | @import "./bower_components/sass-mq/_mq.scss"; 37 | -------------------------------------------------------------------------------- /search.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 | 15 | 17 | 18 |
19 |

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

20 |
21 | 22 | 42 | 43 |
44 |
45 | 46 | 'Small', 'inline' => 'small')); 23 | // $init['style_formats_merge'] = true; 24 | 25 | return $init; 26 | } 27 | 28 | add_filter('tiny_mce_before_init', '_bem_tinymce'); 29 | 30 | /** 31 | * Load custom fonts 32 | */ 33 | // function load_custom_fonts_frontend() { 34 | // echo ''; 35 | // echo ''; 36 | // } 37 | // 38 | // add_action('wp_head', 'load_custom_fonts_frontend'); 39 | // add_action('admin_head', 'load_custom_fonts_frontend'); -------------------------------------------------------------------------------- /sass/_media/reset.scss: -------------------------------------------------------------------------------- 1 | .page-content .wp-smiley, 2 | .entry-content .wp-smiley, 3 | .comment-content .wp-smiley { 4 | border: none; 5 | margin-bottom: 0; 6 | margin-top: 0; 7 | padding: 0; 8 | } 9 | 10 | /* Make sure embeds and iframes fit their containers. */ 11 | embed, 12 | iframe, 13 | object { 14 | critical: this; 15 | max-width: 100%; 16 | } 17 | 18 | [src*=".jpg"], 19 | [src*=".jpeg"], 20 | [src*=".png"], 21 | [src*=".gif"] { 22 | critical: this; 23 | display: block; 24 | max-width: 100%; 25 | } 26 | 27 | figure { 28 | critical: this; 29 | margin: 0; 30 | width: 100% !important; 31 | 32 | &.aligncenter img { 33 | critical: this; 34 | margin: 0 auto; 35 | } 36 | 37 | &.alignleft img { 38 | critical: this; 39 | margin-right: auto; 40 | } 41 | 42 | &.alignright img { 43 | critical: this; 44 | margin-left: auto; 45 | } 46 | 47 | a { 48 | critical: this; 49 | display: block; 50 | } 51 | } 52 | 53 | img { 54 | @include fluid-type(margin-top margin-bottom, $mq-mobile, $mq-wide, $spacing-regular--quarter, $spacing-regular--half); 55 | 56 | &.aligncenter { 57 | @include fluid-type(margin-top margin-bottom, $mq-mobile, $mq-wide, $spacing-regular--quarter, $spacing-regular--half); 58 | margin-left: auto; 59 | margin-right: auto; 60 | } 61 | 62 | &.alignleft { 63 | critical: this; 64 | margin-right: auto; 65 | } 66 | 67 | &.alignright { 68 | critical: this; 69 | margin-left: auto; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /template-parts/content-none.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 |

15 |
16 | 17 |
18 | 20 | 21 |

Get started here.', '_bem' ), array( 'a' => array( 'href' => array() ) ) ), esc_url( admin_url( 'post-new.php' ) ) ); ?>

22 | 23 | 24 | 25 |

26 | 30 | 31 |

32 | 36 |
37 |
38 | -------------------------------------------------------------------------------- /sass/_comments/_comments.scss: -------------------------------------------------------------------------------- 1 | ._comments__list { 2 | padding: 0; 3 | list-style: none; 4 | } 5 | 6 | ._comments__list-item > ._comments__list-item { 7 | @include fluid-type(padding-left, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 8 | } 9 | 10 | ._comments__article { 11 | @include fluid-type(margin-bottom, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 12 | } 13 | 14 | ._comments__avatar { 15 | display: inline-block; 16 | @include fluid-type(border-radius, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 17 | } 18 | 19 | ._comments__author { 20 | @include flex; 21 | @include flex-item--center; 22 | } 23 | 24 | ._comments__author-name { 25 | @include fluid-type(margin-left margin-right, $mq-mobile, $mq-wide, $spacing-regular--single, $spacing-regular--quarter, 0); 26 | } 27 | 28 | ._comments__author-text { 29 | @include fluid-type(margin-left, $mq-mobile, $mq-wide, $spacing-regular--quarter, $spacing-regular--half, 0); 30 | } 31 | 32 | ._comments__content { 33 | @include fluid-type(padding-left margin-top, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 34 | } 35 | 36 | ._comments__reply-item { 37 | @include fluid-type(padding-left, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 38 | } 39 | 40 | ._comments__content, 41 | ._comments__reply-item { 42 | border-left: 1px dotted $color__border-comment; 43 | } 44 | 45 | ._comments__awaiting-moderation { 46 | color: $color__text-warning; 47 | } 48 | 49 | .comment-respond { 50 | @include fluid-type(margin-bottom, $mq-mobile, $mq-wide, $spacing-regular--half, $spacing-regular, 0); 51 | } 52 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "maxerr": 50, 3 | "bitwise": false, 4 | "camelcase": true, 5 | "curly": true, 6 | "eqeqeq": true, 7 | "forin": true, 8 | "freeze": true, 9 | "immed": false, 10 | "latedef": false, 11 | "newcap": false, 12 | "noarg": true, 13 | "noempty": true, 14 | "nonbsp": true, 15 | "nonew": false, 16 | "plusplus": false, 17 | "quotmark": "single", 18 | "undef": true, 19 | "unused": true, 20 | "strict": true, 21 | "maxparams": false, 22 | "maxdepth": false, 23 | "maxstatements": false, 24 | "maxcomplexity": false, 25 | "maxlen": false, 26 | "varstmt": false, 27 | "asi": false, 28 | "boss": false, 29 | "debug": true, 30 | "eqnull": false, 31 | "esversion": 6, 32 | "moz": false, 33 | "evil": false, 34 | "expr": false, 35 | "funcscope": false, 36 | "globalstrict": true, 37 | "iterator": false, 38 | "lastsemic": false, 39 | "laxbreak": false, 40 | "laxcomma": false, 41 | "loopfunc": false, 42 | "multistr": true, 43 | "noyield": false, 44 | "notypeof": false, 45 | "proto": false, 46 | "scripturl": false, 47 | "shadow": false, 48 | "sub": false, 49 | "supernew": false, 50 | "validthis": false, 51 | "browser": true, 52 | "browserify": false, 53 | "couch": false, 54 | "devel": true, 55 | "dojo": false, 56 | "jasmine": false, 57 | "jquery": false, 58 | "mocha": false, 59 | "mootools": false, 60 | "node": true, 61 | "nonstandard": false, 62 | "phantom": false, 63 | "prototypejs": false, 64 | "qunit": false, 65 | "rhino": false, 66 | "shelljs": false, 67 | "typed": false, 68 | "worker": false, 69 | "wsh": false, 70 | "yui": false, 71 | "globals": {} 72 | } 73 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | _bem 2 | === 3 | 4 | I'm a fork of [_s project](https://github.com/Automattic/_s). 5 | 6 | Just like `_s`, I'm a theme for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for. 7 | 8 | And to provide [`BEM`](https://en.bem.info/) methodology (for most of Wordpress components). 9 | 10 | Read full [blog post]( https://silvestar.codes/articles/bem-wordpress-theme/). 11 | 12 | Intro 13 | -- 14 | 15 | I'm using `BEM` as a `CSS` methodology because `BEM` is easy to understand and easy to use. I know that `BEM` is not easy to implement, so please be kind if you find any inconsistencies and feel free to open [new issue](https://github.com/maliMirkec/_bem/issues/new). 16 | 17 | Installation 18 | -- 19 | 20 | If you want me to be your starter project, clone me into `./wp-content/themes/` folder. It is recommended to rename cloned folder to match new theme name. Also, try to find all occurrences of '_bem' in newly cloned folder and replace it with new theme name. 21 | 22 | Important notes 23 | -- 24 | 25 | Use with caution! This is a still work in progress. There may be unstyled or unfinished areas. If you find some, please open an issue [here](https://github.com/maliMirkec/_bem/issues/new). 26 | 27 | Built using 28 | -- 29 | 30 | * [cita-flex](https://github.com/maliMirkec/cita-flex) 31 | * [System fonts](https://css-tricks.com/snippets/css/system-font-stack/) 32 | * [Gutenberg](http://matejlatin.github.io/Gutenberg/) 33 | * [Sass MQ](http://sass-mq.github.io/sass-mq/) 34 | * [CSS locks](https://css-tricks.com/css-locks/) 35 | * [Critical CSS](https://mscharl.github.io/gulp-critical-css/) 36 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 |
19 | 20 | 24 |
25 |

26 |
27 | 28 | 50 | 51 |
52 |
53 | 54 | 13 | 14 | 15 | 16 | 23 | 24 | 25 | 28 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /sass/_content/layout.scss: -------------------------------------------------------------------------------- 1 | [class*="format-aside"] { 2 | ._content { 3 | critical: this; 4 | @include flex-container; 5 | @include flex-container--wrap; 6 | } 7 | 8 | ._content__wrapper, 9 | ._sidebar { 10 | critical: this; 11 | @include flex-box; 12 | @include flex-box--no-grow; 13 | } 14 | 15 | ._sidebar { 16 | critical: this; 17 | @include flex-container--column; 18 | } 19 | 20 | @include mq($from: tablet) { 21 | ._content__wrapper { 22 | critical: this; 23 | @include flex-basis($size__site-main / ($size__site-main - $size__site-sidebar--tablet), $spacing-regular); 24 | } 25 | 26 | ._sidebar { 27 | critical: this; 28 | @include flex-basis($size__site-main / $size__site-sidebar--tablet, $spacing-regular); 29 | } 30 | } 31 | 32 | @include mq($from: desktop) { 33 | ._content__wrapper { 34 | critical: this; 35 | @include flex-basis($size__site-main / ($size__site-main - $size__site-sidebar--desktop), $spacing-regular); 36 | } 37 | 38 | ._sidebar { 39 | critical: this; 40 | @include flex-basis($size__site-main / $size__site-sidebar--desktop, $spacing-regular); 41 | } 42 | } 43 | 44 | @include mq($from: wide) { 45 | ._content__wrapper { 46 | critical: this; 47 | @include flex-basis($size__site-main / ($size__site-main - $size__site-sidebar--wide), $spacing-regular); 48 | } 49 | 50 | ._sidebar { 51 | critical: this; 52 | @include flex-basis($size__site-main / $size__site-sidebar--wide, $spacing-regular); 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /inc/bem-script-loader-tag.php: -------------------------------------------------------------------------------- 1 | ' . "\n"; 24 | // } 25 | 26 | return $tag; 27 | } 28 | 29 | add_filter( 'script_loader_tag', '_bem_script_loader_tag', 10, 3 ); 30 | 31 | /** 32 | * _bem style loader 33 | * 34 | * @param string $tag Accepts style tag. 35 | * @param array $handle Accepts style name. 36 | * @param integer $src Accepts source type. 37 | * @param integer $src Accepts media. 38 | */ 39 | function _bem_style_loader_tag( $tag, $handle, $src, $media ) { 40 | // The handles of the enqueued styles we want to defer 41 | // $defer_styles = array( 42 | // 'metaslider-responsive-slider', 43 | // 'metaslider-public', 44 | // 'pibfi_pinterest_style' 45 | // ); 46 | // 47 | // if ( in_array( $handle, $defer_styles ) ) { 48 | // if(!$media) { 49 | // $media = 'all'; 50 | // } 51 | // return '' . "\n"; 52 | // } 53 | 54 | return $tag; 55 | } 56 | 57 | add_filter( 'style_loader_tag', '_bem_style_loader_tag', 10, 3 ); 58 | -------------------------------------------------------------------------------- /sass/_mixins/mixins-css-locks.scss: -------------------------------------------------------------------------------- 1 | // ---- 2 | // libsass (v3.3.6) 3 | // ---- 4 | 5 | // ========================================================================= 6 | // 7 | // PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS 8 | // --------------------------------------------------- 9 | // Indrek Paas @indrekpaas 10 | // 11 | // Inspired by Mike Riethmuller's Precise control over responsive typography 12 | // http://madebymike.com.au/writing/precise-control-responsive-typography/ 13 | // 14 | // `strip-unit()` function by Hugo Giraudel 15 | // 16 | // 11.08.2016 emove redundant `&` self-reference 17 | // 31.03.2016 emove redundant parenthesis from output 18 | // 02.10.2015 Add support for multiple properties 19 | // 24.04.2015 Initial release 20 | // 21 | // ========================================================================= 22 | 23 | @mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value, $critical: 'true') { 24 | @each $property in $properties { 25 | @if $critical == 'true' { 26 | critical: this; 27 | } 28 | #{$property}: $min-value; 29 | } 30 | 31 | @media screen and (min-width: $min-vw) { 32 | @each $property in $properties { 33 | @if $critical == 'true' { 34 | critical: this; 35 | } 36 | #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}); 37 | } 38 | } 39 | 40 | @media screen and (min-width: $max-vw) { 41 | @each $property in $properties { 42 | @if $critical == 'true' { 43 | critical: this; 44 | } 45 | #{$property}: $max-value; 46 | } 47 | } 48 | } 49 | 50 | @function strip-unit($value) { 51 | @return $value / ($value * 0 + 1); 52 | } 53 | 54 | @function em($pixels, $context: $default-font-size) { 55 | @return #{$pixels/$context}em; 56 | } 57 | -------------------------------------------------------------------------------- /archive.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
13 |
14 | 15 | 17 | 27 | 28 |
29 | ', '' ); 31 | the_archive_description( '
', '
' ); 32 | ?> 33 |
34 | 35 | 55 | 56 |
57 |
58 | 59 | section and everything up until
6 | * 7 | * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials 8 | * 9 | * @package _bem 10 | */ 11 | 12 | ?> 13 | > 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 26 | 27 | 28 | 29 | 30 | > 31 |
32 | 33 | 34 | 53 | 54 |
55 | -------------------------------------------------------------------------------- /template-parts/content.php: -------------------------------------------------------------------------------- 1 | 11 | 12 |
> 13 |
14 | ', '' ); 17 | } else { 18 | the_title( '

', '

' ); 19 | } 20 | 21 | if ( has_post_thumbnail() ) { 22 | ?> 23 |
24 | 25 | '_post-thumbnail__image' ) ); ?> 26 | 27 |
28 | 32 |
33 | 34 |
35 | 37 |
38 | 39 |
40 | →', '_bem' ), array( 'span' => array( 'class' => array() ) ) ), 47 | the_title( '"', '"', false ) 48 | ) ); 49 | } 50 | 51 | wp_link_pages( array( 52 | 'before' => '
' . esc_html__( 'Pages:', '_bem' ), 53 | 'after' => '
', 54 | ) ); 55 | ?> 56 |
57 | 58 |
59 | 60 |
61 |
62 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Thanks for contributing to `_s` (Underscores) — you rock! 2 | 3 | ## Submitting issues 4 | Before submitting your issue, make sure it has not been discussed earlier. You can search for existing tickets [here](https://github.com/Automattic/_s/search). 5 | 6 | Here are some tips to consider and to help you write a great report: 7 | 8 | * `_s` supports Microsoft Internet Explorer 11 and Edge, as well as the latest two versions of all other major browsers. 9 | * `_s` is backwards compatible with the two versions prior to the current stable version of WordPress. 10 | * `_s` uses HTML5 markup. 11 | * We decided not to include translations [[#50](https://github.com/Automattic/_s/pull/50)] beyond the existing `_s.pot` file, a RTL stylesheet [[#263](https://github.com/Automattic/_s/pull/263)], or editor styles [[#225](https://github.com/Automattic/_s/pull/225)], as they are likely to change during development of an `_s`-based theme. 12 | 13 | ## Contributing code 14 | 15 | Found a bug you can fix? Fantastic! Patches are always welcome. Here's a few tips for crafting a great pull request: 16 | 17 | * Include the purpose of your PR. Be explicit about the issue your PR solves. 18 | * Reference any existing issues that relate to your PR. This allows everyone to easily see all related discussions. 19 | * When submitting a change that affects CSS, please make sure that both SCSS sources and output CSS have been updated equally. 20 | 21 | By contributing code to `_s`, you grant its use under the [GNU General Public License v2 (or later)](http://www.gnu.org/licenses/gpl-2.0.html). 22 | 23 | ## Underscores.me 24 | If your issue is specific to the [Underscores.me](http://underscores.me) website, the [Underscores.me GitHub repo](https://github.com/Automattic/underscores.me) is the right place for you. 25 | 26 | The preferred method of generating a new theme based on `_s` is the [Underscores.me](http://underscores.me) website. If you have an alternative method, such as a shell script, write a blog post about it or host it in a separate repo -- and make sure to mention [@underscoresme](https://twitter.com/underscoresme) in your tweets! 27 | 28 | Want to have your avatar listed as one of the `_s` contributors [here](http://underscores.me/#contribute)? Just make sure you have an email address added to both GitHub and your local Git installation. 29 | -------------------------------------------------------------------------------- /inc/custom-header.php: -------------------------------------------------------------------------------- 1 | 8 | * 9 | * 10 | * 11 | * 12 | * 13 | * @link https://developer.wordpress.org/themes/functionality/custom-headers/ 14 | * 15 | * @package _bem 16 | */ 17 | 18 | /** 19 | * Set up the WordPress core custom header feature. 20 | * 21 | * @uses _bem_header_style() 22 | */ 23 | function _bem_custom_header_setup() { 24 | add_theme_support( 'custom-header', apply_filters( '_bem_custom_header_args', array( 25 | 'default-image' => '', 26 | 'default-text-color' => '000000', 27 | 'width' => 1000, 28 | 'height' => 250, 29 | 'flex-height' => true, 30 | 'wp-head-callback' => '_bem_header_style', 31 | ) ) ); 32 | } 33 | add_action( 'after_setup_theme', '_bem_custom_header_setup' ); 34 | 35 | if ( ! function_exists( '_bem_header_style' ) ) : 36 | /** 37 | * Styles the header image and text displayed on the blog. 38 | * 39 | * @see _bem_custom_header_setup(). 40 | */ 41 | function _bem_header_style() { 42 | $header_text_color = get_header_textcolor(); 43 | 44 | /* 45 | * If no custom options for text are set, let's bail. 46 | * get_header_textcolor() options: Any hex value, 'blank' to hide text. Default: HEADER_TEXTCOLOR. 47 | */ 48 | if ( HEADER_TEXTCOLOR === $header_text_color ) { 49 | return; 50 | } 51 | 52 | // If we get this far, we have custom styles. Let's do this. 53 | ?> 54 | 74 | ._header__submenu-list { 98 | critical: this; 99 | display: block; 100 | } 101 | -------------------------------------------------------------------------------- /js/navigation.js: -------------------------------------------------------------------------------- 1 | /** 2 | * File navigation.js. 3 | * 4 | * Handles toggling the navigation menu for small screens and enables TAB key 5 | * navigation support for dropdown menus. 6 | */ 7 | ( function() { 8 | var container, button, menu, links, subMenus, i, len; 9 | 10 | container = document.getElementById( 'site-navigation' ); 11 | if ( ! container ) { 12 | return; 13 | } 14 | 15 | button = container.getElementsByTagName( 'button' )[0]; 16 | if ( 'undefined' === typeof button ) { 17 | return; 18 | } 19 | 20 | menu = container.getElementsByTagName( 'ul' )[0]; 21 | 22 | // Hide menu toggle button if menu is empty and return early. 23 | if ( 'undefined' === typeof menu ) { 24 | button.style.display = 'none'; 25 | return; 26 | } 27 | 28 | menu.setAttribute( 'aria-expanded', 'false' ); 29 | if ( -1 === menu.className.indexOf( 'nav-menu' ) ) { 30 | menu.className += ' nav-menu'; 31 | } 32 | 33 | button.onclick = function() { 34 | if ( -1 !== container.className.indexOf( 'toggled' ) ) { 35 | container.className = container.className.replace( ' toggled', '' ); 36 | button.setAttribute( 'aria-expanded', 'false' ); 37 | menu.setAttribute( 'aria-expanded', 'false' ); 38 | } else { 39 | container.className += ' toggled'; 40 | button.setAttribute( 'aria-expanded', 'true' ); 41 | menu.setAttribute( 'aria-expanded', 'true' ); 42 | } 43 | }; 44 | 45 | // Get all the link elements within the menu. 46 | links = menu.getElementsByTagName( 'a' ); 47 | subMenus = menu.getElementsByTagName( 'ul' ); 48 | 49 | // Set menu items with submenus to aria-haspopup="true". 50 | for ( i = 0, len = subMenus.length; i < len; i++ ) { 51 | subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' ); 52 | } 53 | 54 | // Each time a menu link is focused or blurred, toggle focus. 55 | for ( i = 0, len = links.length; i < len; i++ ) { 56 | links[i].addEventListener( 'focus', toggleFocus, true ); 57 | links[i].addEventListener( 'blur', toggleFocus, true ); 58 | } 59 | 60 | /** 61 | * Sets or removes .focus class on an element. 62 | */ 63 | function toggleFocus() { 64 | var self = this; 65 | 66 | // Move up through the ancestors of the current link until we hit .nav-menu. 67 | while ( -1 === self.className.indexOf( 'nav-menu' ) ) { 68 | 69 | // On li elements toggle the class .focus. 70 | if ( 'li' === self.tagName.toLowerCase() ) { 71 | if ( -1 !== self.className.indexOf( 'focus' ) ) { 72 | self.className = self.className.replace( ' focus', '' ); 73 | } else { 74 | self.className += ' focus'; 75 | } 76 | } 77 | 78 | self = self.parentElement; 79 | } 80 | } 81 | } )(); 82 | -------------------------------------------------------------------------------- /inc/bem-walker-nav-menu.php: -------------------------------------------------------------------------------- 1 | \n"; 21 | } 22 | 23 | /** 24 | * Start element 25 | * 26 | * @param string $output Accepts output string. 27 | * @param object $item Accepts item object. 28 | * @param integer $depth Accepts depth integer. 29 | * @param array $args Accepts arguments array. 30 | */ 31 | function start_el( &$output, $item, $depth, $args ) { 32 | global $wp_query; 33 | $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; 34 | 35 | $class_names = $value = ''; 36 | 37 | $classes = empty( $item->classes ) ? array() : (array) $item->classes; 38 | 39 | $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) ); 40 | $item_class = $depth > 0 ? '_header__submenu-item' : '_header__menu-item'; 41 | $class_names = ' class="' . $item_class . ' ' . esc_attr( $class_names ) . '"'; 42 | 43 | $output .= $indent . '