Skip to content
Commits on Source (17)
......@@ -6,4 +6,5 @@ group :frontend do
gem 'oily_png', '~> 1.1'
gem 'sass', '~> 3.2.0'
gem 'sass-globbing', '~> 1.1'
gem 'zen-grids', '~> 1.5'
end
......@@ -11,7 +11,20 @@
environment = :development
#environment = :production
# In development, we can turn on the FireSass-compatible debug_info.
# If in development (set above), we can turn on the sourcemap file generation.
# Requires sass 3.3+ and compass 1.0.1+
# Determine version from command line: sass --version && compass --version
sourcemap = false
#sourcemap = true
# Alternative development debugging methods
# If in development (above), we can enable line_comments for FireCompass plugin.
# Requires Firebug plugin and FireCompass plugin
firecompass = false
#firecompass = true
# If in development (above), we can enable debug_info for the FireSass plugin.
# Requires Firebug plugin and Firesass plugin
firesass = false
#firesass = true
......@@ -54,3 +67,11 @@ relative_assets = true
# Pass options to sass. For development, we turn on the FireSass-compatible
# debug_info if the firesass config variable above is true.
sass_options = (environment == :development && firesass == true) ? {:debug_info => true} : {}
# Pass options to sass. For development, we turn on the FireCompass-compatible
# line_comments if the firecompass config variable above is true.
sass_options = (environment == :development && firecompass == true) ? {:line_comments => true} : sass_options
# Pass options to sass. For development and sourcemap variable is true (above),
# then pass the "--sourcemap" option flag to compass/sass.
sass_options = (environment == :development && sourcemap == true) ? {:sourcemap => true} : sass_options
......@@ -34,20 +34,33 @@ example, type "bundle exec compass compile" instead of just "compass compile".
To automatically generate the CSS versions of the scss while you are doing theme
development, you'll need to tell Compass to "watch" the sass directory so that
any time a .scss file is changed it will automatically place a generated CSS
file into your sub-theme's css directory:
any time a .scss file is changed it will automatically generate a CSS file in
your sub-theme's css directory:
bundle exec compass watch <path to your sub-theme's directory>
If you are already in the root of your sub-theme's directory, you can simply
type: bundle exec compass watch
While using generated CSS with Firebug, the line numbers it reports will be
wrong since it will be showing the generated CSS file's line numbers and not the
line numbers of the source Sass files. To correct this problem, you can install
the FireSass plug-in into Firefox and then edit your sub-theme's config.rb file
to set: firesass = true
https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug/
While using generated CSS with Firebug, the line numbers it reports will not
match the .scss file, since it references the generated CSS file's lines, not
the line numbers of the "source" sass files. How then do we debug? Sourcemaps to
the rescue! To find the oringial, newer browsers have support for sourcemap
files (*.map). These files are used by the built-in development tools of newer
browsers to map the generated line to the SCSS source. When in development mode,
Zen can be set to generate sourcemap files. Edit config.rb, and uncomment:
sourcemap=true
Enabling and using sourcemap files (*.map) in your browser
In short, Open Developer tools, go to settings, and enable an option to the
effect of: 'view original sources' or 'Enable CSS source maps'.
* Firefox: https://hacks.mozilla.org/2014/02/live-editing-sass-and-less-in-the-firefox-developer-tools/
* Chrome: https://developer.chrome.com/devtools/docs/css-preprocessors#toc-enabling-css-source-maps
* IE: http://msdn.microsoft.com/en-US/library/ie/dn255007%28v=vs.85%29#source_maps
MOVING YOUR CSS TO PRODUCTION
......
......@@ -353,8 +353,10 @@ img {
max-width: 100%;
height: auto;
@if $legacy-support-for-ie8 {
/* Correct IE 8 not scaling image height when resized. */
width: auto;
.lt-ie9 & {
/* Correct IE 8 not scaling image height when resized. */
width: auto;
}
}
}
......
......@@ -521,6 +521,7 @@ span.field-label {
/* The word "Unpublished" displayed underneath the content. */
.unpublished {
display: block;
height: 0;
overflow: visible;
/* Remove background highlighting from <mark> in normalize. */
......
......@@ -21,7 +21,8 @@ $zen-gutter-width: 20px;
$zen-auto-include-item-base: false;
// $zen-auto-include-flow-item-base: false;
// Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles.
// Suppress this section of CSS for RTL layouts since it contains no CSS that
// needs RTL-specific overrides.
@if $zen-reverse-all-floats == false {
/**
......@@ -71,7 +72,7 @@ $zen-auto-include-item-base: false;
}
}
} // End of @if $zen-reverse-all-floats == true
} // End of @if $zen-reverse-all-floats == false
/**
* Use 3 grid columns for smaller screens.
......
......@@ -29,7 +29,7 @@ function zen_no_wrapper_settings_form(&$display, $layout, $settings) {
$form['layout_settings'] = array(
'#type' => 'fieldset',
'#title' => t('Layout settings'),
'#description' => t('Note: if this setting is used, a wrapper div will be added to accomodate the needed classes.'),
'#description' => t('Note: if this setting is used, a wrapper div will be added to accommodate the needed classes.'),
'#collapsible' => TRUE,
'#collapsed' => TRUE,
);
......
......@@ -24,7 +24,7 @@ if (theme_get_setting('zen_rebuild_registry') && !defined('MAINTENANCE_MODE')) {
* Implements HOOK_theme().
*/
function zen_theme(&$existing, $type, $theme, $path) {
include_once './' . drupal_get_path('theme', 'zen') . '/zen-internals/template.theme-registry.inc';
include_once DRUPAL_ROOT . '/' . drupal_get_path('theme', 'zen') . '/zen-internals/template.theme-registry.inc';
return _zen_theme($existing, $type, $theme, $path);
}
......@@ -127,11 +127,11 @@ function zen_preprocess_html(&$variables, $hook) {
);
// Send X-UA-Compatible HTTP header to force IE to use the most recent
// rendering engine or use Chrome's frame rendering engine if available.
// rendering engine.
// This also prevents the IE compatibility mode button to appear when using
// conditional classes on the html tag.
if (is_null(drupal_get_http_header('X-UA-Compatible'))) {
drupal_add_http_header('X-UA-Compatible', 'IE=edge,chrome=1');
drupal_add_http_header('X-UA-Compatible', 'IE=edge');
}
$variables['skip_link_anchor'] = check_plain(theme_get_setting('zen_skip_link_anchor'));
......@@ -221,8 +221,13 @@ function zen_process_html_tag(&$variables) {
$tag = &$variables['element'];
if ($tag['#tag'] == 'style' || $tag['#tag'] == 'script') {
// Remove redundant type attribute and CDATA comments.
unset($tag['#attributes']['type'], $tag['#value_prefix'], $tag['#value_suffix']);
// Remove redundant CDATA comments.
unset($tag['#value_prefix'], $tag['#value_suffix']);
// Remove redundant type attribute.
if (isset($tag['#attributes']['type']) && $tag['#attributes']['type'] !== 'text/ng-template') {
unset($tag['#attributes']['type']);
}
// Remove media="all" but leave others unaffected.
if (isset($tag['#attributes']['media']) && $tag['#attributes']['media'] === 'all') {
......@@ -254,7 +259,7 @@ function zen_preprocess_page(&$variables, $hook) {
$secondary_links = variable_get('menu_secondary_links_source', 'user-menu');
if ($secondary_links) {
$menus = function_exists('menu_get_menus') ? menu_get_menus() : menu_list_system_menus();
$variables['secondary_menu_heading'] = $menus[$secondary_links];
$variables['secondary_menu_heading'] = isset($menus[$secondary_links]) ? $menus[$secondary_links] : '';
}
else {
$variables['secondary_menu_heading'] = '';
......@@ -621,7 +626,27 @@ function zen_menu_local_task($variables) {
* Implements hook_preprocess_menu_link().
*/
function zen_preprocess_menu_link(&$variables, $hook) {
foreach ($variables['element']['#attributes']['class'] as $key => $class) {
// Normalize menu item classes to be an array.
if (empty($variables['element']['#attributes']['class'])) {
$variables['element']['#attributes']['class'] = array();
}
$menu_item_classes =& $variables['element']['#attributes']['class'];
if (!is_array($menu_item_classes)) {
$menu_item_classes = array($menu_item_classes);
}
// Normalize menu link classes to be an array.
if (empty($variables['element']['#localized_options']['attributes']['class'])) {
$variables['element']['#localized_options']['attributes']['class'] = array();
}
$menu_link_classes =& $variables['element']['#localized_options']['attributes']['class'];
if (!is_array($menu_link_classes)) {
$menu_link_classes = array($menu_link_classes);
}
// Add BEM-style classes to the menu item classes.
$extra_classes = array('menu__item');
foreach ($menu_item_classes as $key => $class) {
switch ($class) {
// Menu module classes.
case 'expanded':
......@@ -630,28 +655,31 @@ function zen_preprocess_menu_link(&$variables, $hook) {
case 'active':
// Menu block module classes.
case 'active-trail':
array_unshift($variables['element']['#attributes']['class'], 'is-' . $class);
$extra_classes[] = 'is-' . $class;
break;
case 'has-children':
array_unshift($variables['element']['#attributes']['class'], 'is-parent');
$extra_classes[] = 'is-parent';
break;
}
}
array_unshift($variables['element']['#attributes']['class'], 'menu__item');
if (empty($variables['element']['#localized_options']['attributes']['class'])) {
$variables['element']['#localized_options']['attributes']['class'] = array();
$menu_item_classes = array_merge($extra_classes, $menu_item_classes);
// Add BEM-style classes to the menu link classes.
$extra_classes = array('menu__link');
if (empty($menu_link_classes)) {
$menu_link_classes = array();
}
else {
foreach ($variables['element']['#localized_options']['attributes']['class'] as $key => $class) {
foreach ($menu_link_classes as $key => $class) {
switch ($class) {
case 'active':
case 'active-trail':
array_unshift($variables['element']['#localized_options']['attributes']['class'], 'is-' . $class);
$extra_classes[] = 'is-' . $class;
break;
}
}
}
array_unshift($variables['element']['#localized_options']['attributes']['class'], 'menu__link');
$menu_link_classes = array_merge($extra_classes, $menu_link_classes);
}
/**
......@@ -674,12 +702,12 @@ function zen_status_messages($variables) {
if (count($messages) > 1) {
$output .= " <ul class=\"messages__list\">\n";
foreach ($messages as $message) {
$output .= ' <li class=\"messages__item\">' . $message . "</li>\n";
$output .= ' <li class="messages__item">' . $message . "</li>\n";
}
$output .= " </ul>\n";
}
else {
$output .= $messages[0];
$output .= reset($messages);
}
$output .= "</div>\n";
}
......
......@@ -22,7 +22,7 @@
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width">
<?php endif; ?>
<meta http-equiv="cleartype" content="on">
<!--[if IEMobile]><meta http-equiv="cleartype" content="on"><![endif]-->
<?php print $styles; ?>
<?php print $scripts; ?>
......
......@@ -22,7 +22,7 @@
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width">
<?php endif; ?>
<meta http-equiv="cleartype" content="on">
<!--[if IEMobile]><meta http-equiv="cleartype" content="on"><![endif]-->
<?php print $styles; ?>
<?php print $scripts; ?>
......
......@@ -8,12 +8,14 @@
*/
?>
<?php print $pane_prefix; ?>
<div class="<?php print $classes; ?>" <?php print $id; ?>>
<div class="<?php print $classes; ?>" <?php print $id; ?> <?php print $attributes; ?>>
<?php print $admin_links; ?>
<?php print render($title_prefix); ?>
<?php if ($title): ?>
<h2<?php print $title_attributes; ?>><?php print $title; ?></h2>
<<?php print $title_heading; ?><?php print $title_attributes; ?>>
<?php print $title; ?>
</<?php print $title_heading; ?>>
<?php endif; ?>
<?php print render($title_suffix); ?>
......