framework/sage
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactored CSS framework code: added in default classes, added

Browse Source 
stylesheet_link_tag function, added a no framework option, cleaned up
code
This commit is contained in:
Scott Walkinshaw
2011-07-11 11:56:00 -06:00
parent 12dd0fae09
commit af89a57e7c
3 changed files with 144 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
inc/js/theme-options.js
View File

@@ -2,5 +2,28 @@ jQuery.noConflict();
jQuery(document).ready(function(){ jQuery(document).ready(function(){
var $main = jQuery('#main_class');
var $sidebar = jQuery('#sidebar_class');
var framework = jQuery('.roots_css_frameworks input:checked').val();
var user_main_class = $main.val();
var user_sidebar_class = $sidebar.val();
jQuery('.roots_css_frameworks input').change(function (e) {
var main_class = roots_css_frameworks[this.value].classes.main;
var sidebar_class = roots_css_frameworks[this.value].classes.sidebar;
// if the selected framework was the one originally set, load the original classes instead of the defaults
if (this.value === framework) {
$main.val(user_main_class);
$sidebar.val(user_sidebar_class);
} else {
$main.val(main_class);
$sidebar.val(sidebar_class);
}
$main.siblings('small').children().text(main_class);
$sidebar.siblings('small').children().text(sidebar_class);
});
}); });

36
inc/roots-actions.php
View File

@@ -77,21 +77,21 @@ function roots_get_stylesheets() {
$styles = ''; $styles = '';
if ($roots_css_framework === 'blueprint') { if ($roots_css_framework === 'blueprint') {
$styles .= "<link rel=\"stylesheet\" href=\"$template_uri/css/blueprint/screen.css\">\n"; $styles .= stylesheet_link_tag('/blueprint/screen.css');
} elseif ($roots_css_framework === '960gs_12' || $roots_css_framework === '960gs_16') { } elseif ($roots_css_framework === '960gs_12' || $roots_css_framework === '960gs_16') {
$styles .= "<link rel=\"stylesheet\" href=\"$template_uri/css/960/reset.css\">\n"; $styles .= stylesheet_link_tag('/960/reset.css');
$styles .= "\t<link rel=\"stylesheet\" href=\"$template_uri/css/960/text.css\">\n"; $styles .= stylesheet_link_tag('/960/text.css', 1);
$styles .= "\t<link rel=\"stylesheet\" href=\"$template_uri/css/960/960.css\">\n"; $styles .= stylesheet_link_tag('/960/960.css', 1);
} elseif ($roots_css_framework === '960gs_24') { } elseif ($roots_css_framework === '960gs_24') {
$styles .= "<link rel=\"stylesheet\" href=\"$template_uri/css/960/reset.css\">\n"; $styles .= stylesheet_link_tag('/960/reset.css');
$styles .= "\t<link rel=\"stylesheet\" href=\"$template_uri/css/960/text.css\">\n"; $styles .= stylesheet_link_tag('/960/text.css', 1);
$styles .= "\t<link rel=\"stylesheet\" href=\"$template_uri/css/960/960_24_col.css\">\n"; $styles .= stylesheet_link_tag('/960/960_24_col.css', 1);
} elseif ($roots_css_framework === '1140') { } elseif ($roots_css_framework === '1140') {
$styles .= "<link rel=\"stylesheet\" href=\"$template_uri/css/1140/1140.css\">\n"; $styles .= stylesheet_link_tag('/1140/1140.css');
} elseif ($roots_css_framework === 'adapt') { } elseif ($roots_css_framework === 'adapt') {
$styles .= "<link rel=\"stylesheet\" href=\"$template_uri/css/adapt/master.css\">\n"; $styles .= stylesheet_link_tag('/adapt/master.css');
$styles .= "\t<noscript>\n"; $styles .= "\t<noscript>\n";
$styles .= "\t<link rel=\"stylesheet\" href=\"$template_uri/css/adapt/mobile.css\">\n"; $styles .= stylesheet_link_tag('/adapt/mobile.css', 1);
$styles .= "\t</noscript>\n"; $styles .= "\t</noscript>\n";
} }
@@ -99,17 +99,27 @@ function roots_get_stylesheets() {
$styles .= "\t<link rel=\"stylesheet\" href=\"" . plugins_url(). "/gravityforms/css/forms.css\">\n"; $styles .= "\t<link rel=\"stylesheet\" href=\"" . plugins_url(). "/gravityforms/css/forms.css\">\n";
} }
$styles .= "\t<link rel=\"stylesheet\" href=\"$template_uri/css/style.css\">\n"; $styles .= stylesheet_link_tag('/style.css', 1);
if ($roots_css_framework === 'blueprint') { if ($roots_css_framework === 'blueprint') {
$styles .= "\t<!--[if lt IE 8]><link rel=\"stylesheet\" href=\"$template_uri/css/blueprint/ie.css\"><![endif]-->\n"; $styles .= "\t<!--[if lt IE 8]>" . stylesheet_link_tag('/blueprint/ie.css', 0, false) . "<![endif]-->\n";
} elseif ($roots_css_framework === '1140') { } elseif ($roots_css_framework === '1140') {
$styles .= "\t<!--[if lt IE 8]><link rel=\"stylesheet\" href=\"$template_uri/css/1140/ie.css\"><![endif]-->\n"; $styles .= "\t<!--[if lt IE 8]>" . stylesheet_link_tag('/1140/ie.css', 0, false) . "<![endif]-->\n";
} }
echo $styles; echo $styles;
} }
function stylesheet_link_tag($file, $tabs = 0, $newline = true) {
$i = 0;
$indent = '';
while ($i < $tabs) {
$indent .= "\t";
$i++;
}
return $indent . '<link rel="stylesheet" href="' . get_template_directory_uri() . '/css' . $file . '">' . ($newline ? "\n" : "");
}
function roots_1140_header_before() { function roots_1140_header_before() {
global $roots_options; global $roots_options;
$roots_css_framework = $roots_options['css_framework']; $roots_css_framework = $roots_options['css_framework'];

142
inc/roots-options.php
View File

@@ -43,46 +43,97 @@ function roots_theme_options_add_page() {
} }
add_action('admin_menu', 'roots_theme_options_add_page'); add_action('admin_menu', 'roots_theme_options_add_page');
function roots_css_framework() { global $roots_css_frameworks;
$framework_options = array( $roots_css_frameworks = array(
'blueprint' => array( 'blueprint' => array(
'value' => 'blueprint', 'name' => 'blueprint',
'label' => __('Blueprint CSS', 'roots'), 'label' => __('Blueprint CSS', 'roots'),
), 'classes' => array(
'960gs_12' => array( 'container' => 'span-24',
'value' => '960gs_12', 'main' => 'span-14 append-1',
'label' => __('960gs (12 cols)', 'roots'), 'sidebar' => 'span-8 prepend-1 last'
), )
'960gs_16' => array( ),
'value' => '960gs_16', '960gs_12' => array(
'label' => __('960gs (16 cols)', 'roots'), 'name' => '960gs_12',
), 'label' => __('960gs (12 cols)', 'roots'),
'960gs_24' => array( 'classes' => array(
'value' => '960gs_24', 'container' => 'container_12',
'label' => __('960gs (24 cols)', 'roots'), 'main' => 'grid_7 suffix_1',
), 'sidebar' => 'grid_4'
'1140' => array( )
'value' => '1140', ),
'label' => __('1140', 'roots'), '960gs_16' => array(
), 'name' => '960gs_16',
'adapt' => array( 'label' => __('960gs (16 cols)', 'roots'),
'value' => 'adapt', 'classes' => array(
'label' => __('Adapt.js', 'roots'), 'container' => 'container_16',
), 'main' => 'grid_9 suffix_1',
); 'sidebar' => 'grid_6'
)
),
'960gs_24' => array(
'name' => '960gs_24',
'label' => __('960gs (24 cols)', 'roots'),
'classes' => array(
'container' => 'container_24',
'main' => 'grid_15 suffix_1',
'sidebar' => 'grid_8'
)
),
'1140' => array(
'name' => '1140',
'label' => __('1140', 'roots'),
'classes' => array(
'container' => 'container',
'main' => 'sevencol',
'sidebar' => 'fourcol last'
)
),
'adapt' => array(
'name' => 'adapt',
'label' => __('Adapt.js', 'roots'),
'classes' => array(
'container' => 'container_12 clearfix',
'main' => 'grid_7 suffix_1',
'sidebar' => 'grid_4'
)
),
'none' => array(
'name' => 'none',
'label' => __('None', 'roots'),
'classes' => array(
'container' => '',
'main' => '',
'sidebar' => ''
)
)
);
return apply_filters('roots_css_framework', $framework_options); // Write the above array of CSS frameworks into a script tag
function roots_add_frameworks_object_script() {
global $roots_css_frameworks;
$json = json_encode($roots_css_frameworks);
?>
<script>
var roots_css_frameworks = <?php echo $json; ?>;
</script>
<?php
} }
add_action('admin_head', 'roots_add_frameworks_object_script');
function roots_get_default_theme_options() { function roots_get_default_theme_options() {
global $roots_css_frameworks;
$default_framework = 'blueprint';
$default_framework_settings = $roots_css_frameworks[$default_framework];
$default_theme_options = array( $default_theme_options = array(
'css_framework' => 'blueprint', 'css_framework' => $default_framework,
'container_class' => 'span-24', 'container_class' => $default_framework_settings['classes']['container'],
'main_class' => 'span-14 append-1', 'main_class' => $default_framework_settings['classes']['main'],
'sidebar_class' => 'span-8 prepend-1 last', 'sidebar_class' => $default_framework_settings['classes']['sidebar'],
'google_analytics_id' => '', 'google_analytics_id' => '',
'clean_menu' => true, 'clean_menu' => true,
'fout_b_gone' => false 'fout_b_gone' => false
); );
return apply_filters('roots_default_theme_options', $default_theme_options); return apply_filters('roots_default_theme_options', $default_theme_options);
@@ -93,6 +144,7 @@ function roots_get_theme_options() {
} }
function theme_options_render_page() { function theme_options_render_page() {
global $roots_css_frameworks;
?> ?>
<div class="wrap"> <div class="wrap">
<?php screen_icon(); ?> <?php screen_icon(); ?>
@@ -110,13 +162,13 @@ function theme_options_render_page() {
<tr valign="top" class="radio-option"><th scope="row"><?php _e('CSS Grid Framework', 'roots'); ?></th> <tr valign="top" class="radio-option"><th scope="row"><?php _e('CSS Grid Framework', 'roots'); ?></th>
<td> <td>
<fieldset><legend class="screen-reader-text"><span><?php _e('CSS Grid Framework', 'roots'); ?></span></legend> <fieldset class="roots_css_frameworks"><legend class="screen-reader-text"><span><?php _e('CSS Grid Framework', 'roots'); ?></span></legend>
<?php <?php
foreach (roots_css_framework() as $css_framework) { foreach ($roots_css_frameworks as $css_framework) {
?> ?>
<div class="layout"> <div class="layout">
<label class="description"> <label class="description">
<input type="radio" name="roots_theme_options[css_framework]" value="<?php echo esc_attr($css_framework['value']); ?>" <?php checked($roots_options['css_framework'], $css_framework['value']); ?> /> <input type="radio" name="roots_theme_options[css_framework]" value="<?php echo esc_attr($css_framework['name']); ?>" <?php checked($roots_options['css_framework'], $css_framework['name']); ?> />
<span> <span>
<?php echo $css_framework['label']; ?> <?php echo $css_framework['label']; ?>
</span> </span>
@@ -134,7 +186,7 @@ function theme_options_render_page() {
<fieldset><legend class="screen-reader-text"><span><?php _e('#main CSS Classes', 'roots'); ?></span></legend> <fieldset><legend class="screen-reader-text"><span><?php _e('#main CSS Classes', 'roots'); ?></span></legend>
<input type="text" name="roots_theme_options[main_class]" id="main_class" value="<?php echo esc_attr($roots_options['main_class']); ?>" class="regular-text" /> <input type="text" name="roots_theme_options[main_class]" id="main_class" value="<?php echo esc_attr($roots_options['main_class']); ?>" class="regular-text" />
<br /> <br />
<small class="description"><?php printf( __('Default: %s', 'roots'), $roots_default_options['main_class']); ?></small> <small class="description"><?php _e('Default:', 'roots'); ?> <span><?php echo $roots_default_options['main_class']; ?></span></small>
</fieldset> </fieldset>
</td> </td>
</tr> </tr>
@@ -144,7 +196,7 @@ function theme_options_render_page() {
<fieldset><legend class="screen-reader-text"><span><?php _e('#sidebar CSS Classes', 'roots'); ?></span></legend> <fieldset><legend class="screen-reader-text"><span><?php _e('#sidebar CSS Classes', 'roots'); ?></span></legend>
<input type="text" name="roots_theme_options[sidebar_class]" id="sidebar_class" value="<?php echo esc_attr($roots_options['sidebar_class']); ?>" class="regular-text" /> <input type="text" name="roots_theme_options[sidebar_class]" id="sidebar_class" value="<?php echo esc_attr($roots_options['sidebar_class']); ?>" class="regular-text" />
<br /> <br />
<small class="description"><?php printf( __('Default: %s', 'roots'), $roots_default_options['sidebar_class']); ?></small> <small class="description"><?php _e('Default:', 'roots'); ?> <span><?php echo $roots_default_options['sidebar_class']; ?></span></small>
</fieldset> </fieldset>
</td> </td>
</tr> </tr>
@@ -207,20 +259,14 @@ function theme_options_render_page() {
} }
function roots_theme_options_validate($input) { function roots_theme_options_validate($input) {
global $roots_css_frameworks;
$output = $defaults = roots_get_default_theme_options(); $output = $defaults = roots_get_default_theme_options();
if (isset($input['css_framework']) && array_key_exists($input['css_framework'], roots_css_framework())) if (isset($input['css_framework']) && array_key_exists($input['css_framework'], $roots_css_frameworks))
$output['css_framework'] = $input['css_framework']; $output['css_framework'] = $input['css_framework'];
// set the value of the main container class depending on the selected grid framework // set the value of the main container class depending on the selected grid framework
switch ($input['css_framework']) { $output['container_class'] = $roots_css_frameworks[$output['css_framework']]['classes']['container'];
case 'blueprint': $output['container_class'] = 'span-24'; break;
case '960gs_12': $output['container_class'] = 'container_12'; break;
case '960gs_16': $output['container_class'] = 'container_16'; break;
case '960gs_24': $output['container_class'] = 'container_24'; break;
case '1140': $output['container_class'] = 'container'; break;
case 'adapt': $output['container_class'] = 'container_12 clearfix'; break;
}
if (isset($input['main_class'])) if (isset($input['main_class']))
$output['main_class'] = $input['main_class']; $output['main_class'] = $input['main_class'];