CSS Nite in Osaka, vol.46

CSS Nite in Osaka, vol.46「Bootstrap meets XD / Bootstrap 4 LIVEコーディング」ツイートまとめ http://cssnite-osaka.com/vol46/
CSS Nite
0
CSS Nite in Osaka @cssnite_osaka
CSS Nite in Osaka, vol.46 「Bootstrap meets XD / Bootstrap 4 ライブコーディング」開催まであと3分!#cssnite
CSS Nite in Osaka @cssnite_osaka
CSS Nite in Osaka, vol.46 「Bootstrap meets XD / Bootstrap 4 ライブコーディング」開演しました!ハッシュタグは #cssnite をつけてツイートをお願いします! #AdobeXD #Bootstrap pic.twitter.com/aGZ6BPv8c4
拡大
CSS Nite in Osaka @cssnite_osaka
阿部 正幸さんによるハンズオンが開始しました! #cssnite
CSS Nite in Osaka @cssnite_osaka
AdobeXDでデザインした素材をBootstrap4でライブコーディングしていきます! #cssnite
CSS Nite in Osaka @cssnite_osaka
世界の6サイトに1つはBootstrapを使ってコーディングされているそう!#cssnite
ジョージ @日々精進 @eiji_nagano
プロジェクターの光が反射してスクリーンというか壁中心上部が全く見えない。 #cssnite
CSS Nite in Osaka @cssnite_osaka
パーツ単位でデザインしていく、アトミックデザインという手法がAdobeXDでは共通 #cssnite
CSS Nite in Osaka @cssnite_osaka
今日はモバイルファーストでコーディングしていきます! #cssnite pic.twitter.com/Z0dxmo14vc
拡大
CSS Nite in Osaka @cssnite_osaka
PCをお持ちの方はデータをダウンロードして一緒にコーディングしていきます! #cssnite
CSS Nite in Osaka @cssnite_osaka
Bootstrapでカスタマイズが必要な場合は、ソースコード版(コンパイル済みのCSS/JavaScript)をダウンロードして使う #cssnite
CSS Nite in Osaka @cssnite_osaka
Bootstrapのサイトからスターターテンプレートをコピペ or ファイルをダウンロードしてindex.htmlに! #cssnite
ジョージ @日々精進 @eiji_nagano
Bootstrap4からブレークポイントは4つになった。 Bootstrap3までは3つ。 #cssnite
CSS Nite in Osaka @cssnite_osaka
Bootstrap4からブレイクポイントがsm md lg xl 4つに!指定のクラスを入れることで、レスポンシブ対応になります!#cssnite
CSS Nite in Osaka @cssnite_osaka
AdobeXDでは要素を選択すると、margin●px…とサクッとでてきちゃいます!便利… #cssnite pic.twitter.com/jQGJOVvzwi
拡大
CSS Nite in Osaka @cssnite_osaka
navbar-brandをクラスに追加して、会社ロゴを配置していきます。基本は用意されたコンポーネントをサイトからコピペしてつかうとサクサク。 #cssnite
ジョージ @日々精進 @eiji_nagano
Bootstrap4はFont Awesomeは内包されていない。好きなの使ってね。 #cssnite
CSS Nite in Osaka @cssnite_osaka
BootstrapのサイトではFont Awesome 、Iconic、Octiconsの3つがおススメされていますが、今回はFont Awesomeで検索ボタンを配置。#cssnite
CSS Nite in Osaka @cssnite_osaka
リファレンスをコピペするだけでバーガーメニューも追加できてしまいます。#cssnite
CSS Nite in Osaka @cssnite_osaka
BootstrapのバーガーメニューはSVGでできており、調整で色を変えることも可能です #cssnite
CSS Nite in Osaka @cssnite_osaka
モーダルにfull-screenのクラスを入れると100%表示に! #cssnite
CSS Nite in Osaka @cssnite_osaka
Bootstrap4からFlexboxユーティリティが追加されました!これで上下中央寄せもサクサク! #cssnite pic.twitter.com/LE3Cv5ubDK
拡大
meganetops @meganetops
Bootstrap4のFlexboxはIE11でも大丈夫でしょうか?? #cssnite
CSS Nite in Osaka @cssnite_osaka
.justify-content-md-centerのように、各ブレイクポイントごとにしていすることもできます。 #cssnite
残りを読む(20)

コメント

コメントがまだありません。感想を最初に伝えてみませんか?

ログインして広告を非表示にする
ログインして広告を非表示にする