Using Foundation’s Block Grid Mixin within the Bootstrap CSS Framework (Updated)

Here’s an adaption of Zurb Foundation’s handy Block Grid Mixin adapted to the LESS preprocessor in order to use it within Bootstrap.

Update
I’ve added a mixin that supports a shorthand syntax that enables you to simply create a block grid writing something like .make-block-grid(1,2,4,8);

// # Block Grid Mixin
//
// Technique adapted from Foundation 5 for Bootstrap 3
//
// # Example Usage
//
// To produce a grid of 2 items per row on an extra-small screen, 3 items
// on a small screen, 4 items on a medium screen and 6 items per row on large screen:
//
// ul.gallery {
//   .make-block-grid-container();
//   > li {
//     .make-xs-block-grid(2);
//     .make-sm-block-grid(3);
//     .make-md-block-grid(4);
//     .make-lg-block-grid(6);
//   }
// }

// Or, in a quicker way with the shorthand syntax:
//   ul.gallery {
//     .make-block-grid(2,3,4,6)
//   }

//Mixins for Block Grids
.make-block-grid-container (@spacing: @grid-gutter-width) {
  list-style: none;
  padding: 0;
  margin-left: (@spacing / -2);
  margin-right: (@spacing / -2);
  &:extend(.clearfix all);
  > * {
    margin-bottom: @spacing;
  }
  > li {
    &:before {
      content: none !important;
    }
  }
}
.make-xs-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  float: left;
  width: percentage(1 / @blocks);
  &:nth-of-type(1n) { clear: none; }
  &:nth-of-type(@{blocks}n+1) { clear: both; }
}
.make-sm-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage(1 / @blocks);
    &:nth-of-type(1n) { clear: none; }
    &:nth-of-type(@{blocks}n+1) { clear: both; }
  }
}
.make-md-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage(1 / @blocks);
    &:nth-of-type(1n) { clear: none; }
    &:nth-of-type(@{blocks}n+1) { clear: both; }
  }
}
.make-lg-block-grid (@blocks; @spacing: @grid-gutter-width) {
  position: relative;
  min-height: 1px;
  padding-left: (@spacing / 2);
  padding-right: (@spacing / 2);
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage(1 / @blocks);
    &:nth-of-type(1n) { clear: none; }
    &:nth-of-type(@{blocks}n+1) { clear: both; }
  }
}

// Make one mixin for all sizes so we don't have to call 4 mixins every time we use block grids
.make-block-grid (@cols-xs, @cols-sm, @cols-md, @cols-lg) {
  .make-block-grid-container();
  >li {
    .make-xs-block-grid(@cols-xs);
    .make-sm-block-grid(@cols-sm);
    .make-md-block-grid(@cols-md);
    .make-lg-block-grid(@cols-lg);
  }
}

Deleting Drupal Fields programmatically implementing hook_update_N()

Say we’d like to get rid of a Drupal Field that has the machine name field_wein_texte and our module that’s supposed to manage this is called kx_deployment. Here’s how the kx_deployment.install needs to look like:

<?php
/**
* Implements hook_update_N().
* Managing Field Deletions programmatically
* Note: field_delete_fields() removes fields globally, to detach a field from an entity use field_delete_instance()
*/
function kx_deployment_update_7001() {
  $fields_to_delete = array(
    'field_wein_texte',
  );
  foreach ($fields_to_delete as $field_name) {
    field_delete_field($field_name);
    watchdog('kx_deployment', 'Deleted the :field_name field from all content type instances.', array(':field_name' => $field_name));
  }
}
// The fields aren't really deleted until the purge function runs, ordinarily
// during cron.  Count the number of fields we need to purge, and add five in
// case a few other miscellaneous fields are in there somehow.
if(isset($fields_to_delete)) {
  field_purge_batch(count($fields_to_delete) + 5);
}
?>

Source: http://data.agaric.com/deleting-drupal-fields-programmatically-so-change-field-type-features

Shopware 5 Theming 101

First things first:

  1. In the Theme Manager in the backend add a new theme that inherits from Responsive
  2. It will be saved to themes/Frontend/Mytheme
  3. To add your own stylesheets to your theme put a file called all.less here: themes/Frontend/Mytheme/frontend/_public/src/less/all.less. It will automatically be compiled by Shopware’s own LESS processor
  4. To add your own scripts to your theme put them in themes/Frontend/Mytheme/frontend/_public/src/js/ and them to the $javascript array in themes/Frontend/Mytheme/Theme.php (snippet below)
  5. To immediately see your custom scripts and styles disable compiler cashing and CSS and JS compression in the settings of the Theme Manager

Adding a JavaScript file to your Shopware 5 Theme:

<?php
/**
 * Javascript files which will be used in the theme
 *
 * @var array
 */
protected $javascript = array(

    // Third party plugins / libraries
    'src/js/app.js',
);

htaccess performance boost

# KILL THEM ETAGS
# http://www.askapache.com/htaccess/apache-speed-etags.html
FileETag none

# add entity tag
FileETag MTime Size

# set expires header
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf|woff|eot|svg|ttf)$">
   Header set Expires "access plus 1 year"
</FilesMatch>

<ifModule mod_headers.c> 
Header set Connection keep-alive
</ifModule>

Block Grids for Bootstrap

Thanks to ChrisTM we can have Foundation’s Block Grids in Bootstrap:

Update: For a more semantic and general approach consider using this nifty mixin to create block grids on any desired list element.

// # Block Grid
//
// Technique adapted from Foundation 5 for Bootstrap 3.0.3 to at least 3.3.1.
// https://github.com/zurb/foundation/blob/f755d8704123f86c281ede0b171881e2672f150d/scss/foundation/components/_block-grid.scss
//
// # Example Usage
//
// To produce a grid of 2 items per row on an extra-small screen, and 3 items
// per row on a small screen:
//
//     <div class="block-grid-xs-2 block-grid-sm-3">
//         <div class="block-grid-item">
//             ...
//         </div>
//     </div>

[class*="block-grid-"] {
  display: block;
  margin: -(@grid-gutter-width/2);
  padding: 0;
  .clearfix();
}

.block-grid-item {
  display: inline;
  margin: 0;
  padding: (@grid-gutter-width/2);
  height: auto;
  float: left;
  width: 100%;
  list-style: none;  // for those who like to use `li` elements as block-grid-items
}

.block-grid (@per-row) {
  & > .block-grid-item {
    width: (100%/@per-row);

    @nth-equation: ~"@{per-row}n+1";
    &:nth-of-type(n) { clear: none; }
    &:nth-of-type(@{nth-equation}) { clear: both; }
  }
}

// Recursive loop that produces rules for block grids of @per-row many items
// per row down to 1 many items per row.
.block-grids(@size, @per-row: @grid-columns) when (@per-row > 0) {
  .block-grid-@{size}-@{per-row} { .block-grid(@per-row); }
  .block-grids(@size, (@per-row - 1));
}

.block-grids(xs);
@media (min-width: @screen-sm-min) { .block-grids(sm) }
@media (min-width: @screen-md-min) { .block-grids(md) }
@media (min-width: @screen-lg-min) { .block-grids(lg) }

Source: https://gist.github.com/ChrisTM/8346916#file-block-grid-less

Run a JavaScript only on the First Page Load / only on Succeeding Page loads

On a site I’m currently building I need to do some JavaScript scrolling on every page load, except for the first on (to scroll beyond a huge image slider that I don’t want to be in the way on succeeding page loads.

Note: this example makes use of jquery.cookie Plugin by Klaus Hartl, so make sure you include it, too.

(function ($) {
  $( document ).ready(function() {
    var cookieName = 'firstPageLoad';
    var cookieValue = 1;
    // if the cookie doesn't exist we're on the first page load...
    if (!$.cookie(cookieName)) {
      // and set a cookie that is valid for the entire domain
      $.cookie(cookieName, cookieValue, { path: '/'});      
    } 
    // if the cookie does exist, its (most probably) a succeeding page load...
    else {
      // ... so we want to scroll to the navigation
      $('html, body').animate({
          scrollTop: $("#navigation").offset().top
      }, 1000);    
    }
  }); // document ready
})(jQuery);

Drupal: Insert JavaScript for Every Page except Front Page

Just a quick reminder for myself how to simply load an asset only if a certain condition is true.

In template.php we need to implement template_preprocess_page() check our condition and load our script using drupal_add_js():

<?php
function MYTHEME_preprocess_page(&$vars) {
  // if we're NOT on the front page load a script from the currently active default theme
  if (!$vars['is_front']) {
    $active_theme = drupal_get_path('theme',$GLOBALS['theme']);
    drupal_add_js($active_theme.'/js/notfront.js');
  }
}

Using Node.js modules in your Drupal Themes

As my frontend development workflow gets more and more dependent on Grunt and node.js there are are issues coming up when Drupal tries to parse .info files from theme directories. I’ve had a hard time working around this by putting Gruntfile.js and package.json in a hidden subdirectory of my theme, but this resulted in a lot of broken Grunt tasks (and it’s basically yet another hack because it simply relies on the fact that Drupal doesn’t scan directories starting with a dot).

Continue reading

Resetting the omega Mixin in Bourbon Neat

While having a hard time making automatic rows with Bourbon Neat I stumbled upon this awesome little mixin, thankfully shared by Josh Fry.

It allows you to reset the nth-child margins and clearings, most helpful when you want to create different sized automatic rows at various breakpoints.

I just keep it here for my own future reference:

1.) Set the flexgrid column and gutter in your grid settings:

$fg-column: $column;
$fg-gutter: $gutter;

2.) Save the omega-reset mixin:

@mixin omega-reset($nth) {
  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
  &:nth-child(#{$nth}+1) { clear: none }
}

3.) Use it:

.drupal-features {
  li {  
    @include media($desktop) {
      @include span-columns(4);
      @include omega(3n);
    }
    @include media($medium) {
      // reset the previoulsy set omega(3n) so it won't conflict 
      // with the omega(2n) used at this breakpoint
      @include omega-reset(3n);
      @include span-columns(6);
      @include omega(2n);
    }
  }
}

Keeping your Local Sites after Updating to OS X 10.10 Yosemite

As my iMac is my primary work station I’m always a bit hesitant when it comes to major OS upgrades.

Here are the experiences and issues I had when upgrading form Mavericks (10.9) to Yosemite (10.10).

  1. All important applications run without any problems so far
  2. Homebrew and installed bottles kept on working
  3. Ruby (installed via Rbenv) and installed Gems keep on working
  4. Node.js and installed modules kept on working
  5. My hosts file stayed untouched
  6. MySQL kept on working, including all database data, of course (simply had to start the service again)
  7. Apache Virtual hosts didn’t work anymore, but it was easily fixed be re-including my httpd-vhosts.conf file from httpd.conf
  8. PHP wasn’t enabled anymore, but it was simply fixed by re-including the Apache module from httpd.conf
  9. When trying to access my local virtual hosts I got loads of permission denied errors with the apache log file talking about AH01630: client denied by server configuration. This is caused by Apple updating Apache to 2.4. It’s simply fixed by adding Require all granted to your vhosts. (replaces Order allow,deny and Allow from all from Apache 2.2, see http://httpd.apache.org/docs/2.4/upgrading.html)
  10. SSH-Config and keys kept on working
  11. Drush (installed via Composer) kept on working

So, everything was up and running again within 10 minutes tops after the upgrade \o/

Responsive Sticky Footer with flexible height

Thanks a lot to Galen Gidman for sharing his solution to create Responsive, Flexible-Height Sticky Footers in CSS – works like a charm.

Update
Turned out this causes Firefox and Internet Explorer to ignore max-width: 100% on images. To solve this we need to add table-layout: fixed; to the body tag (CSS below updated).

Markup

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { 
  height: 100%; 
}
body {
  display: table;
  width: 100%;
  /* Fix for Firefox and IE to keep correct max-width behaviour on images: */
  table-layout: fixed;
}
.page-row {
  display: table-row;
  height: 1px;
} 
.page-row-expanded { 
  height: 100%; 
}

Setting up and Using Environments with htaccess

This .htaccess snippet does the following:

  1. Create two environments called staging and development based on the host name
  2. Set up ht authentication only on the stage server (Deny from env=staging)
  3. Rewrite all requests to the main domain (www.mysite.com) if we’re not on either the development nor staging environment and the host doesn’t already equal the main domain
AuthName „Staging Server"
AuthType Basic
AuthUserFile /var/sites/mysite/.htpasswd
AuthGroupFile /dev/null
require valid-user

SetEnvIf Host mysite.klickreflex.com env=staging
SetEnvIf Host mysite.dev env=development

Order Allow,Deny
Allow from all
Deny from env=staging

Satisfy Any

<IfModule mod_rewrite.c>
  RewriteBase /

  RewriteCond %{ENV:env} !development
  RewriteCond %{ENV:env} !staging
  RewriteCond %{HTTP_HOST} !^mysite\.dev$ [NC]
  RewriteCond %{HTTP_HOST} !^www.mysite\.com$ [NC]
  RewriteRule ^(.*)$ http://www.mysite.com [R=301,L]
</IfModule>

On github: https://gist.github.com/klickreflex/779683dcc62a7776dcab

Drupal: Keep EXIF orientation and allow manual cropping of images

Wow, this is more troublesome than expected.

Goal: Let users upload images straight from a camera and manually select an area of the image that should be cropped.

Issue: nearly all modern cameras use EXIF information to tell an images orientation. Drupal image actions ignore this information and all images in landscape format resulting in flipped portrait images. Imagecache Actions module provides an action to rotate images based on EXIF data. But: this doesn’t work if the image was resized to the maximum dimensions straight after the upload. And: it doesn’t play nice with most image cropping modules.

I’ve been fighting this issue for some hours now and have something that seems to work for me. It’s not extensively tested yet, though. Here’s what I came up with:

Modules:

  • ImageMagick instead of GD as Image Toolkit (because GD strips EXIF data)
  • Imagecache Autorotate, part of [Imagecache Actions](Imagecache Autorotate) that provides an Image Action that automatically rotates pictures according to their EXIF orientation
  • EPSA Crop module: EPSA crop was the only cropping module that allowed me to use its after the Autorotate action in my image style preset (I tried at least with manualcrop, imagefield_crop, simplecrop)

In my image style I use the following actions:

  1. Autorotate image based on its EXIF data
  2. EPSA Image Crop, 150×150 (with Aspect Ratio of one, as the resulting image has a square AR)
  3. Scale and Crop, 150×150, scale and crop it even if it wasn’t manually cropped.

Only drawback so far:
EPSA Crop doesn’t show you the cropped image on the thumbnail of the edit page, so users might be confused if their cropping was successful after all.

Originally posted on DrupalAnswers, might be interesting to follow the discussion

Hope this helps others saving some hours of research.

Hover Intent for CSS-only Dropdown Menus

Looking for a way to improve on my pure CSS dropdown menus I found an article by Chris Poteet where he shared his thoughts simulating an hover intent effect by using CSS transitions. The snippet had a big drawback, though: anything that is under the dropdown menu, even when it’s not dropped down, cannot be focused anymore. The solution is to simply not trigger the dropdowns opacity property but it’s visibilty. I forked Chris’ snippet on Codepen with my little change: Pen

The HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="children"><a href="#">About</a>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<p>Text wiht <a href="http://www.wentsch.me/">A</a> and other text.</p>

The CSS

body {
    background-color: #283B4F;
    font: 0.8em arial,sans-serif;
    padding-top: 10px;
}

a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    background-color: #96A4AB;
    padding: 10px;
    -webkit-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

a:hover {
  background-color: #7e919b;
}

ul > li {
    float: left;
    list-style-type: none;
    margin-left: 0;
}

li.children {
    position: relative;
}

li.children a {
  padding-right: 20px;
}

li.children > a:after {
    content: "";
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent;
    position: absolute;
    right: 3px;
    top: 6px;
}

li.children:hover ul {
    visibility: visible;
    position: absolute;
    top: 20px;
    left: 10px;
}

ul ul {
    margin-left: 0;
    padding-left: 0;
    visibility: hidden;
    -webkit-transition: visibility 100ms linear 700ms;
    transition: visibility 100ms linear 700ms;
    position: absolute;
    top: 20px;
    left: 10px;
}

ul ul li {
    float: none;
    margin-left: 0;
    margin-top: 15px;
}

p { clear: both; margin: 5em; }

Generate and display preview images for your PDF files with Drupal

When serving PDF files it’s always nice to show a little preview image of the document.

These are the steps I needed to take to get a preview image of the first page of any uploaded PDF document.

  1. Make sure you have ImageMagick available on your server and that the convert executable can be called from PHP (As my hosting company provides a precompiled version of ImageMagick I only needed to enable the extension by adding extension="imagick.so" to my php.ini)
  2. Install the ImageMagick module for Drupal
  3. Make ImageMagick your default image toolkit and make sure you have set the correct path to ImageMagick’s convert binary on admin/config/media/image-toolkit (for me that is /usr/bin/convert)
  4. Check if ImageMagick works correctly (e.g. Upload an image and check if derivative images are generated without errors)
  5. Install the PDF Preview module for Drupal
  6. Go to admin/config/media/pdfpreview and hit save (change your preview image dimensions if desired, but keep it big, we can later use other presets to display the image). It’s important so save this page, no matter if you changed any setting at all, otherwise the image generation won’t work (see https://www.drupal.org/node/2223677)
  7. Choose the PDF Preview formatter in the display settings of a file field that contains your PDF files and choose your desired image preset.
  8. Done!

Update: Accessing preview images from PDF Preview programmatically

After I was happy with the functionality provided by the modules it turned out I needed to access the preview images from my templates in order to show additional information about the file, such as download links and file size and description. Turns out it’s quite easy using _pdfpreview_create_preview(). Just throw your file object as a parameter and you’ll get the desired preview image of that file returned! Here’s a little snippet that iterates all files of a multi-value file field and outputs each field as a list item with the preview image rendered with an image preset (katalog in this case) and shows the file description below (file links are still missing but easy to implement):

<?php if($field_produkt_kataloge): ?>
  <ul class="field-produkt-kataloge">
    <?php foreach($field_produkt_kataloge as $katalog): ?>
      <li>
        <?php $katalog_preview_url = _pdfpreview_create_preview($katalog);?>
        <?php $katalog_preview_image = theme('image_style', array('style_name' => 'katalog', 'path' => $katalog_preview_url)); ?>
        <?php print $katalog_preview_image; ?>
        <?php print $katalog['description']; ?>
      </li>
    <?php endforeach; ?>
  </ul>
<?php endif; ?>

Drupal Base Theme Mothership breaks Contextual Links

Simple CSS solution. Set the trigger to display: block;:

// Contextual links
.contextual-links-region:hover a.contextual-links-trigger {
  display: block;
 }

Instead of patching mothership as it’s suggested in the source link, I’d recommend doing this in your own subtheme.
As soon as mothership-7.x-3.0 gets a stable release it shouldn’t be needed anymore as it has been committed to dev already.

Source: https://www.drupal.org/node/1677374