2018年8月7日

CSS Nite in Osaka, vol.46

CSS Nite in Osaka, vol.46「Bootstrap meets XD / Bootstrap 4 LIVEコーディング」ツイートまとめ http://cssnite-osaka.com/vol46/
0
CSS Nite in Osaka @cssnite_osaka

CSS Nite in Osaka, vol.46 「Bootstrap meets XD / Bootstrap 4 ライブコーディング」開催まであと3分!#cssnite

2018-08-07 18:57:19
CSS Nite in Osaka @cssnite_osaka

CSS Nite in Osaka, vol.46 「Bootstrap meets XD / Bootstrap 4 ライブコーディング」開演しました!ハッシュタグは #cssnite をつけてツイートをお願いします! #AdobeXD #Bootstrap pic.twitter.com/aGZ6BPv8c4

2018-08-07 19:01:35
拡大
CSS Nite in Osaka @cssnite_osaka

阿部 正幸さんによるハンズオンが開始しました! #cssnite

2018-08-07 19:09:03
CSS Nite in Osaka @cssnite_osaka

AdobeXDでデザインした素材をBootstrap4でライブコーディングしていきます! #cssnite

2018-08-07 19:12:05
CSS Nite in Osaka @cssnite_osaka

世界の6サイトに1つはBootstrapを使ってコーディングされているそう!#cssnite

2018-08-07 19:14:59
ジョージ @日々精進 @eiji_nagano

プロジェクターの光が反射してスクリーンというか壁中心上部が全く見えない。 #cssnite

2018-08-07 19:16:37
CSS Nite in Osaka @cssnite_osaka

パーツ単位でデザインしていく、アトミックデザインという手法がAdobeXDでは共通 #cssnite

2018-08-07 19:17:00
CSS Nite in Osaka @cssnite_osaka

今日はモバイルファーストでコーディングしていきます! #cssnite pic.twitter.com/Z0dxmo14vc

2018-08-07 19:20:00
拡大
CSS Nite in Osaka @cssnite_osaka

PCをお持ちの方はデータをダウンロードして一緒にコーディングしていきます! #cssnite

2018-08-07 19:20:49
CSS Nite in Osaka @cssnite_osaka

Bootstrapでカスタマイズが必要な場合は、ソースコード版(コンパイル済みのCSS/JavaScript)をダウンロードして使う #cssnite

2018-08-07 19:24:11
CSS Nite in Osaka @cssnite_osaka

Bootstrapのサイトからスターターテンプレートをコピペ or ファイルをダウンロードしてindex.htmlに! #cssnite

2018-08-07 19:27:25
ジョージ @日々精進 @eiji_nagano

Bootstrap4からブレークポイントは4つになった。 Bootstrap3までは3つ。 #cssnite

2018-08-07 19:30:37
CSS Nite in Osaka @cssnite_osaka

Bootstrap4からブレイクポイントがsm md lg xl 4つに!指定のクラスを入れることで、レスポンシブ対応になります!#cssnite

2018-08-07 19:32:37
CSS Nite in Osaka @cssnite_osaka

AdobeXDでは要素を選択すると、margin●px…とサクッとでてきちゃいます!便利… #cssnite pic.twitter.com/jQGJOVvzwi

2018-08-07 19:34:53
拡大
CSS Nite in Osaka @cssnite_osaka

navbar-brandをクラスに追加して、会社ロゴを配置していきます。基本は用意されたコンポーネントをサイトからコピペしてつかうとサクサク。 #cssnite

2018-08-07 19:37:43
ジョージ @日々精進 @eiji_nagano

Bootstrap4はFont Awesomeは内包されていない。好きなの使ってね。 #cssnite

2018-08-07 19:39:52
CSS Nite in Osaka @cssnite_osaka

BootstrapのサイトではFont Awesome 、Iconic、Octiconsの3つがおススメされていますが、今回はFont Awesomeで検索ボタンを配置。#cssnite

2018-08-07 19:41:02
CSS Nite in Osaka @cssnite_osaka

リファレンスをコピペするだけでバーガーメニューも追加できてしまいます。#cssnite

2018-08-07 19:45:44
CSS Nite in Osaka @cssnite_osaka

BootstrapのバーガーメニューはSVGでできており、調整で色を変えることも可能です #cssnite

2018-08-07 19:49:53
CSS Nite in Osaka @cssnite_osaka

モーダルにfull-screenのクラスを入れると100%表示に! #cssnite

2018-08-07 19:56:54
CSS Nite in Osaka @cssnite_osaka

Bootstrap4からFlexboxユーティリティが追加されました!これで上下中央寄せもサクサク! #cssnite pic.twitter.com/LE3Cv5ubDK

2018-08-07 19:59:07
拡大
meganetops @meganetops

Bootstrap4のFlexboxはIE11でも大丈夫でしょうか?? #cssnite

2018-08-07 20:02:11
CSS Nite in Osaka @cssnite_osaka

.justify-content-md-centerのように、各ブレイクポイントごとにしていすることもできます。 #cssnite

2018-08-07 20:02:45
残りを読む(20)

コメント

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