crosspeaksoftware / scaffolding Goto Github PK
View Code? Open in Web Editor NEWResponsive Design Scaffolding for WordPress
Home Page: https://scaffolding.io
Responsive Design Scaffolding for WordPress
Home Page: https://scaffolding.io
/* CUSTOM GRAVITY FORM STYLES */
.gform_body {
li {
margin-left: 0;
input,
textarea {
padding: .5em !important;
@include border-radius(2px);
@include box-shadow(2px 2px 8px 0px #CCC inset);
border: solid 1px #CCC;
font-size: .9em !important;
color: #555;
}
}
}
We will need to rename the _editor-styles.scss that is imported into editor-styles.scss and .css, as it will cause a conflict in later releases of compass.
So by default all emails sent using the wp_mail functions, such as new users emails, have the default sender name as "WordPress" and the default sender email address as [email protected]
I suggest we add the following to the base_functions file to allow for banded names:
// Update WordPresses wp_mail from address
add_filter( 'wp_mail_from', 'custom_wp_mail_from' );
function custom_wp_mail_from( $original_email_address ){
//Make sure the email is from the same domain
//as your website to avoid being marked as spam.
return get_option('admin_email');
}
// Update WordPresses wp_mail from name
add_filter( 'wp_mail_from_name', 'custom_wp_mail_from_name' );
function custom_wp_mail_from_name( $original_email_from ){
return get_option('blogname');
}
Referance: http://codex.wordpress.org/Function_Reference/wp_mail
We should also discuss how we can keep the admin_email for the site as [email protected] but allow a banded email, exmaple [email protected], to be used.
@jlavoie13 found Sequence.js - http://www.sequencejs.com/
Looks pretty sweet, just need to test
Adapt technique from https://github.com/chrisvanpatten/responsive-recaptcha
Since we are still supporting IE 7 and 8 we should pull out the print style sheet out of the media query and actually add it into the template so it will work with the legacy browsers.
We also need to add/update the html 5 shiv to the newest version and add the print shiv.
//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv-printshiv.min.js
//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.min.js
I have update the following code in one of our project and think we should include and extend it for scaffolding. This is taken from https://github.com/jlong/sass-bootstrap project
// Responsive utilities
@mixin responsive-visibility($parent) {
#{$parent} { display: block !important; }
tr#{$parent} { display: table-row !important; }
th#{$parent},
td#{$parent} { display: table-cell !important; }
}
// [converter] $parent hack
@mixin responsive-invisibility($parent) {
#{$parent},
tr#{$parent},
th#{$parent},
td#{$parent} { display: none !important; }
}
// Device-specific hide/show classes. Written in reverse logic for IE compatibility
@include responsive-invisibility('.mobile-only');
@media only screen and (max-width: 480px) {
@include responsive-visibility('.mobile-only');
}
@include responsive-visibility('.mobile-hide');
@media only screen and (max-width: 480px) {
@include responsive-invisibility('.mobile-hide');
}
@include responsive-invisibility('.tablet-only');
@media only screen and (max-width: 767px) {
@include responsive-visibility('.tablet-only');
}
@include responsive-visibility('.tablet-hide');
@media only screen and (max-width: 767px) {
@include responsive-invisibility('.tablet-hide');
}
The function below doesn't allow http://wordpress.org/plugins/relevanssi/ search plugin from working properly. Don't know if there is a way to have the function and use the plugin. We should at least add a test on the filter to see if yoast is installed before running the filter.
/Filter post with noindex set from serch results/
function SearchFilter($query) {
if ($query->is_search) {
$args = array(array('key' => '_yoast_wpseo_meta-robots-noindex ','value' => '1','compare' => '!='));
$query->set('meta_query', $args);
}
return $query;
}
add_filter('pre_get_posts','SearchFilter');
This is a helpful Query Matt wrote to make sure all post have a value set for the above function to work
INSERT INTO wp_postmeta
(post_id
, meta_key
, meta_value
) (SELECT ID
, '_yoast_wpseo_meta-robots-noindex', 0 FROM wp_posts
WHERE ID
NOT IN (SELECT post_id
FROM wp_postmeta
WHERE meta_key
= '_yoast_wpseo_meta-robots-noindex'))
We should add micro data formatting to the site adding http://schema.org/WebPage to the body of the site.
Example:
<body itemscope itemtype="http://schema.org/WebPage">
Here is an example we can build appon:
http://wordpress.org/support/topic/breadcrumbs-do-not-validate-as-html5?replies=2
RC found this handy function that filters and removes all the height and width attribute on images so it will not overwrite the css size settings. It should be added into the functions files and tested.
Had trouble loading fonts when refreshing the page in ie7&8. This solve the issue
//make sure font stays on refesh in ie7&8
if ($('html').hasClass("lt-ie9")){
$('#scaffolding-stylesheet-css')[0].href=$('#scaffolding-stylesheet-css')[0].href;
}
Add CSS3 transitions: http://codepen.io/dimsemenov/pen/GAIkt
Need to update files to use new version also. http://dimsemenov.com/plugins/magnific-popup/
Not sure if this is related to WP3.5 update, but the field reloads empty when you save a post.
TinyMCE Advanced can be a little cumbersome to configure every time and can occasionally cause issues (ex: can break oembed functionality).
Lets determine what should be in the text editor and add it in a modular way into the theme itself.
Update the sticky footer code to the following and test xbrowser:
html,
body.sticky-footer {
height: 100%;
margin: 0;
}
body.sticky-footer {
#container {
display: table;
width: 100%;
}
#container .footer {
display: table-row;
height: 1px;
overflow: hidden;
}
}
html>/**/body.sticky-footer #container {
height: 100%;
}
/*********************
STICKY FOOTER STYLES
*********************/
html,
body {
height: 100%;
margin: 0;
}
#container {
display: table;
width: 100%;
}
html>/**/body #container {
height: 100%;
}
#container .header,
#content,
#container .footer {
display: table-row;
height: 1px;
overflow: hidden;
}
html>body #content {
height: auto;
}
Adapt from this site - http://www.truvia.com/javascripts/script.js
// Mobile Slideout Nav
$(function(){
$('nav.mobile').hide();
$('.nav-tab, .nav-mask').click(function(e){
var leftval = $('#wrapper').css('left'),
navH = $('nav.mobile').height();
if(leftval == "0px"){
$('nav.mobile').fadeIn('slow');
$('#wrapper')
.css({
'position':'fixed'
})
.addClass('right-shadow')
.animate({
'left':'-88%'
},300);
$('.nav-mask').css('visibility','visible');
}else{
$('nav.mobile').fadeOut('slow');
$('#wrapper')
.css({
'position':'relative'
})
.removeClass('right-shadow')
.animate({
'left':'0'
},300);
$('.nav-mask').css('visibility','hidden');
}
e.preventDefault();
});
window.inputSizeCheck = function(el){
if(typeof el.attr('data-default') != "undefined"){
if (el.attr('data-default').length > 15){
el.css({'font-size':'16px'});
}
if (el.attr('data-default').length > 18){
el.css({'font-size':'14px'});
}
} else {
el.attr('data-default','');
}
}
$("input.search").each(function(){
if($(this).attr('type') != 'text'){
return false;
}
window.inputSizeCheck($(this));
// if (
// $(this).val("");
// }
// console.log((
$(this).val( ($(this).attr('data-default') ==
}).bind('blur',function(){
$(this).val( ($(this).val() == "") ?
});
});
});
Need to test adword plugins for the chance we run ppc on CMS sites
Review the following plugins:
http://wordpress.org/extend/plugins/google-per-page-tracking-code/
Rename the project to something more unique & searchable
Would be great to pay homage to Bones, on which this theme is heavily based.
We need to add the default site map template to the theme. The updated Yoast no index filter should be used to exclude the pages as well as the new filter to add the page attribute to the wp_list_page function.
Update the grid styles in IE7 to add margin-left:-1; so when IE rounds up the grid width % it will keep the last item from wrapping.
We should set up base dropdown styles that work cross browser to speed up development on sites. This should be integrated with the mobile menu style we have adopted.
Set up a custom role for clients allowing them to use more of the standers modules we include but not allowing them as much power as an admin.
Rework the menu styles for slandered drop-down and mobile menu need more specific classes.
Having worked with the http://wordpress.org/plugins/relevanssi/ plugin and found it to not always play nice with other plugins. I feel that we should look into updating the search filter query to make search more then just the title and post content
Also style the search results page in a standard format so it is ready to go with base styles upon installing the base scaffolding theme.
The translations are currently outdated since it is still using the bones translation files and we have modified a lot since then.
Should we update the translation files or should we simply remove the translation code and make scaffolding English only?
We reviewed the plugins we want to suggest to users install with the theme:
Codepress Admin Columns
Email Encoder Bundle - Protect Email Address
Strings Sanitizer
WordPress SEO by Yoast
Relevanssi - A Better Search
WP External Links (nofollow new window seo)
Suggested:
Advanced Custom Fields
Gravity Forms
Text to remove is "This is the 404.php template."
Just adds an extra step for developers to have to remove it on every build.
Our current selector uses the Attribute Contains Selector [name*="value"]. Here is the current code:
//Lightbox - http://dimsemenov.com/plugins/magnific-popup/
$('a[href*=".jpg"], a[href*="jpeg"], a[href*=".png"], a[href*=".gif"], a[href$=".bmp"]').magnificPopup({
type: 'image'
});
The code above will select any tags with an image mime type in the href attribute even if it is in a URL query parameter. This can cause an issue like in the case of the facebook share button, https://developers.facebook.com/docs/plugins/checklist/, if you pass and image parameter in the URL.
If we update the selector to us the Attribute Ends With Selector [name$="value"] selector it should fix this. One issue we might have is if we want to pass URL query parameter with and image link it will disable the light box
//Lightbox - http://dimsemenov.com/plugins/magnific-popup/
$('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"], a[href$=".bmp"]').magnificPopup({
type: 'image'
});
Let me know what you guys think and if there might be a better solution.
Need to added the html 5 shiv include to the header file to make sure all our site are compatible with IE7+.
Bootstrap required respond.js to facilitate IE8 support - should we add in as well? It would allow us to kill the ie.scss stylesheet (unless we want to keep IE7 support an option?)
http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
This method adds a class to all the
function menu_set_dropdown( $sorted_menu_items, $args ) {
$last_top = 0;
foreach ( $sorted_menu_items as $key => $obj ) {
// it is a top lv item?
if ( 0 == $obj->menu_item_parent ) {
// set the key of the parent
$last_top = $key;
} else {
$sorted_menu_items[$last_top]->classes['dropdown'] = 'dropdown';
}
}
return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'menu_set_dropdown', 10, 2 );
http://stackoverflow.com/questions/8448978/wordpress-how-do-i-know-if-a-menu-item-has-children
Creates an incompatibility issue w/ IE7, so it needs to go.
We should update the pagination to include rel='next' and rel='prev' on both the next and previous links and the page numbers that would be next/prev to the current page. This is the suggestion made by google for paginated content with no view all page available, which should work for most cases.
http://googlewebmastercentral.blogspot.com/2012/03/video-about-pagination-with-relnext-and.html
Add documentation, how-to's, explanation for our approach to certain aspects, and advice on how to best utilize the theme
Need to update the index.php with the static page setting check and content.
Test this on IE8 and consider adding into Scaffolding - http://css-tricks.com/NetMag/FluidWidthVideo/demo.php
iCHeck: http://fronteed.com/iCheck/
Better radio and checkbox inputs.
Chosen: http://harvesthq.github.io/chosen/
Better select inputs. (only known issue is it doesn't support mobile devices but don't see this as a big deal)
We need to review the default classes for wordpress items and make sure they are style in the case a client used the Caption or Gallery. We should looks at adding these to the taxonomy styles or in their own scss file.
http://www.wpbeginner.com/wp-themes/default-wordpress-generated-css-cheat-sheet-for-beginners/
The current Push and Pull style we have in the _gird.scss style sheet are not the correct %. We will need to review them and update them accordingly for them to work properly.
Please add the following to the _mixins.scss file to allow for xbrowser transparent background colors:
/*********************
TRANSPARENT BG-COLOR
*********************/
@mixin transparent($color, $alpha) {
$rgba: rgba($color, $alpha);
$ie-hex-str: ie-hex-str($rgba);
background-color: transparent;
background-color: $rgba;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
zoom: 1;
}
styles.css requires forms on line 20 but _forms.scss doesn't exist.
// import forms
@import "forms";
We should use the http://genericons.com/ icon set on the site allowing for easier manipulation and faster development of sites.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.