Bootstrap 4を使うならSassを使って3倍幸せになろう - Qiita
Bootstrap 4のデザインを編集するにはCSSの更新が必要ですが、CSSだけを使うよりもBootstrap 4で導入されたSassを使う方が効率的にかつ細かくデザインをカスタマイズできます。本エントリーでは、Sassを使った効率的なデザインカスタマイズ方法を紹介します。 Bootstrap 4のデザインのカスタマイズ方法 Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモはjsdo.itにアップしています。 なお、基本的なBootstrap 4の導入方法については記事「5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜」を参照ください。 ▲ Bootstrap 4を使って実装したタブとボタン このコンテンツに、下記のデザイン更新を加えてみましょう。 全体の角丸をなくす 青い背景部分を赤い背景にする デザイ
Reboot.css Bootstrap製Reset.cssからCSSの新しいスタンダードを読み解く｜Goodpatch Blog グッドパッチブログ
皆さんが新しくWebベースのプロジェクトを始める際に、様々なパッケージをインストールするかと思いますが、どんなプロジェクトを始めるにせよ、大抵はその中になんらかの Reset.css が含まれていることでしょう。 Reset.css とは、Google Chrome やIEなどの各ブラウザが独自にもっているデフォルトCSSをブラウザごとに差異がないように平準化し、フロントエンド開発者がデザインをしやすいようにするために読み込まれる CSS です。 例えばhtmlファイルに <h1>Hello CSS</h1> と書いた時に、なにもCSSを書かなくても太文字で大きく表示されるのはデフォルトCSSが適用されているためです。 Reboot.css はCSSフレームワークとしてgithubで最もスターを集めている Bootstrap が、現在開発中の v4 から採用している新しい Reset.cs
第14回ゼロから始めるWordPress勉強会 〜「Sass+Bootstrap+_sでテーマを作ろう」を開催しました
おはようございます。 よつばデザイン：後藤さん、コワーキングスペース茅場町：田中さん、InAdvanceonlyの小林さんの４人で主催している「ゼロから始めるWordPress勉強会」を昨日9月17日にコワーキングスペース茅場町で開催しました。 第14回ゼロから始めるWordPress勉強会 〜「Sass+Bootstrap+_sでテーマを作ろう」＆質問大会！〜 – Co-Edo WordPress 勉強会 | Doorkeeper 今回のゼロから始めるWordPress勉強会はSassとフレームワークを活用したテーマ作りを勉強します。 Sassって何？ Sassについてゼロから解説いたします（小林） Bootstrapって何 … 最終的に29名もの方々にご参加いただきました。 みなさん、ありがとうございます！ 今回のテーマは「Sass+Bootstrap+_sでテーマを作ろう」 今までは
Bootstrap 3 Sassの使い方 | Webエンジニアブログ
Twitter Bootstrap Sassポートの使い方とカスタマイズ bootstrap-sassをインストール Ruby on Railsではない環境でbootstrap-sassをインストールして、標準のbootstrapのCSSをカスタマイズを追加したcssをコンパイルしてみます。 ruby, sass, compassを利用可能な状態にする Sass版のBootstrap3をインストールために、 ruby sass compass を使える環境にしておく。rubyのインストールは、Windows環境であれば、 Rubyinstaller を利用するのが簡単でおすすめです。rubyのインストールが終わったら、gemコマンドを利用して、sassとcompassをインストールすることが出来ます。 gem install sass gem install compass Bootstr
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
2014/9/17にコワーキングスペース茅場町で開催された「ゼロから始めるWordPress勉強会」で使用した資料です。 Read less
bootstrap-sass-railsからbootstrap-sassに移行した - @znz blog
今日の bundle update は bootstrap の sass の gem を bootstrap 公式のものに移行したのが大きな変更点でした。 bootstrap-sass-rails から bootstrap-sass 3.1.0.2 bootstrap 3.1.0 がリリースされて少し時間が経ったので、 bootstrap-sass-rails を確認してみたところ、 DEPRECATION NOTICE に公式サポートされた sass の gem があるので、 そちらに移行を推奨と書かれていたので、移行しました。 bootstrap-sass gem への移行は UPGRADING に書かれているように @import "twitter/bootstrap"; を @import "bootstrap"; に書き換えるだけでした。 bootstrap-sass のカスタマ
[rails] sassなtwitter-bootstrapをrailsで使う
いまさらですが、twitter-bootstrapが便利なことを知りました。 これをRails3に適用するにあたり、せっかくsassでCSSも無駄なく書けているので、sassを使いつつ、twitter-bootstrapも使いたい、 という欲求が出てきました。 そんな時は、 bootsrap-sassを使います。 以下、導入手順です。 Gemfile gem 'bootstrap-sass' bundle install $ bundle install app/assets/javascripts/application.js //= require jquery //= require jquery_ujs //= require bootstrap //= require_tree . app/assets/stylesheets/bootstrap_and_overrides.cs
bootstrap-sass を使って Twitter Bootstrap をカスタマイズ - present
RAILS_ROOT/vendor/assets 下に Bootstrap 一式を放り込んで使っていたんだけど、 このやり方だと Bootstrap のスタイルをカスタマイズするとき面倒なことに気付いた。 上書きする CSS を書く？ありえない。 Bootstrap 公式のカスタマイズページを使う？ 変更を確認するためにファイルを置き換えるのが面倒。 ブラウザで開発中の画面を見ながらカスタマイズしたい。 書くコードの量は少ないほうが良い。 一箇所変更するだけで関連する箇所がまとめて変更されるような…。 それ、Sass で出来るじゃないか。 というわけで、bootstrap-sass を使うことにした。 Rails は Sass をサポートしているので、Gemfile に gem 'bootstrap-sass' を追加し、 RAILS_ROOT/app/assets/stylesheets
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to use Bootstrap 4 media query mixins | Edd Yerburgh
GitHub - twbs/bootstrap-sass: Official Sass port of Bootstrap 2 and 3.