2

I am working on a complete overhaul of an old, static site that I had put together. The overhauled app is being built using Rails (4, Ruby 2). I would like to include the old static site in the new app and have it accessible by visiting either www.classic.my_site.com or www.my_site.com/classic, however, many of the CSS class/ID names (utilized by both CSS and JS) used in the old and new sites overlap with each other, so adding the old css and js files into the new app would completely screw things up.

What is the easiest way to add the old site's files (it's only 3 files: index.html, custom.css, and my_js.js, in addition to a few images) to the new site without having to go through and rename all of the css classes and id's?

Is there any reason/convention to go with one URL over the other (classic.my_site vs. my_site.com/classic)? If classic.my_site is the way to go, what is the best way to implement this?

Thanks!

jackerman09
  • 2,492
  • 5
  • 29
  • 46

2 Answers2

1

Disclaimer: I may be completely off with this and it might not be best practice.

So, Rails 4 automatically includes the 'sass-rails' gem to your project. If you're open to converting your files to scss files, you could simply create two different parent classes:

  • One that encompasses your old stylesheet
  • Another one that encompasses your new stylesheet

For example:

Old style sheet

.old-stylesheet-parent-class {
    //Copy all your old styles in here
    .main-block{
        background: blue;
        font-size: 12px;
    }    
}

New style sheet:

.new-stylesheet-parent-class {
    //Copy all your new styles in here
    .main-block{
        background: red;
        font-size: 16px;
    }    
}

Your markup (old static page):

<html>
    <head>
        <title>My Old Page</title>
    </head>
    <body class="old-stylesheet-parent-class">            
        <div class="main-block">
            <p>Hello World!</p>
        </div>
    </body>
</html>

If you encompass your old & new styles within the parent class, the styles shouldn't stomp all over each other anymore. Again, there might be a better way of doing this but this method is a very quick solution and requires little to no effort.

Good luck! Hopefully this works.

blisaur
  • 11
  • 1
  • Thanks, this seems like it could work, but I'd rather not bloat the new page. Do you think it would work if I only added a parent class to the old page's CSS/HTML? What about the JS? It is basically a single-page app built without a framework, so it's pretty JS-intensive. – jackerman09 Apr 17 '14 at 19:52
  • Most likely no. So, if you only put a parent class on the old page's CSS, it could potentially work since the parent class would add higher priority to the old stylesheet classes. However, if you have attributes that exist on the new stylesheet that don't exist on the old stylesheet, then the old class would inherit those attributes. To illustrate this better, check out this fiddle http://jsfiddle.net/blibotics/KXDEs/. The old stylesheet doesn't have the attribute 'background', but the red color was inherited from the new stylesheet. In terms of JS, there's no work around to my knowledge. – blisaur Apr 18 '14 at 00:46
0

Alternative solution: I think this should do the trick! Look into loading a specific stylesheet and javascript depending on the controller.

I know you're working with Rails 4, but these threads should help.

This one is controller specific stylesheet.

This one is controller specific scripts.

Community
  • 1
  • 1
blisaur
  • 11
  • 1