search

jslegers / cascadeframework

Cascade Framework
Other
275 stars 52 forks source link

Can I make this design easily #77

Closed ghost closed 9 years ago

ghost commented 10 years ago

For a financial app I need a layout like this : http://imagebin.org/314883 Can this be easily be done ?

Roelof

jslegers commented 10 years ago

I can't see your image.

The Website Ahead Contains Malware!
Google Chrome has blocked access to imagebin.org for now.
Even if you have visited this website safely in the past, visiting
it now is very likely to infect your computer with malware.
Malware is malicious software that causes things like identity theft,
financial loss, and permanent file deletion.
ghost commented 10 years ago

here another I hope safe url : http://imgur.com/TL77n7z

jslegers commented 10 years ago

Download Cascade Framework and add a file named financialapp.html with the following HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/cascade/production/build-full.min.css" />
        <link rel="stylesheet" type="text/css" media="all"  href="assets/css/site.css" />
        <!--[if lt IE 8]><link rel="stylesheet" href="assets/css/cascade/production/icons-ie7.min.css"><![endif]-->
        <!--[if lt IE 9]><script src="assets/js/shim/iehtmlshiv.js"></script><![endif]-->
        <title>My financial app</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="site-header">
            <div class="cell">
                Header
            </div>
        </div>
        <div class="site-body">
            <div class="col width-1of5">
                <div class="menu cell">
                    <ul class="left nav">
                        <li class="active-item"><a href="#" class="">Normal item</a></li>
                        <li class="active"><a href="#" class="">Active item</a></li>
                        <li class="disabled">Disabled item</li>
                        <li class=""><a href="#" class="">Another normal item</a></li>
                    </ul>
                </div>
            </div>
            <div class="col width-fill">
                <div class="col">
                    <div class="col width-1of2">
                        <div class="cell panel">
                            <div class="body">
                                <div class="cell">
                                    Balance
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col width-fill">
                        <div class="cell panel">
                            <div class="body">
                                <div class="cell">
                                    Profit/Loss
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="col width-1of2">
                        <div class="cell panel">
                            <div class="body">
                                <div class="cell">
                                    Unpaid invoices
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col width-fill">
                        <div class="cell panel">
                            <div class="body">
                                <div class="cell">
                                    Unpaid bills
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="site-footer">
            <div class="cell">
                Footer
            </div>
        </div>
        <script src="assets/js/app.js"></script>
    </body>
</html>
ghost commented 10 years ago

Thanks, Can this also be used in a Ruby on Rails enviroment.

jslegers commented 10 years ago

@roelof1967 :

Can this also be used in a Ruby on Rails enviroment.

Sure. It doesn't matter which backend environment you use. You could use PHP, Python, Ruby, Java, .NET, Node.js, etc.

ghost commented 10 years ago

Thanks for all, Time to figure out how to make this work in a Ror enviroment.

ghost commented 10 years ago

I reopen it for a little question. How do I make the body 100% all the time. So it uses the whole screen with the width and the length.

jslegers commented 10 years ago

How do I make the body 100% all the time. So it uses the whole screen with the width and the length.

The example code I gave you should do that.

If you're working with demo code you downloaded from Github, just remove the "site-center" class.

ghost commented 10 years ago

I work with the example code. Im mistaken . It's the site body who is not 100% of the screen. Is there a way I can change the min.css files. Its now not very handy to change a few things. like a background-image and some shadow.

jslegers commented 10 years ago

@roelof1967 :

The "cell" classes add equal padding to different sections of the page. If you don't want this padding, remove the "cell" classes.

And if you don't want to keep eg. the color scheme or the shadows, replace the link to assets/css/cascade/production/build-full.min.css with a link to assets/css/cascade/production/build-core+typography+responsive.min.css.