タグ

ブックマーク / t32k.me (4)

  • 今どきのGruntを使ったフロントエンド開発(HTML/CSS編) - MOL

    SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面(ターミナル)を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt(JavaScript製のタスクランナー)を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの? Gruntの使

    今どきのGruntを使ったフロントエンド開発(HTML/CSS編) - MOL
  • ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL

    俺ももう30だし、夏なんで、CSSフレームワークはじめました。 とりあえず、UIエレメントとか作ってないし、CSSフレームワークとか言いながら、GithubのLanguage Staticsは98.3%、JavaScriptってな感じでGrunt Taskばかり充実してるような感じです、現状。 とりあえず、設計方針としてはマシなCSSを書くことを目標としている。この一年、スマホアプリのHTML/CSSコーディングをやってきたわけだが、度重なるUIの変更に耐えうるCSS、そして肥大化しないCSSとは何かずっと考えていて、特に答えという答えもで見つかっていわけだけど、とりあえずはこうしたほうがBetterなんじゃないかというの自分的に固まってきたので、公開してみた。 てか、最強のCSSなんて存在しないからなっ!! t32k/maple - GitHub ありがちな落とし穴 これを作るにあたって

    ぼくのかんがえたさいきょうのしーえしゅえしゅ - MOL
  • CSSOとgrunt-csso - MOL

    読書の秋、ご勉学の方はいかがでしょうか。 I’m your @t32k. 今日はCSSO (CSS Optimizer) – A CSS minimizer unlike othersの紹介だ。前回のCSSCombは単純にプロパティのソートをしてくれるものだったが、今回のはminimizerだ。 普段はSassの:compressed出力で最後デプロイしてるんだけど、もっとマシなものはないかなーと特には探してはないけど、@cssradarパイセンがCSSOがいいって言ったとか言わないとかあったので調べてみた。 ちなみにSassの:compressedはこんな感じで出力しているらしい。 Compressed style takes up the minimum amount of space possible, having no whitespace except that necessa

    CSSOとgrunt-csso - MOL
  • Sassの親セレクタ参照&について - MOL

    Sassの親セレクター参照の&の話。 Sassでどんどんネストして書いてると「親セレクタ参照してーわー、できるなら親孝行してーわー」ってたまになりますよね。僕はそんなにならないんですけど、一番わかりやすい例としてリンクの擬似クラスがあります。こんな例です。 // SCSS #main { color: black; a { font-weight: bold; &:hover { color: red; } &:visited { color: blue; } } }

    Sassの親セレクタ参照&について - MOL
    okeke1101
    okeke1101 2012/09/14
    わかりやすい体育座りだった。
  • 1