【bootstrap】ブログテーマをtwitter bootstrapに適用させた話

はてなブログのテーマってまだあまりレスポンシブデザインで作成している所は少ないのか、探し切れていないのか分からないが(検索しづらい...)、今時レスポンシブデザインに対応してないとかないよなぁと思い、かといって一から作るのはさすがにナンセンスですねと。。。

ということで、twitter bootstrap風のテーマを作ることにしました。

調査

はてなブログの独自CSSは64KBまでしかアップできない

全ての要素を適用させるのは困難
minify,不必要な属性を削除する必要がある

準備

gem
- sassをインストール
npm
- gruntをインストール
- grunt-contrib-cssminをインストール
- grunt-contrib-sassをインストール
- grunt-uncssをインストール

Gruntfile.js

'use strict';

var gruntConfig = {
  sass: {
    dist:{
      options:{
        style:'compressed'
      },
      files:{
        'blog.css':'mixin.scss'
      }
    }
  },
  uncss: {
    dist: {
      options: {
        ignore: [/entry-content/, /page-archive/, /page-about/, /#zenback/,
          /blog-description/, /entry-see-more/, /hatena-bookmark-count/, /search-module-input/, 
          /search-module-button/, /comment-user-id/, /hatena-id-link/],
        stylesheets: ['blog.css']
      },
      files: {
        'blog.css' : ['hatena.html']
      }
    }
  },
  cssmin: {
    options: {
      shorthandCompacting: true,
      roundingPrecision: -1
    },
    target: {
      files: {
        'blog.min.css' : ['blog.css', 'header.css']
      }
    }
  }
};


module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig(gruntConfig);

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-uncss');
  grunt.registerTask('default', ['sass', 'uncss', 'cssmin']);
};