Rebranded "Roux Components" to just Roux by pangolingo · Pull Request #21 · thoughtbot/roux

pangolingo · 2026-06-05T19:31:39Z

added info about components to the repo README
updated the docs site to be about "Roux" not "Roux Components"
shared copy between the README and homepage

- added info about components to the repo README - updated the docs site to be about "Roux" not "Roux Components" - shared copy between the README and homepage

pangolingo · 2026-06-05T19:32:48Z

@@ -1,6 +1,6 @@
-{%- set siteName = 'Roux Components' -%}
+{%- set siteName = 'Roux CSS' -%}


I'm not sure if the site title should be just "Roux" or "Roux CSS". I feel like "Roux CSS" might be better for SEO as well as being more self-explanatory in search results.

Ooo good question. Should it be maybe Roux CSS and Components then to incorporate both? or Roux CSS and HTML starter if we're going the SEO route?

I think "Roux CSS & Components" works well.

Copilot

Pull request overview

Updates project and docs-site copy to reflect the “Roux” branding and to share common messaging between the repository README and the documentation homepage, while adding more entry points to the docs site.

Changes:

Rewrote the docs homepage content and updated docs-site metadata/labels to match the new positioning.
Expanded the root README with “see it in action” links and additional docs-site references.
Introduced a shared footer snippet and converted some inline links to reference-style links.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
`site/robots.txt`	Updates the robots.txt header branding text.
`site/README.md`	Renames the docs-site README title to match current branding.
`site/index.md`	Replaces the docs homepage copy and adds shared footer/link refs.
`site/assets/css/site.css`	Updates docs-site CSS header comments to reflect new naming.
`site/_includes/partials/_header.njk`	Updates the header logo text branding.
`site/_includes/layouts/base.njk`	Updates site name/description used for titles/meta.
`README.md`	Expands README messaging and adds docs-site links/examples.
`package.json`	Updates npm package description to mention HTML components.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+{%- set siteName = 'Roux CSS' -%}
 {%- set siteUrl = 'https://roux.thoughtbot.dev' -%}
-{%- set siteDescription = 'Extend Roux CSS with ready-to-use components to build your project.' -%}
+{%- set siteDescription = 'A boilerplate of pre-defined native CSS architecture, styling, and HTML to kickstart your project.' -%}


  </a>

-  <a class="header-logo" href="{{ '/' | url }}"> Roux Components </a>
+  <a class="header-logo" href="{{ '/' | url }}"> Roux CSS</a>


@@ -1,4 +1,4 @@
-# Robots.txt for Roux Components
+# Robots.txt for Roux CSS


+/* Site-specific styles for Roux CSS documentation */
+/* These styles are only used for the documentation website, not part of the Roux framework */


-    </nav>
-  </footer>
-```
+Checkout the [GitHub README][github] for all the details on how to use Roux. Then come back here to grab the HTML for components.


-├── _header.css
-├── _navigation.css
-└── _footer.css
+├── _alert_.css


pangolingo · 2026-06-05T19:34:44Z

-
-  <footer class="page-footer">
-   <p class="page-copyright">&copy; 2026 thoughtbot, inc.</p>
+## Getting Started


Deleted all the "getting started" stuff in favor of just pointing at the README.

pangolingo · 2026-06-05T19:35:06Z

+## A boilerplate of native CSS architecture, styling, and HTML to kickstart your project.

-Much like Roux CSS, these components are meant as a baseline for you to build on top of, so feel free to adjust as needed. They're flexible and extendable, but opinionated about what matters.
+Roux gives you an organized foundation of CSS files, variables, base styles, and simple HTML components so you can start building immediately instead of setting everything up from scratch. It's **a structured starting point for writing your own CSS**—not a framework like Tailwind. Think of it like a GitHub template repo, but for your stylesheets.


This into text now matches the README for consistency.

Suggested change

Roux gives you an organized foundation of CSS files, variables, base styles, and simple HTML components so you can start building immediately instead of setting everything up from scratch. It's **a structured starting point for writing your own CSS**—not a framework like Tailwind. Think of it like a GitHub template repo, but for your stylesheets.

Roux gives you an organized foundation of CSS files, variables, base styles, and simple HTML components so you can start building immediately instead of setting everything up from scratch. It's **a structured starting point for writing your own CSS and HTML**—not a framework like Tailwind or Material UI. Think of it like a GitHub template repo, but for your stylesheets and basic component markup.

pangolingo · 2026-06-05T19:36:21Z

 #### Example

-**Default modal**
+[View example modals on the docs site][docs site modals]


I'm keeping the CSS examples in this README, but pointing to the docs site for HTML.

enatario

Aw yis! Great stuff, just a few minor comments

enatario · 2026-06-05T19:53:11Z

@@ -1,6 +1,6 @@
-{%- set siteName = 'Roux Components' -%}
+{%- set siteName = 'Roux CSS' -%}


Ooo good question. Should it be maybe Roux CSS and Components then to incorporate both? or Roux CSS and HTML starter if we're going the SEO route?

enatario · 2026-06-05T19:54:56Z

+## A boilerplate of native CSS architecture, styling, and HTML to kickstart your project.

-Much like Roux CSS, these components are meant as a baseline for you to build on top of, so feel free to adjust as needed. They're flexible and extendable, but opinionated about what matters.
+Roux gives you an organized foundation of CSS files, variables, base styles, and simple HTML components so you can start building immediately instead of setting everything up from scratch. It's **a structured starting point for writing your own CSS**—not a framework like Tailwind. Think of it like a GitHub template repo, but for your stylesheets.


Suggested change

Roux gives you an organized foundation of CSS files, variables, base styles, and simple HTML components so you can start building immediately instead of setting everything up from scratch. It's **a structured starting point for writing your own CSS**—not a framework like Tailwind. Think of it like a GitHub template repo, but for your stylesheets.

Roux gives you an organized foundation of CSS files, variables, base styles, and simple HTML components so you can start building immediately instead of setting everything up from scratch. It's **a structured starting point for writing your own CSS and HTML**—not a framework like Tailwind or Material UI. Think of it like a GitHub template repo, but for your stylesheets and basic component markup.

enatario · 2026-06-05T19:56:18Z

+Roux gives you an organized foundation of CSS files, variables, base styles, and simple HTML components so you can start building immediately instead of setting everything up from scratch. It's **a structured starting point for writing your own CSS**—not a framework like Tailwind. Think of it like a GitHub template repo, but for your stylesheets.

-All components are accessible and semantic by default.
+You can cherry-pick what you need, use it for inspiration, or adopt the whole system—whatever works for your project. It's flexible and extendable, but opinionated about what matters. All HTML components are accessible and semantic by default.


Suggested change

You can cherry-pick what you need, use it for inspiration, or adopt the whole system—whatever works for your project. It's flexible and extendable, but opinionated about what matters. All HTML components are accessible and semantic by default.

You can cherry-pick what you need, use it for inspiration, or adopt the whole system—whatever works for your project. It's flexible and extendable, but opinionated about what matters. All HTML components aim to be accessible and semantic by default.

I only suggest now since we can't always claim they are fully accessible since that's a spectrum.

enatario · 2026-06-05T19:56:33Z

+You can cherry-pick what you need, use it for inspiration, or adopt the whole system—whatever works for your project. It's flexible and extendable, but opinionated about what matters. All HTML components are accessible and semantic by default.

-Find the code in [the Roux repo on GitHub](https://github.com/thoughtbot/roux).
+You may have used [Bitters] and [Refills] in the past—move on over to a fully native setup with Roux.


Rebranded "Roux Components" to just Roux

0507b2b

- added info about components to the repo README - updated the docs site to be about "Roux" not "Roux Components" - shared copy between the README and homepage

pangolingo requested a review from enatario as a code owner June 5, 2026 19:31

pangolingo requested a review from Copilot June 5, 2026 19:31

Copilot started reviewing on behalf of pangolingo June 5, 2026 19:32 View session

pangolingo commented Jun 5, 2026

View reviewed changes

Copilot AI reviewed Jun 5, 2026

View reviewed changes

pangolingo commented Jun 5, 2026

View reviewed changes

enatario reviewed Jun 5, 2026

View reviewed changes

		@@ -1,6 +1,6 @@
		{%- set siteName = 'Roux Components' -%}
		{%- set siteName = 'Roux CSS' -%}

		@@ -1,4 +1,4 @@
		# Robots.txt for Roux Components
		# Robots.txt for Roux CSS

		/* Site-specific styles for Roux CSS documentation */
		/* These styles are only used for the documentation website, not part of the Roux framework */

	You can cherry-pick what you need, use it for inspiration, or adopt the whole system—whatever works for your project. It's flexible and extendable, but opinionated about what matters. All HTML components are accessible and semantic by default.
	You can cherry-pick what you need, use it for inspiration, or adopt the whole system—whatever works for your project. It's flexible and extendable, but opinionated about what matters. All HTML components aim to be accessible and semantic by default.

Uh oh!

Conversation

pangolingo commented Jun 5, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

enatario left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants