From 05c8670de0d888e18409bd05b79dfda62f2ebad1 Mon Sep 17 00:00:00 2001 From: Pedro Reis Date: Thu, 15 Oct 2015 17:24:32 +0100 Subject: [PATCH] General updates --- assets/sass/base/_base.scss | 3 +- assets/sass/base/_fonts.scss | 6 +- assets/sass/base/_forms.scss | 124 ++--- assets/sass/base/_images.scss | 11 + assets/sass/base/_lists.scss | 4 +- assets/sass/components/_alert.scss | 28 ++ assets/sass/components/_buttons.scss | 13 + assets/sass/components/_nav.scss | 22 +- assets/sass/config/_variables.scss | 29 +- assets/sass/utils/_helpers.scss | 11 +- functions.php | 87 ++-- functions/example.php | 4 +- gulpfile.js | 6 +- header.php | 1 - js/script.min.js | 8 + js/scripts.min.js | 2 - screenshot.jpg | Bin 0 -> 36894 bytes style.css | 664 +++++++++++++++++++++++++++ styles.css | 2 - templates/template-demo.php | 33 ++ 20 files changed, 929 insertions(+), 129 deletions(-) create mode 100644 assets/sass/components/_alert.scss create mode 100644 js/script.min.js delete mode 100644 js/scripts.min.js create mode 100644 screenshot.jpg create mode 100755 style.css delete mode 100755 styles.css create mode 100644 templates/template-demo.php diff --git a/assets/sass/base/_base.scss b/assets/sass/base/_base.scss index 5e94ee9..6c8c954 100644 --- a/assets/sass/base/_base.scss +++ b/assets/sass/base/_base.scss @@ -1,8 +1,9 @@ body { color: $base-colour; - font-family: $base-font-stack; + font-family: $base-font-family; @include font-size($base-font-size); line-height: $base-line-height; + -webkit-text-size-adjust: none; } h1, diff --git a/assets/sass/base/_fonts.scss b/assets/sass/base/_fonts.scss index aba59cf..f5e3b71 100644 --- a/assets/sass/base/_fonts.scss +++ b/assets/sass/base/_fonts.scss @@ -1,3 +1,3 @@ -// ----------------------------------------------------------------------------- -// This file contains all @font-face declarations, if any. -// ----------------------------------------------------------------------------- \ No newline at end of file +/** + * This file contains all @font-face declarations, if any. + */ \ No newline at end of file diff --git a/assets/sass/base/_forms.scss b/assets/sass/base/_forms.scss index 145d44a..5f9e5e5 100644 --- a/assets/sass/base/_forms.scss +++ b/assets/sass/base/_forms.scss @@ -2,49 +2,59 @@ * Blanket input styles for normalisation */ +*:focus { + outline: 0; +} + input, select, textarea { - background-color: $base-background-colour; - border: solid 1px $base-colour; - border-radius: 0; - color: $base-colour; - line-height: ($base-spacing-unit * 1.5); - height: ($base-spacing-unit * 1.5); - padding: 0 ($base-spacing-unit / 2); - width: 100%; + background-color: $base-background-colour; + border: solid 1px $base-colour; + border-radius: 0; + color: $base-colour; + line-height: ($base-spacing-unit * 1.5); + height: ($base-spacing-unit * 1.5); + padding: 0 ($base-spacing-unit / 2); + width: 100%; } input[type="checkbox"], input[type="radio"] { - background: transparent; - border: 0; - line-height: normal; - height: auto; - width: auto; + background: transparent; + border: 0; + line-height: normal; + height: auto; + width: auto; } input[type="file"] { - line-height: normal; - height: auto; - padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2); + line-height: normal; + height: auto; + padding: ($base-spacing-unit / 4) ($base-spacing-unit / 2); +} + +input[type="submit"] { + -webkit-border-radius: 0; + border-radius: 0; } input[disabled] { - background-color: whitesmoke; - cursor: not-allowed; + background-color: whitesmoke; + cursor: not-allowed; } select { - line-height: normal; - padding: 0; - padding-left: ($base-spacing-unit / 2); + line-height: normal; + padding: 0; + padding-left: ($base-spacing-unit / 2); } textarea { - min-height: ($base-spacing-unit * 4); - overflow: auto; - vertical-align: top; + min-height: ($base-spacing-unit * 4); + overflow: auto; + vertical-align: top; + resize: vertical; } @@ -53,33 +63,33 @@ textarea { */ .form--inline { - .form__group { - display: inline-block; - } + .form__group { + display: inline-block; + } } .checkbox, .radio { - display: block; - padding-left: $base-spacing-unit; - &.inline { - display: inline-block; - } - > input { - float: left; - margin-left: -($base-spacing-unit); - margin-top: 4px; - } + display: block; + padding-left: $base-spacing-unit; + &.inline { + display: inline-block; + } + > input { + float: left; + margin-left: -($base-spacing-unit); + margin-top: 4px; + } } .form__group { - display: block; - margin-bottom: $base-spacing-unit; + display: block; + margin-bottom: $base-spacing-unit; } .form__label { - display: block; - margin-bottom: ($base-spacing-unit / 2); + display: block; + margin-bottom: ($base-spacing-unit / 2); } @@ -91,22 +101,22 @@ textarea { */ .input-group { - position: relative; - > input { - padding: 0 ($base-spacing-unit * 2); - } - .input-group__addon { - line-height: ($base-spacing-unit * 1.5); - height: ($base-spacing-unit * 1.5); - position: absolute; - text-align: center; - top: 0; - width: ($base-spacing-unit * 1.5); - &:first-child { - left: 0; + position: relative; + > input { + padding: 0 ($base-spacing-unit * 2); } - &:last-child { - right: 0; + .input-group__addon { + line-height: ($base-spacing-unit * 1.5); + height: ($base-spacing-unit * 1.5); + position: absolute; + text-align: center; + top: 0; + width: ($base-spacing-unit * 1.5); + &:first-child { + left: 0; + } + &:last-child { + right: 0; + } } - } } diff --git a/assets/sass/base/_images.scss b/assets/sass/base/_images.scss index 0d15998..f6e0746 100644 --- a/assets/sass/base/_images.scss +++ b/assets/sass/base/_images.scss @@ -6,3 +6,14 @@ img { max-width: none; } } + + +/** + * Responsive images + */ + +.is-fluid { + display: block; + width: 100%; + height: auto; +} \ No newline at end of file diff --git a/assets/sass/base/_lists.scss b/assets/sass/base/_lists.scss index 2fccb74..79d9d8f 100644 --- a/assets/sass/base/_lists.scss +++ b/assets/sass/base/_lists.scss @@ -11,6 +11,6 @@ li { } .list--unstyled { - list-style: none; - margin-left: 0; + list-style: none; + margin-left: 0; } \ No newline at end of file diff --git a/assets/sass/components/_alert.scss b/assets/sass/components/_alert.scss new file mode 100644 index 0000000..5ff2319 --- /dev/null +++ b/assets/sass/components/_alert.scss @@ -0,0 +1,28 @@ +.alert { + padding: $base-spacing-unit; + margin-bottom: $base-spacing-unit; + border: 1px solid transparent; + > p, + > ul { + margin-bottom: 0; + } + > p + p { + margin-top: $base-spacing-unit; + } + &.alert--success { + color: $success-colour; + border-color: $success-colour; + } + &.alert--info { + color: $info-colour; + border-color: $info-colour; + } + &.alert--warning { + color: $warning-colour; + border-color: $warning-colour; + } + &.alert--danger { + color: $danger-colour; + border-color: $danger-colour; + } +} \ No newline at end of file diff --git a/assets/sass/components/_buttons.scss b/assets/sass/components/_buttons.scss index afde14d..00ffc00 100644 --- a/assets/sass/components/_buttons.scss +++ b/assets/sass/components/_buttons.scss @@ -5,6 +5,11 @@ display: inline-block; padding: ($base-spacing-unit / 4) $base-spacing-unit; text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + user-select: none; width: auto; transition: all .5s; &::-moz-focus-inner { @@ -17,6 +22,11 @@ color: $brand-colour; border: 1px solid $brand-colour; } + .is-disabled, + &:disabled { + pointer-events: none; + opacity: .65; + } } .btn--inverse { @@ -33,6 +43,9 @@ .btn--block { display: block; width: 100%; + + .btn--block { + margin-top: $base-spacing-unit / 4; + } } .btn--link { diff --git a/assets/sass/components/_nav.scss b/assets/sass/components/_nav.scss index 8aa7ac6..52e267f 100755 --- a/assets/sass/components/_nav.scss +++ b/assets/sass/components/_nav.scss @@ -1,14 +1,14 @@ .nav { - list-style: none; - margin: 0; - > li { - display: inline-block; - margin-right: $base-spacing-unit; - &:last-child { - margin-right: 0; - } - > a { - display: block; + list-style: none; + margin: 0; + > li { + display: inline-block; + margin-right: $base-spacing-unit; + &:last-child { + margin-right: 0; + } + > a { + display: block; + } } - } } \ No newline at end of file diff --git a/assets/sass/config/_variables.scss b/assets/sass/config/_variables.scss index 43ac277..318deb5 100755 --- a/assets/sass/config/_variables.scss +++ b/assets/sass/config/_variables.scss @@ -1,13 +1,28 @@ /** - * Base values + * Colours */ $base-colour: #444; $base-background-colour: #fff; -$base-font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif; -$base-font-size: 16; -$base-line-height: 1.5; -$base-spacing-unit: ($base-font-size * $base-line-height) * 1px; + +$brand-colour: #444; // Example +$success-colour: #5CB85C; +$info-colour: $brand-colour; +$warning-colour: #F0AD4E; +$danger-colour: #D9534F; + + +/** + * Typography + */ + +$sans-serif-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; +$serif-font-family: Georgia, "Times New Roman", Times, serif; +$base-font-family: $sans-serif-font-family; + +$base-font-size: 16; +$base-line-height: 1.5; +$base-spacing-unit: ($base-font-size * $base-line-height) * 1px; /** @@ -36,7 +51,7 @@ $grid-gutter: $base-spacing-unit; /** - * Custom variables + * Components */ -$brand-colour: #444; // Example +$border-radius: 3px; \ No newline at end of file diff --git a/assets/sass/utils/_helpers.scss b/assets/sass/utils/_helpers.scss index 41d1c29..a26f8e9 100644 --- a/assets/sass/utils/_helpers.scss +++ b/assets/sass/utils/_helpers.scss @@ -2,6 +2,7 @@ * Clearing and floating */ +.alignleft, .float-left { float: left; img & { @@ -9,7 +10,7 @@ } } - +.alignright, .float-right { float: right; img & { @@ -17,7 +18,7 @@ } } - +.aligncenter, .float-center { display: block; margin: { @@ -39,15 +40,15 @@ * Text aligments */ -.align-left { +.align-text-left { text-align: left; } -.align-right { +.align-text-right { text-align: right; } -.align-center { +.align-text-center { text-align: right; } diff --git a/functions.php b/functions.php index 17cb147..9796dea 100644 --- a/functions.php +++ b/functions.php @@ -1,15 +1,29 @@ 'Header', 'footer' => 'Footer' ]); } -function barebones_nav_menu_args( $args = '' ) { +function barebones_nav_menu_args( $args = '' ) +{ $args['container'] = false; $args['container_class'] = false; $args['menu_id'] = false; $args['items_wrap'] = ''; + return $args; } @@ -86,14 +104,16 @@ add_filter( 'wp_nav_menu_args', 'barebones_nav_menu_args' ); * Email */ -function barebones_mail_from( $email ) { +function barebones_mail_from( $email ) +{ return get_option( 'admin_email' ); } add_filter( 'wp_mail_from', 'barebones_mail_from' ); -function barebones_mail_from_name( $name ) { +function barebones_mail_from_name( $name ) +{ return get_bloginfo( 'name' ); } @@ -105,8 +125,10 @@ add_filter( 'wp_mail_from_name', 'barebones_mail_from_name' ); * Shortcodes ([button] shortcode included) */ -function button_shortcode( $atts, $content = null ) { +function button_shortcode( $atts, $content = null ) +{ $atts['class'] = $atts['class'] ? $atts['class'] : 'btn'; + return '' . $content . ''; } @@ -118,27 +140,30 @@ add_shortcode( 'button', 'button_shortcode' ); * TinyMCE */ -function barebones_mce_buttons_2( $buttons ) { +function barebones_mce_buttons_2( $buttons ) +{ array_unshift( $buttons, 'styleselect' ); $buttons[] = 'hr'; + return $buttons; } add_filter( 'mce_buttons_2', 'barebones_mce_buttons_2' ); -function barebones_tiny_mce_before_init( $settings ) { +function barebones_tiny_mce_before_init( $settings ) +{ $style_formats = [ - /* - * Example - * - [ - 'title' => '', - 'selector' => '', - 'classes' => '' - ] */ + // [ + // 'title' => '', + // 'selector' => '', + // 'classes' => '' + // ] ]; + $settings['style_formats'] = json_encode( $style_formats ); + $settings['style_formats_merge'] = true; + return $settings; } @@ -150,15 +175,9 @@ add_filter( 'tiny_mce_before_init', 'barebones_tiny_mce_before_init' ); * Get image URL for whatever size. */ -function wp_get_attachment_image_url( $id, $size = 'full', $attrs = []) { +function wp_get_attachment_image_url( $id, $size = 'full', $attrs = []) +{ $image = wp_get_attachment_image_src( $id, $size, $attrs ); + return $image[0]; -} - - - -/** - * Custom functions / External files - */ - -require_once( 'functions/example.php' ); \ No newline at end of file +} \ No newline at end of file diff --git a/functions/example.php b/functions/example.php index a814366..69a6c3b 100644 --- a/functions/example.php +++ b/functions/example.php @@ -1 +1,3 @@ - -