vertmac / designmodo-startup_framework-rails

A gem to integrate designmodo Startup Framework in Rails
BSD 2-Clause "Simplified" License
36 stars 5 forks source link

Design broken from onset #3

Open rklubenspies opened 10 years ago

rklubenspies commented 10 years ago

Hi there!

I love that you put this together, but I'm having an awful time trying to make it work. I've followed the instructions here, as well as the ones in DesignModo's post about your plugin.

Both times I tried to set this up, the result is a very broken page (see below). I have no clue what could be going wrong. I'm using the configuration without Flat UI Pro on Rails 4.1.1.

broken

Any ideas?

-Robert

ronban commented 10 years ago

Can you paste the contents of the generated erb file called index here. Probably there is something wrong in that.

rklubenspies commented 10 years ago

Here's the application.html.erb layout:

<!DOCTYPE html>
<html>
<head>
  <title>Startup</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

And here's the index12.html.erb view:

    <div class="page-wrapper">
        <!-- header-20 -->
        <header class="header-20">
            <div class="container">
                <div class="row">
                    <div class="navbar col-sm-12" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle"></button>
                            <a class="brand" href="#">
                                <img src="/assets/startup-framework/common-files/icons/Infinity-Loop@2x.png" width="50" height="50" alt=""> Startup
                            </a>
                        </div>
                        <div class="navbar-collapse collapse pull-right">
                            <ul class="nav">
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#">Blog</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header-background"></div>
        </header>
        <section class="header-20-sub">
            <div class="background">
                &nbsp;
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-4 col-sm-offset-2 pull-right">
                        <div class="img-wrapper">
                            <img src="/assets/startup-framework/common-files/img/header/hexahedron@2x.png" width="334" height="324" alt="">
                            <div class="visible-xs"><img src="/assets/startup-framework/common-files/img/header/browser-iphone@2x.png" width="300" height="300" alt="">
                            </div>
                            <div class="img hidden-xs">
                                <img src="/assets/startup-framework/common-files/img/header/browser-iphone@2x.png" width="300" height="300" alt="">
                                <img src="/assets/startup-framework/common-files/img/header/browser1@2x.png" width="240" height="255" alt="">
                                <img src="/assets/startup-framework/common-files/img/header/iphone@2x.png" width="144" height="264" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4 col-sm-offset-1">
                        <h3>Perfect for your
                        startup project</h3>
                        <p>
                            Use your time for generating new ideas for your startup.
                        </p>
                        <br>
                        <a class="btn btn-info" href="#">Learn More</a>
                    </div>

                </div>

                <div class="row">
                    <div class="col-sm-11 col-sm-offset-1">
                        <div class="videos">
                            <div class="video-box active">
                                <div class="player">
                                    <div class="btn btn-play fui-play"></div>
                                </div>
                                <div class="description">
                                    Ultra fast<br class="hidden-phone">scripting
                                </div>
                            </div>
                            <div class="video-box">
                                <div class="player">
                                    <div class="btn btn-play fui-play"></div>
                                </div>
                                <div class="description">
                                    Time<br class="hidden-phone">economy
                                </div>
                            </div>
                            <div class="video-box">
                                <div class="player">
                                    <div class="btn btn-play fui-play"></div>
                                </div>
                                <div class="description">
                                    Ready for<br class="hidden-phone">retina
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- tpl-12 custom section-1-->
        <section class="tpl-12-section-1">
            <div class="container">
                <h3>Demo version</h3>
                <p>
                    In this demo version of Startup Framework, we show you the structure of our framework. The package
                    includes few samples that can be used to create the design and also the components those samples were made of.
                </p>

                <!-- logos -->
                <section class="logos">
                    <div><img src="/assets/img/logos/generator.png" height="29" width="140" alt="Generator" /></div>
                    <div><img src="/assets/img/logos/theGuardian.png" height="29" width="164" alt="TheGuardian" /></div>
                    <div><img src="/assets/img/logos/forbes.png" height="29" width="93" alt="Forbes" /></div>
                    <div><img src="/assets/img/logos/theNewYorkTimes.png" height="29" width="201" alt="TheNewYorkTimes" /></div>
                    <div><img src="/assets/img/logos/tumblr.png" height="29" width="119" alt="Tumblr." /></div>
                </section>
            </div>
        </section>

        <!-- content-10 without carousel -->
        <section class="content-10 bg-clouds">
            <img width="" height="100%" alt="" src="/assets/img/ipad@2x.png" >
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <h3>Features</h3>
                        <p>
                            Startup Framework will help you to find an awesome form for your startup project in a short time.
                        </p>
                        <div class="features">
                            <div class="box">
                                <img src="/assets/startup-framework/common-files/icons/time@2x.png" width="100" height="100" alt="">
                                <h6>Block model</h6>
                                <p>
                                    You can easily combine any components in a variety of design projects.
                                </p>
                            </div>
                            <div class="box">
                                <img src="/assets/startup-framework/common-files/icons/Gift-Box@2x.png" width="100" height="100" alt="" >
                                <h6>Multi-components</h6>
                                <p>
                                    There are a lot of different components that will help you to make a perfect project.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- tpl-12 custom section-2 -->
        <section class="tpl-12-section-2">
            <div class="container">
                <div class="row">
                    <div class="col-sm-10 col-sm-offset-1">
                        <h3>Sign Up right now and get 30% off</h3>

                        <div class="signup-form">
                            <form>
                                <div class="controls controls-row">
                                    <input type="text" class="form-control" placeholder="Your E-mail">
                                    <input type="password" class="form-control" placeholder="Password">
                                    <input type="password" class="form-control" placeholder="Confirmation">
                                    <button type="submit" class="btn btn-info">
                                        Sign Up
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- footer-11 -->
        <footer class="footer-11">
            <div class="container">
                <a class="brand" href="#"><img src="/assets/img/infinity-bw@2x.png" width="42" height="21" alt=""></a>
                <div class="social-btns">
                    <a href="#"><div class="fui-vimeo"></div><div class="fui-vimeo"></div></a>
                    <a href="#"><div class="fui-facebook"></div><div class="fui-facebook"></div></a>
                    <a href="#"><div class="fui-twitter"></div><div class="fui-twitter"></div></a>
                </div>

                <nav>
                    <ul>
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">Blog</a>
                        </li>
                        <li>
                            <a href="#">Portfolio</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="additional-links">
                <div class="container">
                    <p class="lead">
                        <b>200,000</b> users registered since January
                    </p>
                    <a href="#">Terms &amp; Conditions</a>
                    <a href="#">Privacy Policy</a>
                    <a href="#">Advertise</a>
                    <a href="#">Affiliate Program</a>
                    <a href="#">Contact Us</a>
                </div>
            </div>
        </footer>
    </div>

Finally, here's my Gemfile:

source 'https://rubygems.org'

gem 'rails', '4.1.1'
gem 'sqlite3'
gem 'sass-rails', '~> 4.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'

gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0',          group: :doc

gem 'spring',        group: :development

gem 'therubyracer', platforms: :ruby
gem 'less-rails'
gem 'less-rails-bootstrap'
gem 'jquery-ui-rails'
gem 'twitter-bootstrap-rails', git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git', branch: 'bootstrap3'
gem 'designmodo-startup_framework-rails', '~> 1.1.3.10'

I was thinking it might be a glitch with bootstrap?

kevinrivers commented 10 years ago

@rklubenspies I am working on some patches. I had similar issues and traced it down to a few things. You can get these changes on my fork, in the branch jquery-ui-gsub-patches

There are some additional things that need to be improved however. For example, flat-ui isn't being loaded. I fixed this provisionally by adjusting the css manifest like so:

 *= require bootstrap_and_overrides
 *= require flat-ui
 *= require some_sample#

Be sure to run this before running the framework installer.

rails generate bootstrap:install less

Lastly, I am still working on a few other changes. Namely, utilizing the asset pipeline within the samples instead of copying assets over. But hopefully the patches above get you going.

rklubenspies commented 10 years ago

Awesome!! Thanks so much! I will try these as soon as I can.

Sent from my iPhone

On Jul 8, 2014, at 4:15 PM, Kevin Rivers notifications@github.com wrote:

@rklubenspies I am working on some patches. I had similar issues and traced it down to a few things. You can get these changes on my fork, in the branch jquery-ui-gsub-patches

There are some additional things that need to be improved however. For example, flat-ui isn't being loaded. I fixed this provisionally by adjusting the css manifest like so:

= require bootstrap_and_overrides = require flat-ui = require some_sample# = require_self Be sure to run this before running the framework installer.

rails generate bootstrap:install less Lastly, I am still working on a few other changes. Namely, utilizing the asset pipeline within the samples instead of copying assets over. But hopefully the patches above get you going.

— Reply to this email directly or view it on GitHub.

kevinrivers commented 10 years ago

Looking over the original article on designmodo, the example screenshot does not match the design the flat sample files. It seems to be because of the missing flat-ui requirement. Just thought I would add that in so the maintainer is aware.

kalockwood commented 10 years ago

THANK YOU so much for this workaround. I had the exact same problem and this has been a huge help. thanks!!!

chug2k commented 9 years ago

I don't think the generator copies the flat-ui files into the right place.