An intuitive and very DRY CSS framework that lets you dictate styling with classes that behave as they are named.


Add this line to your application's Gemfile:

gem 'dictate_css'

And then execute:

$ bundle

Or install it yourself as:

$ gem install dictate_css


Run this in your console to create the styles in your vendor/assets/stylesheets directory

rails g dictate_css styles


Pick and choose which stylesheets to include in your asset pipeline. base is not optional.

# app/assets/stylesheets/application.css

*= require "dictate_css/base"
*= require "dictate_css/colors"
*= require "dictate_css/floating"
*= require "dictate_css/hide_show"


<div class="inline-block">
  My style is display: inline-block;

<div class="relative">
  My style is position: relative;

<div class="absolute">
  My style is position: absolute;

<div class="text-right">
  My style is text-align: right;

<div class="width-100">
  My style is width: 100%;

<div class="hide-on-mobile">
  My style is
  @media only screen and (max-width: 768px) {
    .hide-on-mobile {
      display: none;


Bug reports and pull requests are welcome on GitHub at https://github.com/milesstanfield/dictate_css. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.


The gem is available as open source under the terms of the MIT License.