LoginSignup
5
7

More than 5 years have passed since last update.

bootstrap-sassとslimで表示のテンプレートを作ってみた

Posted at

Rails × Slim × bootstrap-sass

Bootstrapにはイケてるサンプルがたくさん用意されています。
それを、Slimで使うRailsで実際にテンプレートとして表示されるまでの記録。
あくまでも、個人で楽しんでくださいね。

Railsにbootstrap-sassは導入済み

雛形となるテンプレート探し

まずBootstrapの公式サイトから、自分の理想に近いテンプレートを探してきます。
http://getbootstrap.com/getting-started/
ページの下の方に行くと...

スクリーンショット 2015-09-17 17.11.58.png

Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.

とあるので、大いに使わせていただきます!
自分の理想に近いページのソースを拝借し、ソースコードを確認しhtmlをslimにしてみます。

slim書いたこと無い...というあなた(私)

  1. ドキュメント読んで頑張ってください。
    http://docs.slimframework.com/

  2. htmlをslimにしてくれるサービスを使うのも手ですね。
    https://html2slim.herokuapp.com/
    ただし、ところどころ崩れたり、おかしかったりするため、手動で修正する必要はあります。

Application.html.slimにぶっこむ

作成したソースコードを挿入して、サーバ起動してページ確認してみる。

しかし崩れます

理由は簡単です。bootstrapのサンプルの多くには、サンプル用のcssが用意されています。
なので、自分のプロジェクトにもそれを取り組んで上げる必要があります。

今回は、sassを使っているので、
サンプルのcssを参考にしつつ、sassに置き換えてください。

備考

slimやsassを触ったこと無い初心者からすると、
たたき台があるだけで、かなり学習の助けになると思います。
気になったサイトがあったら、こういう形でsassだったら、slimだったら...というふうに変換してみても良いかもしれません。

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7