珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | POSTD
概要： Sketchを使ったAtomic Designの方法がプロダクトデザインの未来形です。 初めに この記事は、上のビデオの素晴らしい人物、Brad Frostの開発したシステムについて書いています。Atomic Designは今のレスポンシブなデジタルの世界に対応するために開発されたものです。 ここ何年も、私たちのデザインを少しでも理解してもらえるよう、スタイルガイド、基本的ガイドラインやムードボードなどのツールを作成してきました。同じように、開発者もBootstrapやFoundation、Bourbonなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。Atomic Designはまさにそれを実現しようとしています。 Atomic designはあるインスタンスやページをデザインすることではありません。大局的に
CSS · Bootstrap
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. Overview Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. HTML5 doctype Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at th
Bootswatch
Easy to Install Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values. Customizable Changes are contained in just two SASS files, enabling further customization and ensuring forward compatibility. Tuned for 5.3.2 Themes are built for the latest version of Bootstrap. Version 4, version 3, version 2, and other releases are also available to download.
ヘッダは上部固定で、フッタは最下部にするスタイルシート、レスポンシブにも対応！ | コリス
ナビゲーションを配置したヘッダはスクロールしても常に上部に固定されており、フッタはコンテンツの量が少なくても最下部に配置されるページを実装するスタイルシートを紹介します。 Sticky footer with fixed navbar コンテンツが少なくてもフッタは最下部に、レスポンシブ対応で！ デモ Bootstrapに素晴らしいデモがあったので、そこからデモを紹介します。 デモでは、ナビゲーションがあるヘッダはスクロールしても常に上部に固定されています。 デモのコンテンツ量が少ないため、狭い表示エリアで。 デモページ：幅780pxで表示 実装 実装はデモを必要最小限にしたもので、紹介します。 HTML 上からナビゲーションのあるヘッダ、コンテンツ、フッタの順で、ヘッダとコンテンツはdivで内包し、終わりにコンテンツ量が少ない時用にpushのdivを配置します。 <body> <div
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
