Foundation 4 Grid hack for IE8

Design — Tags: CSS, Foundation, IE — Posted by Starck on June 24, 2013

修改 HTML:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

<!DOCTYPE html>

<html class="no-js">

CSS:

/* The Grid ---------------------- */
.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row.large-collapse .column, 
.lt-ie9 .row.large-collapse .columns { padding: 0; }
.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }
.lt-ie9 .row .row.large-collapse { margin: 0; }
 
.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }
.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }
 
.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }
.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }
 
.lt-ie9 .large-1, 
.lt-ie9 .row .large-1 { width: 8.33333%; }
 
.lt-ie9 .large-2, 
.lt-ie9 .row .large-2 { width: 16.66667%; }
 
.lt-ie9 .large-3, 
.lt-ie9 .row .large-3 { width: 25%; }
 
.lt-ie9 .large-4, 
.lt-ie9 .row .large-4 { width: 33.33333%; }
 
.lt-ie9 .large-5, 
.lt-ie9 .row .large-5 { width: 41.66667%; }
 
.lt-ie9 .large-6, 
.lt-ie9 .row .large-6 { width: 50%; }
 
.lt-ie9 .large-7, 
.lt-ie9 .row .large-7 { width: 58.33333%; }
 
.lt-ie9 .large-8, 
.lt-ie9 .row .large-8 { width: 66.66667%; }
 
.lt-ie9 .large-9, 
.lt-ie9 .row .large-9 { width: 75%; }
 
.lt-ie9 .large-10, 
.lt-ie9 .row .large-10 { width: 83.33333%; }
 
.lt-ie9 .large-11, 
.lt-ie9 .row .large-11 { width: 91.66667%; }
 
.lt-ie9 .large-12,
.lt-ie9 .row .large-12 { width: 100%; }
 
.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }
.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }
.lt-ie9 .row .large-offset-3 { margin-left: 25%; }
.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }
.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }
.lt-ie9 .row .large-offset-6 { margin-left: 50%; }
.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }
.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }
.lt-ie9 .row .large-offset-9 { margin-left: 75%; }
.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }
 
.lt-ie9 .pull-2 { right: 16.66667%; }
.lt-ie9 .pull-3 { right: 25%; }
.lt-ie9 .pull-4 { right: 33.33333%; }
.lt-ie9 .pull-5 { right: 41.66667%; }
.lt-ie9 .pull-6 { right: 50%; }
.lt-ie9 .pull-7 { right: 58.33333%; }
.lt-ie9 .pull-8 { right: 66.66667%; }
.lt-ie9 .pull-9 { right: 75%; }
.lt-ie9 .pull-10 { right: 83.33333%; }
 
.lt-ie9 .push-2 { left: 16.66667%; }
.lt-ie9 .push-3 { left: 25%; }
.lt-ie9 .push-4 { left: 33.33333%; }
.lt-ie9 .push-5 { left: 41.66667%; }
.lt-ie9 .push-6 { left: 50%; }
.lt-ie9 .push-7 { left: 58.33333%; }
.lt-ie9 .push-8 { left: 66.66667%; }
.lt-ie9 .push-9 { left: 75%; }
.lt-ie9 .push-10 { left: 83.33333%; }
 
/* Nicolas Gallagher's micro clearfix */
.lt-ie9 .row { *zoom: 1; }
.lt-ie9 .row:before, .row:after { content: " "; display: table; }
.lt-ie9 .row:after { clear: both; }

/* The Grid ---------------------- */

.lt-ie9 .row { width: 940px; max-width: 100%; min-width: 768px; margin: 0 auto; }

.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }

.lt-ie9 .row.large-collapse .column,

.lt-ie9 .row.large-collapse .columns { padding: 0; }

.lt-ie9 .row .row { width: auto; max-width: none; min-width: 0; margin: 0 -15px; }

.lt-ie9 .row .row.large-collapse { margin: 0; }

.lt-ie9 .column, .lt-ie9 .columns { float: left; min-height: 1px; padding: 0 15px; position: relative; }

.lt-ie9 .column.large-centered, .columns.large-centered { float: none; margin: 0 auto; }

.lt-ie9 [class*="column"] + [class*="column"]:last-child { float: right; }

.lt-ie9 [class*="column"] + [class*="column"].end { float: left; }

.lt-ie9 .large-1,

.lt-ie9 .row .large-1 { width: 8.33333%; }

.lt-ie9 .large-2,

.lt-ie9 .row .large-2 { width: 16.66667%; }

.lt-ie9 .large-3,

.lt-ie9 .row .large-3 { width: 25%; }

.lt-ie9 .large-4,

.lt-ie9 .row .large-4 { width: 33.33333%; }

.lt-ie9 .large-5,

.lt-ie9 .row .large-5 { width: 41.66667%; }

.lt-ie9 .large-6,

.lt-ie9 .row .large-6 { width: 50%; }

.lt-ie9 .large-7,

.lt-ie9 .row .large-7 { width: 58.33333%; }

.lt-ie9 .large-8,

.lt-ie9 .row .large-8 { width: 66.66667%; }

.lt-ie9 .large-9,

.lt-ie9 .row .large-9 { width: 75%; }

.lt-ie9 .large-10,

.lt-ie9 .row .large-10 { width: 83.33333%; }

.lt-ie9 .large-11,

.lt-ie9 .row .large-11 { width: 91.66667%; }

.lt-ie9 .large-12,

.lt-ie9 .row .large-12 { width: 100%; }

.lt-ie9 .row .large-offset-1 { margin-left: 8.33333%; }

.lt-ie9 .row .large-offset-2 { margin-left: 16.66667%; }

.lt-ie9 .row .large-offset-3 { margin-left: 25%; }

.lt-ie9 .row .large-offset-4 { margin-left: 33.33333%; }

.lt-ie9 .row .large-offset-5 { margin-left: 41.66667%; }

.lt-ie9 .row .large-offset-6 { margin-left: 50%; }

.lt-ie9 .row .large-offset-7 { margin-left: 58.33333%; }

.lt-ie9 .row .large-offset-8 { margin-left: 66.66667%; }

.lt-ie9 .row .large-offset-9 { margin-left: 75%; }

.lt-ie9 .row .large-offset-10 { margin-left: 83.33333%; }

.lt-ie9 .pull-2 { right: 16.66667%; }

.lt-ie9 .pull-3 { right: 25%; }

.lt-ie9 .pull-4 { right: 33.33333%; }

.lt-ie9 .pull-5 { right: 41.66667%; }

.lt-ie9 .pull-6 { right: 50%; }

.lt-ie9 .pull-7 { right: 58.33333%; }

.lt-ie9 .pull-8 { right: 66.66667%; }

.lt-ie9 .pull-9 { right: 75%; }

.lt-ie9 .pull-10 { right: 83.33333%; }

.lt-ie9 .push-2 { left: 16.66667%; }

.lt-ie9 .push-3 { left: 25%; }

.lt-ie9 .push-4 { left: 33.33333%; }

.lt-ie9 .push-5 { left: 41.66667%; }

.lt-ie9 .push-6 { left: 50%; }

.lt-ie9 .push-7 { left: 58.33333%; }

.lt-ie9 .push-8 { left: 66.66667%; }

.lt-ie9 .push-9 { left: 75%; }

.lt-ie9 .push-10 { left: 83.33333%; }

/* Nicolas Gallagher's micro clearfix */

.lt-ie9 .row { *zoom: 1; }

.lt-ie9 .row:before, .row:after { content: " "; display: table; }

.lt-ie9 .row:after { clear: both; }

Single Web Page Design

Design — Tags: javascript, jQuery — Posted by Starck on May 17, 2013

jquery
bootstrap javascript
modernizr
plugins.js
- FancyBox
- jQuery.ScrollTo
- array.reverse
SMINT

app.js

(function($){
  $(function(){

    // fancybox
    if($(window).width() >= 768){

      $('a.thumb[href$=.png], a.thumb[href$=.jpg], a.thumb[href$=.gif]').fancybox({
          'titleShow': false
        , 'transitionIn': 'elastic'
        , 'transitionOut': 'elastic'
      });

    // scrolling
    var nav = $('#topbar') // nav element
      , navY = nav.offset().top // default position
      , navHeight = nav.height() * 2 // nav height for calculating offsets
      , navLinks = nav.find('a[href^="#"]') // on-page links in nav
      , pageHeight = $('body').height()
      , sections = $('article[role=main]').find('section').reverse() // reversed set of nav sections
      , scrollPos = $(window).scrollTop(); // where are we on the page?
        $(window).scroll(function(){
          scrollPos = $(this).scrollTop();
          // get the active nav item
          navLinks.removeClass('active');
          if(scrollPos &lt; 30){
            $('a[href=#top]').addClass('active');
            $('body').removeClass('scrolled');
          }else{
            $('body').addClass('scrolled');
            sections.each(function(){
              if(scrollPos + navHeight >= $(this).offset().top){
                navLinks.filter('a[href=#' + $(this).attr('id') + ']').addClass('active');
                return false;
              }
            });
          }
        });

        // scrollTo on nav click
        navLinks.click(function(e){
          e.preventDefault();
          var destination = $( $(this).attr('href') ).offset().top,
            distance;
          // have we taken the nav out of flow? offset by navHeight if so
          if(destination > navY){
            destination -= navHeight;
          }
          // distance to scroll as a percent of total height of page
          distance = Math.abs((scrollPos - destination) / pageHeight);
          // sqrt the distance to compress the difference a bit
          // otherwise, short distances will appear to scroll too fast, long ones too slowly
          // goal is to feel as 'proportional' as possible without actual linearity
          // this is based on a 1s scroll time for the whole page, adjust as needed
          $(window).scrollTo(destination, Math.sqrt(distance) * 1000, {
            easing: 'swing'
            });
        });

        //set active state on domready
        $(window).scroll()
          // update anything that could be affected by image heights
          .load(function(){
            navY = nav.offset().top;
            pageHeight = $('body').height();
          })
          .mousemove(function(evt){
            if(evt.clientY &lt; 30){
              $('body').addClass('trigger-menu');
            }else{
              $('body').removeClass('trigger-menu');
            }
          });
    } // window constraint

  });
})(jQuery);

(function($){

$(function(){

// fancybox

if($(window).width() >= 768){

$('a.thumb[href$=.png], a.thumb[href$=.jpg], a.thumb[href$=.gif]').fancybox({

'titleShow': false

, 'transitionIn': 'elastic'

, 'transitionOut': 'elastic'

});

// scrolling

var nav = $('#topbar') // nav element

, navY = nav.offset().top // default position

, navHeight = nav.height() * 2 // nav height for calculating offsets

, navLinks = nav.find('a[href^="#"]') // on-page links in nav

, pageHeight = $('body').height()

, sections = $('article[role=main]').find('section').reverse() // reversed set of nav sections

, scrollPos = $(window).scrollTop(); // where are we on the page?

$(window).scroll(function(){

scrollPos = $(this).scrollTop();

// get the active nav item

navLinks.removeClass('active');

if(scrollPos < 30){

$('a[href=#top]').addClass('active');

$('body').removeClass('scrolled');

}else{

$('body').addClass('scrolled');

sections.each(function(){

if(scrollPos + navHeight >= $(this).offset().top){

navLinks.filter('a[href=#' + $(this).attr('id') + ']').addClass('active');

return false;

}

});

}

});

// scrollTo on nav click

navLinks.click(function(e){

e.preventDefault();

var destination = $( $(this).attr('href') ).offset().top,

distance;

// have we taken the nav out of flow? offset by navHeight if so

if(destination > navY){

destination -= navHeight;

}

// distance to scroll as a percent of total height of page

distance = Math.abs((scrollPos - destination) / pageHeight);

// sqrt the distance to compress the difference a bit

// otherwise, short distances will appear to scroll too fast, long ones too slowly

// goal is to feel as 'proportional' as possible without actual linearity

// this is based on a 1s scroll time for the whole page, adjust as needed

$(window).scrollTo(destination, Math.sqrt(distance) * 1000, {

easing: 'swing'

});

//set active state on domready

$(window).scroll()

// update anything that could be affected by image heights

.load(function(){

navY = nav.offset().top;

pageHeight = $('body').height();

})

.mousemove(function(evt){

if(evt.clientY < 30){

$('body').addClass('trigger-menu');

}else{

$('body').removeClass('trigger-menu');

}

});

} // window constraint

});

})(jQuery);

The Beauty of Data Visualization

Design — Tags: Data Visualization, Thinking — Posted by Starck on April 18, 2013

數據分析不是去尋找某個答案, 而是讓我們透過數據去想像, 將數字融入內容當中, 成為故事的一部分。

Inspiration 2013-04-01

Design — Tags: Photography — Posted by Starck on April 1, 2013

Flat UI – Web Interface Kit

Design — Tags: CSS, Framework, Interface, UI — Posted by Starck on March 28, 2013

除了 Twitter Bootstrap 和 Zurb Foundation 之外, 我們現在又多了一種選擇 – Flat UI.

2013/04/08 update: 這是基於 Bootstrap 改了 CSS Style 的 theme.

–

Demo
Download from Github
Design by Designmodo

–

Preview

Flat UI

« Previous Page