How to create dynamic CSS based on user input

Question

A user should be able to design a room (room is a model) in my Rails app. When the user visits myapp.com/room/1 the room with its content and specific design is shown.

The design or CSS of the room is based on room parameters (color1, color2, ...) and some random generated design characteristics (font type, image border, ...). These characteristics are stored in the room model when the room is saved.

I don't see how I can generate a specific CSS for each room. When the user visits myapp.com/room/1 my app should build specific CSS (or SCSS) for room1. Where (what controller) should I build that CSS?

Thanks

how is store design definition? What kind of information is defined? — Yoann Augen
– Yoann Augen, Commented Dec 12, 2014 at 16:25
This is a clear question to those who have programmed in Rails. — Wayne Conrad
– Wayne Conrad, Commented Dec 15, 2014 at 17:06

fivedigit · Accepted Answer · 2014-12-15 20:04:49Z

16

You can make your RoomsController respond to the CSS format as well in order to get this to work:

# app/controllers/rooms_controller.rb
class RoomsController
  def show
    @room = Room.find(params[:id])

    respond_to do |format|
      format.html
      format.css
    end
  end
end

Then you need to implement a template to be rendered for the CSS format:

/* app/views/rooms/show.css.erb */
.room {
  background-color: <%= @room.color1 %>;
  color: <%= @room.color2 %>;
}

Note how this is very similar to a regular template. You need to make sure that this results in valid CSS.

You need to make sure the stylesheet is included when the user visits the page. Let's say a user can browse their room design when they visit /rooms/1. This will render a HTML template, which we could define as follows:

<!-- app/views/rooms/show.html.erb -->
<% content_for :stylesheet_includes do %>
  <%= stylesheet_link_tag(room_path(@room, format: :css)) %>
<% end %>

<div class="room">
  Room Contents Here
</div>

Notice that I've used content_for around the stylesheet link tag. We can use this to make sure the stylesheet link tag is rendered nicely in the head of the layout:

<!-- app/views/layouts/application.html.erb -->
<head>
  <%= yield :stylesheet_includes %>
</head>

Of course you'll need to fill in the details yourself, but this would be the most logical approach for the problem.

answered Dec 15, 2014 at 20:04

fivedigit

18.7k6 gold badges59 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

new2cpp Over a year ago

my css rule is quite coplex(render chart). I have to write to scss. Is there a way to render to template like 'app/views/rooms/show.css.scss.erb' and then compile scss to css?

YoursTruly · Accepted Answer · 2014-12-15 22:06:27Z

-1

If you design your controller to respond to the show action with json requests, you'll be able to retrieve the attributes of the Room object in json format

http://localhost.com:3000/rooms/1.json

{"id":1,"color1":"black","color2":"green","created_at":"2014-12-15T19:52:21.235Z","updated_at":"2014-12-15T19:52:21.235Z"}

In that case, you can use javascript to make the get request, retrieve the data in JSON, and subsequently use that data to manipulate the dom.

$.get( "rooms/1.json", function( data ) { alert(data); });

edited Dec 15, 2014 at 22:06

answered Dec 15, 2014 at 20:42

YoursTruly

606 bronze badges

Collectives™ on Stack Overflow

How to create dynamic CSS based on user input

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related