Skip to content

Latest commit

 

History

History
125 lines (106 loc) · 3.11 KB

0102-lass-flexbox.org

File metadata and controls

125 lines (106 loc) · 3.11 KB
Raw

lass-flexbox

This is an addon to the lass library, reviewed in #0021 post. Lass-flexbox adds to lass an ability to expand Flexbox CSS properties into browser-specific vendor prefixes:

POFTHEDAY> (lass:compile-and-write
            '(.container :flexbox
              (.item :align-self "center")))
".container{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.container .item{
    -webkit-align-self: center;
    -moz-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}"

I found a great illustrated article on how does Flexbox works and now we’ll try to reproduce some layout from this article:

POFTHEDAY> (format t "<style>~A</style>
                      <div class=\"example\">
                        <div class=\"item\">One</div>
                        <div class=\"item\">Two</div>
                        <div class=\"item\">Three</div>
                      </div>
                     "
                   (lass:compile-and-write
                    '(.example
                      :flexbox
                      :align-items "flex-end"
                      :justify-content "space-around"
                      :border 1px solid gray
                      (.item :margin 0.5rem
                             :padding 0.5rem)
                      ((:and .item (:nth-child 1))
                       :background lime
                       :flex 1
                       :height 30px)
                      ((:and .item (:nth-child 2))
                       :background orange
                       :flex 2
                       :height 70px)
                      ((:and .item (:nth-child 3))
                       :background purple
                       :flex 3
                       :height 50px))))

This lisp code will generate us these CSS and HTML:

<style>.example{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end;
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
    border: 1px solid gray;
}

.example .item{
    margin: 0.5rem;
    padding: 0.5rem;
}

.example .item:nth-child(1){
    background: lime;
    flex: 1;
    height: 30px;
}

.example .item:nth-child(2){
    background: orange;
    flex: 2;
    height: 70px;
}

.example .item:nth-child(3){
    background: purple;
    flex: 3;
    height: 50px;
}</style>

<div class="example">
  <div class="item">One</div>
  <div class="item">Two</div>
  <div class="item">Three</div>
</div>

Exciting, isn’t it!?