Skip to content

Sensible semantic HTML styling out the box for Ruby on Rails applications

Notifications You must be signed in to change notification settings

davidteren/simple_tails

Repository files navigation

SimpleTails

SimpleTails is inspired by Simple.CSS a classless CSS framework that makes semantic HTML look good.

I wanted a way to to have sensible styling in a Rails application with minimal setup with the added bonus of being abble to easily change the defaults or overide them.

SimpleTails leverages the official Tailwind CSS Typography plugin prose classes with some custom setup. This makes it possible to have default styling out the box.


Bennefits

Click below to see some examples.

Typography Example

πŸ“˜

Click to view

HTML heading tags and unordered lists

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<ul>
  <li>
    <strong>I am bold</strong>
  </li>
  <li>
    <em>I am italic</em>
  </li>
  <li>
    <u>I am underlined</u>
  </li>
</ul>

Renders the following


Basic Table Example

πŸ“‚

Click to view

A table with just enough styling can be rendered from something like this

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <% %w(John Sally Mary Peter Simon James).shuffle.each do |name| %>
      <tr>
        <td><%= name %></td>
        <td><%= rand(99999) %></td>
      </tr>
    <% end %>
  </tbody>
</table>

Renders the following


Basic Header & Nav Example

🧭

Click to view

For a quick header and navigation solution

<header>
  <nav>
    <%= link_to "Home", root_path %>
    <%= link_to "Services", services_path %>
    <%= link_to "Blog", posts_path %>
    <%= link_to "About", about_us_path %>
    <%= link_to "Contact", contacts_path %>
  </nav>
  <h1 class="">SimpleTails</h1>
  <p>Build fast using symantic HTML tags in Rails</p>
</header>

Renders the following

And on mobile


Typography With Inline Overides Example

πŸ“™

Click to view

<h1 class="font-extralight">Heading 1</h1>
<h2 class="text-red-500">Heading 2</h2>
<h3 class="text-sm">Heading 3</h3>
<ul>
  <li>
    <strong>I am <span class="text-pink-600 font-extrabold">bold</span></strong>
  </li>
  <li>
    <em>I am <span class="text-orange-600 text-3xl font-extralight">italic</span></em>
  </li>
</ul>

Renders the following


Basic Form Example

πŸ“

Click to view

Click here to view the code
<%= form_with url: "/", method: :get do |form| %>
<p>
  <%= form.label :title %>
  <%= form.select :desired_attribute, %w(Mr Miss Mrs Other) %>
</p>
<p>
  <%= form.label :first_name %>
  <%= form.text_field :first_name %>
</p>
<p>
  <%= form.label :email %>
  <%= form.email_field :email %>
</p>
<p>
  <%= form.label :message %>
  <%= form.text_area :message, rows: 6, data: {character_counter_target: :input} %>
</p>
<p>
  <%= form.label :date %>
  <%= form.date_field :date %>
</p>
<label class="radio-group-name">Age:</label>
<div class="radio-group">
  <p>
    <%= form.radio_button :age, "child" %>
    <%= form.label :age_child, "I am younger than 21" %>
  </p>
  <p>
    <%= form.radio_button :age, "adult" %>
    <%= form.label :age_adult, "I am over 21" %>
  </p>
  <p>
    <%= form.radio_button :age, "eternal", disabled: true %>
    <%= form.label :age_adult, "I am eternal" %>
  </p>
</div>
<p>
  <%= form.label :select_one_or_more %>
  <% @cities = [
  {id: 1, name: "Berlin"},
  {id: 2, name: "Chicago"},
  {id: 3, name: "Madrid"},
  {id: 4, name: "Cape Town"}
  ].collect { |u| [u[:name], u[:id]] } %>
  <%= select_tag :city,
  options_for_select(@cities),
  multiple: true %>
</p>
<div class="checkbox-group">
  <p>
    <%= form.check_box :agree_to_terms %>
    <label for="agree_to_terms"> I agree to the <a href="#">terms and conditions</a></label>
  </p>
</div>
<%= form.button %>
<%= form.button "Clear" %>
<%= form.button "Disabled", disabled: true %>`
<% end %>

Renders the following


How it works

A single portable stylesheet with custom TailwindCSS prose is used.
All the magic is here: simple_tails.css

You only need the simple_tails.css stylesheet. This Rails app exists for the purpose of developing and refining SimpleTails.


Usage:

Prerequisites:

  • You have TailwindCSS installed and working in your Rails app
  • You have the @tailwindcss/typography plugin installed
  1. Copy the simple_tails.css file found in this project to your app.
  2. In your application.css import that file.
  3. Copy the color scheme you want from app/assets/stylesheets/custome_colors to your app or copy them all and switch between them by uncommenting the one you want to use.
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";


/*Select the theme you want to use by uncommenting */
/*@import "./custom_colors/amber.css";*/
/*@import "./custom_colors/blue.css";*/
...
@import "./custom_colors/slate.css";
...
/*@import "./custom_colors/yellow.css";*/

@import "./simple_tails.css";

Then add the .simple-tails class to the element encapsulating the HTML you want to style.

If you want any element to be prose free and have it revert to the default unstyled TailwindCSS use the not-prose class

<main class="simple-tails" >
  <h1>Some Heading</h1>
  <p>Some blurb here...</p>
    <!-- Content styled via custom prose -->
  <div>
    <!-- Some content that needs to be prose-free -->
  </div>
</main>

Developing or trying it out via this app.

Clone this repo

git clone git@github.com:davidteren/simple_tails.git

Change into the project directory

cd simple_tails

Run the setup script

./bin/setup

If the app is not started after the setup run

./bin/dev

Visit 127.0.0.1:3000

Loging using the following credentials:

Email Password
user@example.com pass123

Example Screenshot

Contribute

Please feel free to do so πŸš€

To Do

  • Fix off center layouts
  • Add a way for forms to be centered i.e. devise forms
  • Implement dark/light modes
  • Add the footer styling
  • Add color theme options including original Simple.CSS Dark & Light themes

About

Sensible semantic HTML styling out the box for Ruby on Rails applications

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published