Slick Slider inside Table Display

Today I ran into an issue when trying to use Slick Slider within an element that has display: table. The layout broke almost completely and in all browsers on small width viewports. Simply adding table-layout: fixed; to the element that has display: table solved it.

Bootstrap Dropdown on Hover

An unofficial Bootstrap plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience. http://cameronspear.com/demos/bootstrap-hover-dropdown/

https://github.com/CWSpear/bootstrap-hover-dropdown

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);
  }
}

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

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);
    }
  }
}

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%; 
}

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; }

Remove indentation for Gumby Fancy Tiles

A great feature of the Gumby Framework is its ability to easilycreate responsive tiles. They call those Fancy Tiles. For example you can use the following mixin to create a equally distributed grid with 5 columns on a desktop, 3 on a tablet and 2 on a mobile screen.

ul.fancy { 
  @include fancytiles (5,3,2);
}

What kept bugging me with that is that each tile gets a padding on both its left and the right side. This makes the entire Fancy Tiles show up indented compared to the columns of Gumby’s regular grid system.

To get rid of that indentation and align my Fancy Grids with the rest of the page layout I forked _fancytiles.scss and called it _fancytilesoutside.scss. Opposed to the original Fancy Tiles it must be applied to the container of your tiles, eg the <ul> tag if your <li>s are supposed to be tiled. Triggering the outer elmenet allows us to apply a negative margin on the left and right side that is of the exact size as the tile’s padding, thus pulling the entire tile set outside. Then the styling of the tiles themselves happens by applying the original fancytiles scss to every direct descendant of the container.

@function divide-cols($colnum) {
  @return 100%/$colnum;
}

@mixin fancytilesoutside($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: 0px, $medium-break: $tablet-device-width, $large-break: $row-max-width) {
  margin-left: -$gutter / 2;
  margin-right: -$gutter / 2;
  > *{
    // These styles apply to all shift-columns
    display: inline-block;
    float: left;
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;

    // IE8 fallback
    width: divide-cols($mobile-columns);

    @include respond("min-width: #{$small-break}") {
      width: divide-cols($mobile-columns);
    }

    @include respond("min-width: #{$medium-break}") {
      width: divide-cols($tablet-columns);
    }

    @include respond("min-width: #{$large-break}") {
      width: divide-cols($desktop-columns);
    }
  }
}

Update

The following mixin will work with later versions of Gumby (my current project runs on 2.6.3). The renaming of the mixin to fancytilesunindented is only for aesthetic reasons.

@function divide-cols($colnum) {
  @return 100%/$colnum;
}

@mixin fancytilesunindented($desktop-columns, $tablet-columns: $desktop-columns, $mobile-columns: 1, $small-break: 0px, $medium-break: $tablet-device-width, $large-break: $row-max-width) {
  clear: both;
  margin-left: -$gutter / 2;
  margin-right: -$gutter / 2;
  overflow: hidden;
  > *{
    // These styles apply to all shift-columns
    display: inline-block;
    float: left;
    padding-left: $gutter / 2;
    padding-right: $gutter / 2;

    // IE8 fallback
    width: divide-cols($mobile-columns);

    @include respond("min-width: #{$small-break}") {
      width: divide-cols($mobile-columns);
    }

    @include respond("min-width: #{$medium-break}") {
      width: divide-cols($tablet-columns);
    }

    @include respond("min-width: #{$large-break}") {
      width: divide-cols($desktop-columns);
    }
  }
}

Sticky Footer with Omega Theme for Drupal

As I keeping going back and searching the d.o. issue queue for those few lines constantly I’ll put them up here for future reference:

html, body {
  height: 100%;
}

#page {
  min-height: 100%;
  position: relative;
}

#section-content {
  padding-bottom: XX;
}

#section-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: XX;
}

Pure CSS, no template changes needed, works with Omega right out of the box.

Origin:

Styling input type=”search”…

When you use a input of type search and try to style it via CSS you might go crazy upon all your fancy decoration not displaying properly. Even custom borders won’t, at least on webkit browsers.

It’s easy to fix by applying the appearance property on the selector matching your input field. This will destroy the browser’s default styling:

-moz-appearance: none;
-webkit-appearance: none;

Update: and the button to reset the form value can be removed, too:

input[type=search]::-webkit-search-cancel-button {
     display: none;
}

CSS :active Pseudo-Klasse im mobilen Safari anzeigen

Apples mobiler Safari respektiert Angaben zum CSS-Status :active nicht. Mit folgender Zeile JavaScript kann man ihn aber überzeugen, dies doch zu tun:

document.addEventListener("touchstart", function() {},false);

Ist das erledigt will man wahrscheinlich auch die standardmäßige Tap-Highlight-Hinterlegung entfernen, das geht dann mit diesem CSS-Schnipsel:

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
}

Continue reading

Facebook-Social-Plugins flexibel bzw. responsive machen

Nachdem ich mich entschieden habe, hier mal die Facebook-Comments einzusetzen hat mich enorm gestört, dass das Plugin standardmäßig eine fixe Breite verlangt und somit der Responsiveness des Twitter Bootstrap Themes in die Quere kommt. Mit dieser Zeile CSS werden die Facebook-Comments flexibel!

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}

Update
Neuerdings funktioniert (hier) das o.g. Snippet nicht mehr. Dafür aber dieses von einer weiteren Antwort im selben Thread bei Stackoverflow:

.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
    width: 100% !important;
}

Quelle: http://stackoverflow.com/questions/6500424/is-it-possible-to-set-a-fluid-width-for-facebooks-social-plugins
Continue reading