並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 40 件 / 121件

新着順 人気順

"CSS Framework"の検索結果1 - 40 件 / 121件

  • シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css

    シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。 new.css new.css -GitHub new.cssの特徴 new.cssのデモ new.cssの使い方 new.cssの特徴 new.cssは、HTMLのみを使用してモダンなWebサイトを作成するためのclassレスのフレームワークです。HTMLの実用的なデフォルトのスタイルを活かし、美しく見えるようにスタイルされています。 超軽量4.8KbのCSSフレームワーク。 用意するのは、HTMLファイルのみ。 マークダウンで生成されたHTMLのレンダリング。 シンプルなブログや自己紹介ページに最適。 MITライセンスで、商用プロジェクト

      シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css
    • シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css

      その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量(4kB)CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。 Simple.css Simple.css -GitHub Simple.cssとは Simple.cssのデモ Simple.cssの使い方 Simple.cssとは Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。 MITライセンスで、商用プロジェクトでも無料で利用できます。 classのないプレーンなHTM

        シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
      • 無料で使えるかわいい8bitデザインのファミコン風CSSフレームワーク「NES.css」

        ファミコン風デザインのウェブサイトを簡単に作れる無料CSSフレームワークが「NES.css」です。NES.cssはさくらインターネットのダーシノ氏が開発を行っており、ボタンや入力フォームといった基本的な要素から、SNSやキャラクターのアイコンまで用意されています。 NES.css - NES-style CSS Framework https://nostalgic-css.github.io/NES.css/# nostalgic-css/NES.css: NES-style CSS Framework | ファミコン風CSSフレームワーク https://github.com/nostalgic-css/NES.css ファミコン風CSSフレームワーク「NES.css」をリリースしました | Black Everyday Company https://kuroeveryday.blo

          無料で使えるかわいい8bitデザインのファミコン風CSSフレームワーク「NES.css」
        • HTMLはシンプルなまま、Webサイトの見栄えをよくするclassレスの超軽量CSSフレームワーク -Almond.css

          HTMLはシンプルなままで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログなどをさくっと作成したい時に便利です。少し手を加えて、CSSリセットとして利用するのもありかもしれません。 Almond.CSS -GitHub Almond.CSSの特徴 Almond.CSSのデモ Almond.CSSの使い方 Almond.CSSの特徴 Almond.CSSは、シンプルなWebサイトの見栄えをより良くするためのclassレスのCSSスタイル集です。CSSのスタイルを正規化してクロスブラウザで同様のエクスペリエンスを提供したり、カスタムスタイルを追加してちょっとしたスパイスを加えることもできます。 HTMLのセマンティックなタグとAlmond CSSを組み合わせるだけで(JavaScriptは不要です)、モダンなWebページが

            HTMLはシンプルなまま、Webサイトの見栄えをよくするclassレスの超軽量CSSフレームワーク -Almond.css
          • Tailwind考 - uhyo/blog

            皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ

              Tailwind考 - uhyo/blog
            • S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実装してみた(Amazon SES + AWS Lambda + API Gateway) | DevelopersIO

              S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実装してみた(Amazon SES + AWS Lambda + API Gateway) はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」で公開した HTML ウェブサイトに、メールフォーム付きのお問い合わせページが欲しくなるケースも多いと思います。 そこで今回は AWS のクラウドサービスをフル活用し、完全にサーバーレスで動作するメールフォームを構築してみました。 1時間ほどの作業でお問い合わせフォームを実装でき、AWS に触れることで「サーバーレス構成」の基本を理解するのにも役立ったので、備忘を兼ねて構築方法をご紹介します! 今回の構成(概略図) サーバーレスだと何が嬉しいの? おサイフに優しい メール送信のバックエンドに利用するAWSサービス(Amazon SES、Lambda、API G

                S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実装してみた(Amazon SES + AWS Lambda + API Gateway) | DevelopersIO
              • CSSファイルを読み込むだけ!クラスなしCSSフレームワークいろいろ

                2021年12月14日 CSS, Webサイト制作 BootstrapでおなじみのCSSフレームワークでは、各要素に決められたクラス名を指定してスタイルを適用していました。ですが最近クラスを指定せず、HTMLを書くだけで整ったスタイルを適用してくれる「クラスなしCSSフレームワーク」が続々と登場しています。headタグ内にCSSファイルを読み込む記述を追加するだけでOK!学習コストもかからずとっても便利です。日本語版のデモも用意したので、どんな表示になるか確認してみてください。 ↑私が10年以上利用している会計ソフト! デモはちょっと長いので、デモパネルをスクロールするか、パネル右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてくださいね! Water.css GitHub|デモ クラスなしCSSフレームワークとして最初に目立っていたのがこのWater.css。ダー

                  CSSファイルを読み込むだけ!クラスなしCSSフレームワークいろいろ
                • プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS

                  ポートフォリオやブログ、テキストサイトやシンプルなショップなど、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワークを紹介します。 HTMLもシンプルでプレーンなため、実装は簡単です。CSSはそのままでもカスタマイズしても使用できます。もちろん、レスポンシブ対応で、ダークモードもサポートしています。 Neat CSS Neat CSS -GitHub Neat CSSの特徴 Neat CSSの仕様 Neat CSSの使い方 Neat CSSの特徴 Neat CSSは、ミニマルなWebサイトを素早く構築するシンプルなCSSのフレームワークです。CSSは約2Kbの超軽量サイズ(未圧縮)、カスタマイズも簡単です。 MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。 Neat CSS Neat CSSの主な用途 ブログ ジャーナル テクニカルサイト ドキュメン

                    プレーンなHTMLで、ミニマルなWebサイトを素早く構築できるシンプルなCSSのフレームワーク -Neat CSS
                  • Charts.css

                    Quick Start GitHub Repo Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts. The source code is available on GitHub (opens new window). If you like the project, please consider starring the repo on GitHub.

                      Charts.css
                    • Simple.css Framework

                      Are you using Simple.css? If you are, it would be great if you considered buying me a coffee to say thanks. Things like this really help open source software thrive. You can Buy Me A Coffee or even sponsor me on GitHub. ❤️ Simple.css is a CSS framework that makes semantic HTML look good, really quickly. Simple.css is mostly classless, which means that you can integrate Simple.css with plain HTML a

                        Simple.css Framework
                      • Pico CSS • Minimal CSS Framework for semantic HTML

                        Minimal CSS Framework for Semantic HTMLA minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà! 12.1K GitHub Stars 74.1K Monthly Npm Downloads (Last month) 3.2M Monthly JSDelivr Requests (Last month) A Superpowered HTML ResetWith just the right amount of everything, Pico is a great s

                          Pico CSS • Minimal CSS Framework for semantic HTML
                        • 出来る限り短く説明する React + Tailwind CSS 入門(忙しい人向け)

                          VTeacher 所属の Satomi です。 ※各項目をできるだけ3行以内にまとめています。 (出来る限り短く説明するReactJS入門 に合わせて書いています) 昨年(2021年)くらいから Tailwind CSS の話題が増え出し、最近はReactと一緒に使われる場面が増えてきたと思います(私も昨年から使い始めました)。 Vercel Next.js as the React framework / NextAuth.js for authentication Vercel for deployment PlanetScale as the database (MySQL) Prisma as the ORM for database access Tailwind for CSS styling 👈 本投稿は、React + Tailwind CSS の基礎知識をさらっと確認で

                            出来る限り短く説明する React + Tailwind CSS 入門(忙しい人向け)
                          • new.css

                            Write modern websites using only HTML. This site is made from vanilla HTML and the default new.css theme. View Source new.css is a classless CSS framework to write modern websites using only HTML. It's ~4.5kb. It's perfect for- A dead-simple blog Collecting your most used links Making a simple "about me" site Rendering markdown-generated HTML The web was made for semantic HTML—let's start using it

                              new.css
                            • ヘッドレスCMS + S3 静的ウェブページで記事投稿システムをサクッと実装してみた(microCMS + Amazon S3) | DevelopersIO

                              はじめに みんなが大好きな Amazon S3 の「静的ウェブサイトホスティング」。 サーバー不要でお手軽にウェブページを公開できる便利な機能ですが、HTMLを触らずにちょっとしたお知らせなどを更新できるようにしたい、というケースも多いと思います。 今回はそんな用途にぴったりの「ヘッドレスCMS」を利用して、S3 でホスティングしている静的ウェブページに管理画面から記事を投稿できるシステムを、1 時間ほどの作業でサクッと実装してみました! ※本記事では「とりあえず動くシステム」をできるだけ簡単に、最短で体験することを目指しているため、セキュリティやフロントエンドの実装技術については掘り下げていません。 ヘッドレスCMSとは? CMS(Content Management System)とはユーザー管理、記事の投稿、データベースなどがセットになったコンテンツ管理システム全体を指します。 最も

                                ヘッドレスCMS + S3 静的ウェブページで記事投稿システムをサクッと実装してみた(microCMS + Amazon S3) | DevelopersIO
                              • 本気でCSS芸やりたい人のためのbox-shadow講座 / Mastering box-shadow

                                発表内容文字起こし https://kuroeveryday.blogspot.com/2019/07/mastering-box-shadow.html UIT meetup vol.7 集まれ!(タブン)実務では使わないフロントエンド芸発表会 https://uit.connpass.com/event/138084/ NES.css | NES-style CSS Framework https://github.com/nostalgic-css/NES.css CSS Collection(CSS芸) https://bcrikko.github.io/css-collection/ box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる https://kuroeveryday.blogspot.com/2018/10/draw-and-animate-p

                                  本気でCSS芸やりたい人のためのbox-shadow講座 / Mastering box-shadow
                                • Tailwind CSS Cheat Sheet - Flowbite

                                  Use this interactive tool as a cheat sheet to view and search for all the class names from Tailwind CSS, the world's most popular utility-first CSS framework.

                                    Tailwind CSS Cheat Sheet - Flowbite
                                  • Goodbye CSS Modules, Hello TailwindCSS

                                    Our frontend codebase is a single-page application powered by Create React App (CRA), written in TypeScript, and using GraphQL for the API. The existing styling approach used CSS Modules without a design system. CSS Modules are CSS files in which all class and animation names are scoped locally by default. They get compiled as part of the build step—with bundler technology like Webpack—and are nat

                                      Goodbye CSS Modules, Hello TailwindCSS
                                    • No-Class CSS フレームワークをいろいろ比較するサイトを作った

                                      No Class CSS Museumという No-Class CSS フレームワーク比較サイトを作りました。 簡単な demo 用のコードに何かスタイル当てたいけど、そんなに時間かけたくないしそもそもデザインセンスないしどうしようかなってときに No-Class CSS フレームワークが便利です。 たとえば昨日公開したFirebase の存在をフロントエンドから隠蔽するためにのデモサイトもそういった No-Class CSS フレームワークであるnew.cssを使いました。 これは CSS ファイルを読み込んだだけ(タグにクラスを割り振ったりしていない)なのですが、それだけでいい感じにスタイルが当たってちょっと感動しました。 以前の記事であるブログの 1 ヶ月を振り返るに書いた通り、このブログは書いた内容のサンプルコードやデモをどんどん公開していく方針で運営しています。 ただ、なにもスタ

                                        No-Class CSS フレームワークをいろいろ比較するサイトを作った
                                      • Tailwind CSSという風と共に走るフロントエンド開発 - メドピア開発者ブログ

                                        10km40分切りが2020年の目標、メドピア長距離部の小宮山です。 みなさんTailwind CSSはご存知でしょうか。tailwindとは「追い風」を意味します。最高に気持ちよく走れるコンディションですね。 目次 サービス概要 技術概要 Tailwind CSSとは何か HTMLとCSS HTMLとCSSとコンポーネント コンポーネントと雑なセレクタ コンポーネントとインラインスタイル Tailwind CSSがもたらしたもの まとめ サービス概要 まずは今回新たに立ち上げたサービスの紹介です。 「MedPeerスポット×リクルートメディカルキャリア」という医師向けスポット求人マッチングサービス(以下、本サービス)が11月にリリースされました。 medpeer.co.jp ログインや応募などサービスのコアな部分はMedPeer医師会員限定になってしまいますが、サイトの雰囲気自体は非会員

                                          Tailwind CSSという風と共に走るフロントエンド開発 - メドピア開発者ブログ
                                        • 11 Top React Developer Tools for 2020

                                          JavaScript is famous for the number of frameworks and tools that are created around it every week, and React, being one of the most popular of those frameworks as of late, “suffers” a similar fate, causing new developers to get overwhelmed when they attempt to start delving into the technology. So when it comes to picking the right IDE, the right visualizer or even the right stylesheet for your ne

                                            11 Top React Developer Tools for 2020
                                          • You Don’t Need A UI Framework — Smashing Magazine

                                            Developers often reach for UI frameworks like Bootstrap or Material UI, hoping that they’ll save a bunch of time and quickly build a professional-looking app. Unfortunately, things rarely work out this way. Let’s talk about it. Every now and then, someone will ask for my recommendations on UI frameworks. By “UI framework”, I mean any third-party package that is focused on providing styled UI compo

                                              You Don’t Need A UI Framework — Smashing Magazine
                                            • lit - 軽量なレスポンシブWebフレームワーク

                                              CSSフレームワークは大型なものになるほど便利な機能が追加されますが、その制約もまた大きくなります。Webデザイナーであれば、レスポンシブなどの機能だけあって、他は自由度が高いものを選びたいと思うのではないでしょうか。 今回紹介するlitはわずか395byteしかないレスポンシブWebフレームワークになります。小さいだけに余計な機能も少ないことでしょう。 litの使い方 スクリーンショット多めです。まずはグリッド機能。12等分される、よくあるものです。 タイポグラフィ。 ナビゲーションバー。 ボタンとリスト。 フォーム。 テーブル。 カード。 カードを使えば、こんなレイアウトにも。 水平線。 litではあまり多くの機能は用意されていません。別途ユーティリティとして使えるCSSも用意されており、必要に応じて組み合わせることができます。クラスも多くありませんので、習得は容易そうです。 litは

                                                lit - 軽量なレスポンシブWebフレームワーク
                                              • Web Developer Roadmap 2020版が出ていたので2019版と比較 - Qiita

                                                はじめに WEBエンジニアのためのロードマップ(https://roadmap.sh)が2020版に更新されていたので2019版と合わせてざっとですがまとめます。 1つ1つの説明はしないので画像の図を読んでいただくか、2019版を詳しくまとめてくださっている記事を拝読するとよいかもです。 Introduction 2019 2020 Choose your path は昨年と変わらずですが、SOLID, KISS, YAGNIが消えています。 個人的には大事なことだよなーと思ったのですがなくなってしまったようです。 あとは色の説明がなくなっていますが色分けはされているので意味は去年のままという認識です。 黄色→ 作者のおすすめ オレンジ → その他の選択肢など グレー → 非推奨 Frontend Roadmap 2019 2020 Internet 2020版から追加されました。たしかに

                                                  Web Developer Roadmap 2020版が出ていたので2019版と比較 - Qiita
                                                • 3000人に聞いた、2019年最先端のフロントエンド開発者が使ってるツールはこれだ - Qiita

                                                  Ashley Nolanは、CSSとJavaScriptの機能やフレームワークをどれだけ使っているかというアンケートを毎年行っています。 以下では2019年版である、The Front-End Tooling Survey 2019というアンケート結果の概要を紹介してみます。 回答者数が昨年から4割も減ってるのだが一体何があったのだろう。 The Front-End Tooling Survey 2019 - Results 3005人の開発者が、27の質問に回答してくれました。 私の家族に女の子が増えたので集計結果を出すのが遅れました。ごめんね! 昨年からの一年で変わったところを見ることで、みんなの考えやトレンドが他者と共有されているか確認することができます。 これらの結果から、フロントエンドツール全体の知識レベルや使用傾向を分析するのにも役立ちます。 Quick Thanks 手伝って

                                                    3000人に聞いた、2019年最先端のフロントエンド開発者が使ってるツールはこれだ - Qiita
                                                  • ダークモードもサポート!シンプルで拡張性も備えた超軽量のプログレッシブCSSフレームワーク -Cutestrap

                                                    シンプルなHTMLにclassを加えるだけで、さまざまなUIコンポーネントやグリッドが実装できる超軽量(2.7Kb)のCSSフレームワークを紹介します。 プログレッシブ・エンハンスメントが採用されており、新旧ブラウザの見え方を最適化して表示されます。 Cutestrap Cutestrap -GitHub Cutestrapの特徴 Cutestrapのデモ Cutestrapの特徴 Cutestrapは、シンプルなAPIと堅牢なカスタマイズオプションを備え、最新の技術と未来を見据えた視点でコンテンツ重視のプログレッシブ・エンハンスメントを採用したCSSのフレームワークです。 シンプルで拡張性も備えたフレームワーク ライセンスはGNU GENERAL PUBLIC LICENSEで、個人でも商用のプロジェクトでも無料で利用できます。 ブラウザのサポート 以下のブラウザをサポートしています。

                                                      ダークモードもサポート!シンプルで拡張性も備えた超軽量のプログレッシブCSSフレームワーク -Cutestrap
                                                    • Reimagine Atomic CSS

                                                      [[toc]] This post will be a bit longer than usual. It's quite a big announcement to me, and there are many things I want to talk about. I'll be appreciated if you take the time to read through it. The table of contents is hidden on the left if you are on a desktop. Hope you enjoy :) 中文 Chinese Version What is Atomic CSS? Let's first give a proper definition to Atomic CSS: From this article by John

                                                        Reimagine Atomic CSS
                                                      • Welcome to Wildebeest: the Fediverse on Cloudflare

                                                        Welcome to Wildebeest: the Fediverse on Cloudflare02/08/2023 This post is also available in 简体中文 and 繁體中文. The Fediverse has been a hot topic of discussion lately, with thousands, if not millions, of new users creating accounts on platforms like Mastodon to either move entirely to "the other side" or experiment and learn about this new social network. Today we're introducing Wildebeest, an open-so

                                                          Welcome to Wildebeest: the Fediverse on Cloudflare
                                                        • 4 Ways to Remove Unused CSS

                                                          Image by Ron Porter from PixabayCSS files can easily gain redundant KBs over time. It may happen due to leftovers from historic stylings or simply because you’ve used a large CSS framework like Bootstrap (147 KB when minimized) and most probably have used only a fraction of what it has to offer. Unused CSS slows down page loading and makes maintenance much more difficult than it has to be. Unused

                                                            4 Ways to Remove Unused CSS
                                                          • 世界4位のCSSフレームワークを生み出したダーシノが副業やOSS活動に打ち込む理由 | Offers Magazine

                                                            キャリアアップのためには本業以外も全力で こんにちは。さくらインターネットで、フロントエンドエンジニアをしているダーシノ(@bc_rikko)です。 今は、本業に加えていくつかの会社で副業をしています。OSS活動にも積極的に取り組んでいて、2018年に開発したNES.cssというファミコン風CSSフレームワークは、GitHubのcss-frameworkトピックで4位のスター数を獲得しました。 出典:NES.css - NES-style CSS Framework 今回は、副業やOSS活動といった本業以外でのキャリアの形成について紹介したいと思います。 私は時間ではなく技術を武器に世界と戦っていきたいと考えています。新人の頃に前職の部長に言われて強く心に残っている言葉があります。 「システムエンジニアは、肉体労働者ではなく知的労働者。だから頭を使って仕事をしなさい」 背景などをサクッと省

                                                              世界4位のCSSフレームワークを生み出したダーシノが副業やOSS活動に打ち込む理由 | Offers Magazine
                                                            • MVP.css - Minimalist stylesheet for HTML elements

                                                              "Uber for X" brainstorming session Docs HTML Reference MVP.css works with the following HTML elements: <a> — text links <a><b>, <a><strong> — solid link buttons <a><em>, <a><i> — outlined link buttons <article> — content area with normal styling <article><aside> — text callout <blockquote> — quote callout <blockquote><footer> — quote attribution <body> — default parent element <button> — form butt

                                                              • CloudRun + Go + Next.js で画像閲覧に特化した Twitter クライアントを作ったはなし

                                                                zenn 初投稿になります、kimihiro_n です。 先日リリースした個人開発のアプリケーションのはなしをしたいと思います。 作ったもの 最初に宣伝かねて作ったものの紹介を。 イラスト投下閲覧用に Twitter を使っているのですが、公式 Twitter だとイラスト以外の投稿もたくさん混ざって追いづらかったり、最適化の影響で見逃してしまうツイートがあったりと不便さを感じていました。 Twitter API を使ってこの辺いい感じにフィルタリングしたら快適になるんじゃないかと思い Web アプリケーションとして作ってみることにしました。 自分のタイムラインやリストをフィルタリングして表示するだけのアプリケーションですが Twitter で絵師さんを追いたいみたいな用途だと便利に使えると思うので是非試してみていただければと。 後述しますが PWA(Progressive web app

                                                                  CloudRun + Go + Next.js で画像閲覧に特化した Twitter クライアントを作ったはなし
                                                                • クックパッドのデザイン品質を支える Apron Design System の構築|ふじけん / kenshir0f

                                                                  こんにちは、クックパッド株式会社 デザイン戦略部のふじけん(@kenshir0f)です。 デザイン戦略部に異動してからは全社横断のデザイン品質の向上の仕組みづくりを担当していますが、今回はレシピサービス「クックパッド」のデザインシステムの整備で取り組んでいることを紹介したいと思います。 大規模サービスにおけるデザインガイドラインの世代交代クックパッドでは約10年前にクックパッドらしいUIを簡単に実現することができる Sara という CSS ベースのUIフレームワークが生まれました。 Sara は Web のデザインと実装がパッケージ化されているため少ない実装で機能提供が可能となり、その分開発者はユーザーと向き合ったサービス開発にフォーカスすることができます。 CSS Framework の Sara モバイルアプリ(iOS, Android)でも同様に Sara のデザインを取り入れて開

                                                                    クックパッドのデザイン品質を支える Apron Design System の構築|ふじけん / kenshir0f
                                                                  • ReactのCSSの選択肢を比較してみた

                                                                    世はReact with CSS 戦国時代...! Pure CSS CSS Modules Styled Components(CSS in JS) Emotion(CSS in JS) Linaria(CSS in JS) Tailwind CSS Framework(Chakura UIなど) と、Reactと共に使うCSSの選択肢は非常に多岐に渡り、学習者を混乱に陥れることもしばしばかと思います。 私が実装経験がない Tailwind CSS Framework については今回語りませんが、それ以外のCSS実装方法を全く同じコンポーネントを実装することで比較してみました。 下記が実際にコーディングしたGitHubになります。 Pure CSS 通常のCSSです。 CSSは全てがグローバルで管理されてしまうので保守・管理にコストがかかり、崩壊しやすいです。 なのでBEMなどのCSS設

                                                                      ReactのCSSの選択肢を比較してみた
                                                                    • Beer CSS - Build material design interfaces in record time, without stress for devs 🍺💛.

                                                                      The first CSS framework based on Material Design 3. 10x smaller than others CSS frameworks based on Material Design. Translates Material Design to HTML semantic standard. Ready to use with any JS framework. Highly focused on DX.

                                                                      • 5日目: リッチフロントエンド - はてなインターン2019 (公開版)

                                                                        講義を始める前に 質問があったらその場で聞いてください 他の受講者の理解にもつながります 声を出すのが難しければ、Slack でも OK スライドモードで画面に写しながら話しますが、手元で資料を開きつつ聞くと理解しやすいと思います リッチなウェブページを作ってみよう HTML 構造 CSS 見栄え JavaScript 動き Single-Page Application HTML, CSS, JavaScript を駆使したリッチなウェブページ 書いたことあるよ、という方 🙋‍♀️ HTML HTMLとは セマンティクス コンテンツカテゴリ HTML Webページを記述する言語 code:example.html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>HTML文書</title>

                                                                          5日目: リッチフロントエンド - はてなインターン2019 (公開版)
                                                                        • next.js の amp モードで tailwind.css を purgecss と合わせて使う

                                                                          このリポジトリ でやったこと。 やろうとしたこと tailwind.css は Utility First と銘打った CSS フレームワークで、コンポーネント化を前提としたモダンフレームワークと相性がいいです。今回は next.js の amp-mode で tailwind を使おうとしてみました。 Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs 問題 前提として、 amp には inline css の容量制限があり、75kb を超えると AMP と認識されなくなります。 tailwind はビルドして使うのが前提のフレームワークですが、全部入りの tailwind.min.css は 1.3 M あります。これでは到底、75 kb に収まりません。 AMP の CSS

                                                                            next.js の amp モードで tailwind.css を purgecss と合わせて使う
                                                                          • GitHub - xz/new.css: A classless CSS framework to write modern websites using only HTML.

                                                                            You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                                                                              GitHub - xz/new.css: A classless CSS framework to write modern websites using only HTML.
                                                                            • 15 Best CSS Libraries for 2019

                                                                              Hey kids, you ready for me to tell you all about this newfangled thing called Bootstrap? Well get un-ready, ‘cause I’d never do that to you. It’s not that Bootstrap isn’t great, it’s just that if you work in web design, and you’ve been paying any attention at all, you already know about it. And if you don’t… well… welcome to the industry! We have some articles you may want to check out. For everyo

                                                                                15 Best CSS Libraries for 2019
                                                                              • Panda CSS - The Origin Story

                                                                                Building Panda CSS was one of the most inspiring moments of my career; it reminded me of the period before launching Chakra UI. I knew it would be very "Node" heavy, and I needed to learn more about Abstract Syntax Trees (ASTs). I was familiar with using basic modules like fs, path, and small bits of express to build APIs, but that was about it. Creating a CSS framework that delivers a similar DX

                                                                                  Panda CSS - The Origin Story
                                                                                • Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs

                                                                                  Utility-first多くのCSSフレームワークはボタン、カード、アラートなど、開発の初期段階ですばやくデザインするのに役立つ、あらゆる種類の事前に設計されたコンポーネントが付属しています。 しかし、カスタムデザインでサイトを目立たせるときは、多くの痛みを引き起こします。 Tailwindは違います。 Tailwindは、事前に設計されたコンポーネントの代わりに、HTMLを離れることなく完全にカスタム設計を構築できる低レベルのユーティリティクラスを提供します。 <div class="md:flex"> <div class="md:flex-shrink-0"> <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ix