For learning: How should this be done in Jeet Framework?

StackOverflow https://stackoverflow.com/questions/16709625

  •  30-05-2022
  •  | 
  •  

Question

A general starting-question about Jeet, just for learning the system: How can I get blocks lined up equally in nested blocks in Jeet Framework?

How can something like this be made, with floating width on max-width: 1450px? And within Jeet philosophy with as little id and classes as possible? On my actual site I had to use at least some classes to get there.

<html>
    <head>
      <style>
        #container { width: 950px; margin:0 auto; padding:30px; }
        #leftblock { float:left; width:610px; }
        .fullwidthleft { clear:both; }
        .fullwidthleft-inner { padding:30px; background:#999; }
        .left { float:left; padding:30px; width:245px; background:#aaa; }
        .right { float:right; padding:30px; width:245px; background:#bbb; }
        #sidebar { float:right; width: 280px; padding:30px; background:#ccc; }
        .fullwidth { clear:both; padding:30px; background:#ddd; }
      </style>
    </head>
    <body>
        <div id="container">
            <div id="leftblock">
                <div class="fullwidthleft">
                    <div class="left">
                        Leftside
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                    <div class="right">
                        Rightside
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                </div>
                <div class="fullwidthleft">
                    <div class="fullwidthleft-inner">
                        Fullwidth leftblock
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                </div>
            </div>
            <div id="sidebar">
                Sidebar 1
                <p>
                    lis purus auctor posuere. Praesent auctor dolor quis risus tempor sit amet fermentum turpis cursus.
                </p>
                <p>
                    Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien? Vestibulum id ligula turpis, at sollicitudin justo. Sed ornare ligula malesuada erat molestie ut tempus ipsum molestie. Duis blandit tellus in quam ullamcorper sed fermentum ipsum varius. Nam sit amet eros eget dui condimentum congue eget nec est. In porttitor lacus nec risus molestie commodo. Praesent vitae justo nec odio dapibus sodales sit amet ultrices sem.
                </p>
                <p>
                    Nullam sem dolor, porta nec ultricies eget, eleifend ut lacus? Nullam fermentum placerat erat vitae dapibus. Aliquam adipiscing hendrerit congue. Sed id scelerisque elit. Nunc scelerisque est sed odio accumsan in vehicula turpis tincidunt. Nulla facilisi. Nulla cursus lacinia elit, a lobortis tortor lobortis vel. Vestibulum sed lorem nunc. Curabitur a luctus ligula. In sit amet ullamcorper sapien?
                </p>
            </div>
            <div id="leftblock">
                <div class="fullwidthleft">
                    <div class="left">
                        Leftside
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                    <div class="right">
                        Rightside
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                </div>
                <div class="fullwidthleft">
                    <div class="fullwidthleft-inner">
                        Fullwidth leftblock
                        <p>
                            libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                        </p>
                    </div>
                </div>
            </div>
            <div class="fullwidth">
                Fullwidth
                <p>
                    libero. Nunc commodo, nunc eu ultrices sollicitudin, dolor purus tincidunt nibh, non faucibus velit quam sit amet odio. Mauris volutpat mauris turpis, vitae varius nulla.
                </p>
            </div>
        </div>
    </body>
</html>

See http://botanisk-hage-tromso.net/jeet-test.html

Was it helpful?

Solution

Jeet author here. I'm not against classes, but I don't think they need to be used for everything.

I recreated your example in about 2 minutes with a much smaller HTML/CSS footprint. Let me know if it helps or you have any further questions about it, but hopefully it gives you a better understanding of Jeet.

If you learn nth-child, you'll have a much nicer time: http://css-tricks.com/how-nth-child-works/

HTML: http://pastie.org/7949308

Stylus:

div
    center()
.left_side
    span(2,3)
aside
    span(1,3)
    padding 15px 30px
    background rgba(0,0,0,.25) 
article
    span(1,2)
    padding 15px 30px
    background rgba(0,0,0,.1)
    &:nth-child(3n+2)
        background rgba(0,0,0,.2) 
    &:nth-child(3n+3)
        span(1,1)
        background rgba(0,0,0,.15) 
.full_width
    span(1,1)
    padding 15px 30px
    background rgba(0,0,0,.3) 
h1
    margin 0 0 10px

Result: http://jeetframework.com/examples/1/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top