Quick Embedded CSS with LESS (2016)

Use Less instead of CSS for a quick markup

Make sure type="text/less" is in your style attribute and followed with the LESS.js script tag within <head/>

<style type="text/less">  
</style>  
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>  
<!DOCTYPE html>  
<html>  
<head>  
    <title>Quick HTML page with less</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" />
    <link rel="stylesheet" href="//designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css" />

    <style type="text/less">
    /* init */
    // Extra small screen / phone
    //** Deprecated `@screen-xs` as of v3.0.1
    @screen-xs:                  480px;
    //** Deprecated `@screen-xs-min` as of v3.2.0
    @screen-xs-min:              @screen-xs;
    //** Deprecated `@screen-phone` as of v3.0.1
    @screen-phone:               @screen-xs-min;

    // Small screen / tablet
    //** Deprecated `@screen-sm` as of v3.0.1
    @screen-sm:                  768px;
    @screen-sm-min:              @screen-sm;
    //** Deprecated `@screen-tablet` as of v3.0.1
    @screen-tablet:              @screen-sm-min;

    // Medium screen / desktop
    //** Deprecated `@screen-md` as of v3.0.1
    @screen-md:                  992px;
    @screen-md-min:              @screen-md;
    //** Deprecated `@screen-desktop` as of v3.0.1
    @screen-desktop:             @screen-md-min;

    // Large screen / wide desktop
    //** Deprecated `@screen-lg` as of v3.0.1
    @screen-lg:                  1200px;
    @screen-lg-min:              @screen-lg;
    //** Deprecated `@screen-lg-desktop` as of v3.0.1
    @screen-lg-desktop:          @screen-lg-min;

    // So media queries don't overlap when required, provide a maximum
    @screen-xs-max:              (@screen-sm-min - 1);
    @screen-sm-max:              (@screen-md-min - 1);
    @screen-md-max:              (@screen-lg-min - 1);
    /* END init */

    /* mixins */
    .flex() {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    }

    .flex--column() {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
          -ms-flex-direction: column;
            flex-direction: column;
    }

    .flex--row() {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
          -ms-flex-direction: row;
            flex-direction: row;
    }

    .flex--align-center() {
        align-items: center;
    }

    .flex-flex(@flex: 1) {
        -webkit-box-flex: @flex;      /* OLD - iOS 6-, Safari 3.1-6 */
        -moz-box-flex: @flex;         /* OLD - Firefox 19- */
        -webkit-flex: @flex;          /* Chrome */
        -ms-flex: @flex;              /* IE 10 */
        flex: @flex;    
    }

    .flex-content(@content) {
        -webkit-justify-content: @content;
        -ms-flex-pack: @content;
        justify-content: @content;
    }

    .text-overflow(@val: ellipsis) {
        text-overflow: @val;
    }

    .filter(@val: blur(5px)) {
        -webkit-filter: @val;
        -moz-filter:    @val;
        -o-filter:      @val;
        -ms-filter:     @val;
        filter:         @val;
    }
    .transition(@type:all, @duration:.4s, @ease:ease-out) when not (@type = all) {
            -ms-transition:     -ms-@type @duration @ease;
           -moz-transition:    -moz-@type @duration @ease;
        -webkit-transition: -webkit-@type @duration @ease;
                transition:         @type @duration @ease;
    }

    .transform(...) {
        -webkit-transform: @arguments;
           -moz-transform: @arguments;
            -ms-transform: @arguments;
             -o-transform: @arguments;
                transform: @arguments;
    }

    .gradient(...) {
        background: -webkit-linear-gradient(@arguments); /* For Safari 5.1 to 6.0 */
        background:    -moz-linear-gradient(@arguments); /* For Firefox 3.6 to 15 */
        background:      -o-linear-gradient(@arguments); /* For Opera 11.1 to 12.0 */
        background:         linear-gradient(@arguments); /* Standard syntax */
    }

    /* END mixins */

    /* util */
    .u-box {
        .flex();
    }

    .u-box--column {
        .flex--column();
    }

    .u-box--row {
        .flex--row();
    }
    // flex-wrap on default `nowrap` where items is inline
    .u-box--wrap {
        flex-wrap: wrap;
    }
    .u-box--wrap-reverse {
        flex-wrap: wrap-reverse;
    }

    .u-box--list {
        margin-right: -1rem;
        margin-bottom: -1rem;

        > * {
            margin-right: 1rem;
            margin-bottom: 1rem;

            &:empty {
                display: none;
            }
        }
    }

    // justify content HORIZONTALLY - left/right
    .u-box--justify {
        &-flex-start {
            justify-content: flex-start;
        }
        &-flex-end {
            justify-content: flex-end;
        }
        &-center {
            justify-content: center;
        }
        &-space-between {
            justify-content: space-between;
        }
        &-space-around {
            justify-content: space-around;
        }
    }

    .u-box--inline {
        display: inline-flex;
    }

    // align content VERTICALLY - up/down
    .u-box--align {
        &-flex-start {
            align-items: flex-start;
        }
        &-flex-end {
            align-items: flex-end;
        }
        &-center {
            align-items: center;
        }
        &-stretch {
            align-items: stretch;
        }
        &-space-between {
            align-items: space-between;
        }
        &-space-around {
            align-items: space-around;
        }
    }


    .u-box--align-center {
        -webkit-align-items: center; /* Safari 7.0+ */
        align-items: center;
    }
    .u-box--flex-end {
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .u-box-flex {
        .flex-flex(1);

        &--minWidth {
            flex-basis: 320px;
        }

        &--grow {
            flex-grow: 1;
        }

        &--shrink {
            flex-shrink: 0;
        }
    }

    .u-box-col--center {
        .flex-content(center);
    }

    .u-relative {
        position: relative;
    }
    .u-absolute {
        position: absolute;
    }
    .u-absolute-full {
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
    }
    .u-hidden {
        display: none;
    }

    .u-invisible {
        visibility: hidden;
    }

    .u-overflow {
        overflow: hidden;
        &-x {
            overflow-x: scroll;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            -webkit-transform: translateZ(0px);
            -webkit-transform: translate3d(0,0,0);
            -webkit-perspective: 1000;
        }

        &-y {
            overflow-x: hidden;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            -webkit-transform: translateZ(0px);
            -webkit-transform: translate3d(0,0,0);
            -webkit-perspective: 1000;
        }
    }

    .u-text-overflow {
        white-space: nowrap;
        .text-overflow();
    }

    .u-height {
        height: 100%;
    }

    .u-padding {
        padding:                1rem;

        &-2 {
            padding:            2rem;
        }

        &-x {
            padding-left:       1rem;
            padding-right:      1rem;

            &-2 {
                padding-left:   2rem;
                padding-right:  2rem;
            }
        }
        &-left {
            padding-left:       1rem;

            &-2 {
                padding-left:   2rem;
            }
        }
        &-right {
            padding-right:      1rem;

            &-2 {
                padding-right:  2rem;
            }
        }

        &-y {
            padding-top:        1rem;
            padding-bottom:     1rem;

            &-2 {
                padding-top:    2rem;
                padding-bottom: 2rem;
            }
        }
        &-top {
            padding-top:        1rem;

            &-2 {
                padding-top:    2rem;
            }
        }
        &-bottom {
            padding-bottom:     1rem;

            &-2 {
                padding-bottom: 2rem;
            }
        }

        &-px {
            padding:            1px;

            &-x {
                padding-left:   1px;
                padding-right:  1px;
            }
            &-left {
                padding-left:   1px;
            }
            &-right {
                padding-right:  1px;
            }

            &-y {
                padding-top:    1px;
                padding-bottom: 1px;
            }
            &-top {
                padding-top:    1px;
            }
            &-bottom {
                padding-bottom: 1px;
            }

        }
    }

    .u-margin {
        margin:                 1rem;

        &-2 {
            margin:             2rem;
        }

        &-x {
            margin-left:        1rem;
            margin-right:       1rem;

            &-2 {
                margin-left:    2rem;
                margin-right:   2rem;
            }
        }
        &-left {
            margin-left:        1rem;

            &-2 {
                margin-left:    2rem;
            }
        }

        &-right {
            margin-right:       1rem;

            &-2 {
                margin-right:   2rem;
            }
        }

        &-y {
            margin-top:         1rem;
            margin-bottom:      1rem;

            &-2 {
                margin-top:     2rem;
                margin-bottom:  2rem;
            }
        }
        &-top {
            margin-top:         1rem;

            &-2 {
                margin-top:     2rem;
            }
        }

        &-bottom {
            margin-bottom:      1rem;

            &-2 {
                margin-bottom:  2rem;
            }

            &--editModel {
                margin-bottom: .4rem;
            }
        }

        &-px {
            margin:             1px;

            &-x {
                margin-left:    1px;
                margin-right:   1px;
            }
            &-left {
                margin-left:    1px;
            }

            &-right {
                margin-right:   1px;
            }

            &-y {
                margin-top:     1px;
                margin-bottom:  1px;
            }
            &-top {
                margin-top:     1px;
            }

            &-bottom {
                margin-bottom:  1px;
            }
        }
    }


    .u-border {
        border:                1rem solid rgba(0,0,0,0.05);

        &-2 {
            border:            2rem solid rgba(0,0,0,0.05);
        }

        &-x {
            border-left:       1rem solid rgba(0,0,0,0.05);
            border-right:      1rem solid rgba(0,0,0,0.05);

            &-2 {
                border-left:   2rem solid rgba(0,0,0,0.05);
                border-right:  2rem solid rgba(0,0,0,0.05);
            }
        }
        &-left {
            border-left:       1rem solid rgba(0,0,0,0.05);

            &-2 {
                border-left:   2rem solid rgba(0,0,0,0.05);
            }
        }
        &-right {
            border-right:      1rem solid rgba(0,0,0,0.05);

            &-2 {
                border-right:  2rem solid rgba(0,0,0,0.05);
            }
        }

        &-y {
            border-top:        1rem solid rgba(0,0,0,0.05);
            border-bottom:     1rem solid rgba(0,0,0,0.05);

            &-2 {
                border-top:    2rem solid rgba(0,0,0,0.05);
                border-bottom: 2rem solid rgba(0,0,0,0.05);
            }
        }
        &-top {
            border-top:        1rem solid rgba(0,0,0,0.05);

            &-2 {
                border-top:    2rem solid rgba(0,0,0,0.05);
            }
        }
        &-bottom {
            border-bottom:     1rem solid rgba(0,0,0,0.05);

            &-2 {
                border-bottom: 2rem solid rgba(0,0,0,0.05);
            }
        }

        &-px {
            border:            1px solid rgba(0,0,0,0.05);

            &-x {
                border-left:   1px solid rgba(0,0,0,0.05);
                border-right:  1px solid rgba(0,0,0,0.05);
            }
            &-left {
                border-left:   1px solid rgba(0,0,0,0.05);
            }
            &-right {
                border-right:  1px solid rgba(0,0,0,0.05);
            }

            &-y {
                border-top:    1px solid rgba(0,0,0,0.05);
                border-bottom: 1px solid rgba(0,0,0,0.05);
            }
            &-top {
                border-top:    1px solid rgba(0,0,0,0.05);
            }
            &-bottom {
                border-bottom: 1px solid rgba(0,0,0,0.05);
            }

        }
    }


    .u-min {
        &-square { 
            min-height: 320px;
            min-width:  320px; }

        &-height { 
            min-height: 320px; }

        &-width  { 
            min-width:  320px; }
    }

    .u-max {
        &-height { 
            height: 100%; }

        &-width  { 
            width:  100%; }
    }

    .u-noselecttext {
        -webkit-touch-callout: none;
          -webkit-user-select: none;
           -khtml-user-select: none;
             -moz-user-select: none;
              -ms-user-select: none;
                  user-select: none;
    }

    .u-inline {
        display: inline;

        &-block {
            display: inline-block;
        }
    }

    .u-input {
        &--clean {
            border: 0;
            background-color: transparent;
        }
    }

    .u-font-code {
        font-family: "Lucida Console", Monaco, monospace;
    }

    .u-label--title {
        position: relative;
        border-left:   1px solid darken(#FFF, 10%);
        border-bottom: 1px solid darken(#FFF, 10%);
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 3px;
        padding-bottom: 1px;
        margin-bottom: 26px;

        &::after {
            position: absolute;
            top: 100%;
            left: 1.1rem;
            display: block;
            font-size: 8px;
            line-height: 8px;
            content: attr(title) " ";
            color: darken(#FFF, 30%);
            padding-top: 4px;
        }

        input,
        textarea {
            color: darken(#F00, 10%);

            &:focus {
                outline: 0;
                color: black;
                font-style: italic;
            }
        }

        textarea {
            flex-grow: 1;
        }
    }

    .u-label--help {

        color: darken(#FFF, 50%);

        &:not(.is-expanded) {
            .u-label--description {
                display: none;
            }
        }
        &.is-expanded {
            .u-label--description {
                display: block;
            }
        }
    }

    .u-label--button {
        cursor: help;
    }


    .u-label--description {
        font-size: 10px;
        color: darken(#FFF, 60%);
    }

    .u-grid {
        &__row {
            display: flex;
            flex-direction: column;
        }

        &__item {
            flex: 1;
        }
    }

    .u-pointer {
        cursor: pointer;
    }

    .u-max {
        max-width: 100%;
        max-height: 100%;
    }

    @media all and ( min-width: 480px ) {
        .u-grid__row--sm {
            flex-direction: row;
        }
    }

    @media all and ( min-width: 720px ) {
        .u-grid__row--md {
            flex-direction: row;
        }
    }

    @media all and ( min-width: 960px ) {
        .u-grid__row--lg {
            flex-direction: row;
        }
    }
    /* END util */

    /* base */
    html {
        font-family: Oswald,Helvetica,Arial,sans-serif;
        font-size: 62.5%; // reset makes 1.0rem equals to 10px;
    }

    body {
        font-size: 1.6rem;
    }
    /* END base */


    /* CONTENT */

    .mizu {
        min-height: 100vh;
    }

    .mizu-header,
    .mizu-footer {
        background-color: #646065;
        color: white;
        height: 50px;
    }

    .mizu,
    .mizu-body {
        .flex();
        .flex--column();
    }

    .mizu-content {
        color: #766561;
        background-color: #CBCBCB;
    }

    .mizu-nav {
        order: -1;
        color: #EDE8E1;
        background-color: #D2C4BE;
    }

    .mizu-ads {
        color: #EDE8E1;
        background-color: #D2C4BE;
    }

    @media (max-width: 767px) {
        .mizu-body {
            .flex-flex(1)
        }
        .mizu-content {
            .flex-flex(1)
        }
    }
    @media (min-width: 768px) {
        .mizu-body {
            .flex--row();
            .flex-flex(1)
        }
        .mizu-content {
            .flex-flex(1)
        }
        .mizu-nav, .mizu-ads {
            /* 12em is the width of the columns */
            .flex-flex(0 0 12em)
        }
    }


    </style>

    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js"></script>
</head>  
<body class="mizu">  
    <header class="mizu-header">The header</header>
    <div class="mizu-body">
        <main class="mizu-content">
            <div id="app">{{user.firstname}} {{user.lastname}}</div>
        </main>
        <nav class="mizu-nav">
            Navigation
        </nav>
        <aside class="mizu-ads">
                Advertisement
        </aside>
    </div>
    <footer class="mizu-footer">The Footer</footer>

    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user: {
                    firstname: 'Harianto',
                    lastname: 'van Insulinde'
                }
            }
        });
    </script>
</body>  
</html>  


Iframe

comments powered by Disqus