From 0c09e9db16d070672f62a9bd65c5f87092aad5f1 Mon Sep 17 00:00:00 2001 From: Jakob Skjerning Date: Mon, 1 Dec 2025 15:15:06 +0100 Subject: [PATCH 1/4] Set up Demo site for Flowbite 4 --- demo/app/assets/tailwind/application.css | 7 +- demo/app/views/pages/index.html.erb | 195 +++++++++++++++++++---- 2 files changed, 170 insertions(+), 32 deletions(-) diff --git a/demo/app/assets/tailwind/application.css b/demo/app/assets/tailwind/application.css index 6bc8a9d..5524d95 100644 --- a/demo/app/assets/tailwind/application.css +++ b/demo/app/assets/tailwind/application.css @@ -1,11 +1,12 @@ @import "tailwindcss"; -/* Load Flowbite */ -@plugin "flowbite/plugin"; - /* Load the default theme - or pick another, see https://flowbite.com/docs/customize/theming/ */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); @import "flowbite/src/themes/default"; +/* Load Flowbite */ +@plugin "flowbite/plugin"; + /* Include CSS classes used by the components in the final CSS */ @import "../builds/tailwind/flowbite_components"; diff --git a/demo/app/views/pages/index.html.erb b/demo/app/views/pages/index.html.erb index a52be2e..4ec50d2 100644 --- a/demo/app/views/pages/index.html.erb +++ b/demo/app/views/pages/index.html.erb @@ -1,16 +1,46 @@ -
+
-

Rails meets Flowbite

-

UI component library for Rails, built using ViewComponents, Flowbite, and Tailwind CSS.

-
+

+ Rails meets Flowbite +

+ +

+ UI component library for Rails, built using ViewComponents, Flowbite, and + Tailwind CSS. +

+ +
<%= link_to("https://github.com/substancelab/flowbite-components?tab=readme-ov-file#installation", class: Flowbite::Button.classes(size: :lg) + ["inline-flex", "justify-center", "items-center"]) do %> - Get started -
@@ -18,50 +48,157 @@
<%= render(Flowbite::Card.new(:class => "sm:flex-1")) do %> - - + + + <%= link_to("https://flowbite.com/") do %> -

Designed by Flowbite

+

+ Designed by Flowbite +

<% end %> -

Open-source library of over 600+ UI components, sections, and pages.

+ +

+ Open-source library of over 600+ UI components, sections, and pages. +

+ <%= link_to("https://flowbite.com/", class: "inline-flex font-medium items-center text-blue-600 hover:underline") do %> Flowbite documentation - + <% end %> <% end %> <%= render(Flowbite::Card.new(:class => "sm:flex-1")) do %> - - + + + <%= link_to("https://tailwindcss.com") do %> -

Powered by Tailwind CSS

+

+ Powered by Tailwind CSS +

<% end %> -

Utility-first CSS framework that can be composed to build any design, directly in your markup.

+ +

+ Utility-first CSS framework that can be composed to build any design, + directly in your markup. +

+ <%= link_to("https://tailwindcss.com", class: "inline-flex font-medium items-center text-blue-600 hover:underline") do %> Tailwind CSS documentation -

Built on ViewComponent

+

+ Built on ViewComponent +

<% end %> -

Reusable, testable & encapsulated view components for Ruby on Rails.

+ +

+ Reusable, testable & encapsulated view components for Ruby on Rails. +

+ <%= link_to("https://viewcomponent.org", class: "inline-flex font-medium items-center text-blue-600 hover:underline") do %> ViewComponent documentation - <%= content_for(:title) || "Flowbite Components for Rails" %> + + <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= yield :head %> <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %> - <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %> + <%# = tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %> @@ -24,35 +27,105 @@
-
- <%= yield %> -
+
<%= yield %>
@@ -77,12 +148,16 @@
- Licensed under the <%= link_to("MIT License", "https://github.com/substancelab/flowbite-components/blob/main/LICENSE") %>, except where otherwise stated + Licensed under the + <%= link_to("MIT License", "https://github.com/substancelab/flowbite-components/blob/main/LICENSE") %>, + except where otherwise stated
- The Flowbite name and logos are trademarks of <%= link_to("Bergside Inc", "https://flowbite.com/brand/") %>. - The Tailwind name and logos are trademarks of <%= link_to("Tailwind Labs Inc", "https://tailwindcss.com/brand") %>. + The Flowbite name and logos are trademarks of + <%= link_to("Bergside Inc", "https://flowbite.com/brand/") %>. The + Tailwind name and logos are trademarks of + <%= link_to("Tailwind Labs Inc", "https://tailwindcss.com/brand") %>.
From 0278737cbe31d97d471a9c50f26d3267d026a230 Mon Sep 17 00:00:00 2001 From: Jakob Skjerning Date: Mon, 1 Dec 2025 15:40:36 +0100 Subject: [PATCH 3/4] Apply Flowbite 4 design tokens --- app/components/flowbite/card/card.html.erb | 3 +- demo/app/assets/tailwind/application.css | 2 +- demo/app/views/layouts/application.html.erb | 23 ++++++------ demo/app/views/pages/index.html.erb | 39 +++++++-------------- 4 files changed, 25 insertions(+), 42 deletions(-) diff --git a/app/components/flowbite/card/card.html.erb b/app/components/flowbite/card/card.html.erb index 82c1702..255ee5b 100644 --- a/app/components/flowbite/card/card.html.erb +++ b/app/components/flowbite/card/card.html.erb @@ -1,6 +1,7 @@ <%= content_tag(:div, card_options) do %> <%= title %> + <% if content.present? %> -
<%= content %>
+
<%= content %>
<% end %> <% end %> diff --git a/demo/app/assets/tailwind/application.css b/demo/app/assets/tailwind/application.css index 5524d95..5b6c13f 100644 --- a/demo/app/assets/tailwind/application.css +++ b/demo/app/assets/tailwind/application.css @@ -13,5 +13,5 @@ @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); footer a { - @apply font-medium text-blue-600 dark:text-blue-500 hover:underline; + @apply font-medium text-brand hover:underline; } diff --git a/demo/app/views/layouts/application.html.erb b/demo/app/views/layouts/application.html.erb index 1106ecf..e3cb386 100644 --- a/demo/app/views/layouts/application.html.erb +++ b/demo/app/views/layouts/application.html.erb @@ -24,9 +24,9 @@ <%= stylesheet_link_tag :app %> - +
-