CODEWITHSUNDEEP
cssflexbox
user1027620
user1027620

Reputation: 2785

Optimizing CSS3 Flexbox structure

I'm new to flexbox and CSS. I'd like to know if there is any way to optimize this structure.. It works but looks real messy.

ul#flexmenu {
    display: flex;
    -webkit-display: flex;
    align-items: center;
    flex-direction: column;
    -webkit-flex-direction: column;
    margin: 0;
    padding: 0;
    height: 100%;
    content: 'viewport-units-buggyfill; width: 100vw;';
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    -webkit-overflow-scrolling: touch;

        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
        backface-visibility: hidden;
        perspective: 1000;
        -webkit-transform: translateZ(0);
        transform:translateZ(0);
}

    ul#flexmenu > li {
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        -webkit-flex-direction: row;
        justify-content: flex-start;
        flex-grow: 0;
        flex-shrink: 0;
        align-items: center;
        -webkit-align-items: center;
        height: 20vh;
        width: 100vw;
        content: 'viewport-units-buggyfill; width: 100vw; height: 20vh;';
        position:relative;
        z-index: 2;

    }

    ul#flexmenu > li.disabled {
        background:black;
    }

    ul#flexmenu li > a,
    ul#flexmenu li > span,
    ul#flexmenu li > div > a,
    ul#flexmenu li > div > span,
    ul#flexmenu li > input[type='text'],
    ul#flexmenu li > input[type='number'] {
        padding: 0 1.1em;
        text-transform: uppercase;
        color: white;
        text-decoration: none;
        font-size: 5.5vh;
        line-height: 5.5vh;
        content: 'viewport-units-buggyfill; line-height:5.5vh; font-size: 5.5vh;';
    }

    ul#flexmenu li > div {
        height:20vh;
        width:100vw;
        line-height:20vh;
        background:inherit;
        z-index:2; /*fix for context menu so it comes on top*/
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
        backface-visibility: hidden;
        perspective: 1000;
        -webkit-transform: translateZ(0);
        transform:translateZ(0);
    }


li select {
    top: 0;
    height: 20vh;
    opacity: 0;
    position: absolute;
    content: 'viewport-units-buggyfill; height: 20vh;';
}

li.three > select {
    width: 33.3vw;
    content: 'viewport-units-buggyfill; width: 33.3vw;';
}

ul#flexmenu li > ul {
    display: flex;
    display: -webkit-flex;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    height: 20vh;
    background: inherit;
    width: 100vw;
    content: 'viewport-units-buggyfill; width: 100vw;';
}

    ul#flexmenu li > ul.col {
        flex-direction: row;
        -webkit-flex-direction: row;
    }

        ul#flexmenu li > ul.col > li.two.offset {
            width: 35vw;
            content: 'viewport-units-buggyfill; width: 35vw;';
        }

            ul#flexmenu li > ul.col > li.two.offset + li {
                width: 65vw;
                content: 'viewport-units-buggyfill; width: 65vw;';
            }

    ul#flexmenu li > ul.row {
        flex-direction: column;
        -webkit-flex-direction: column;
    }

    ul#flexmenu li > ul > li {
        display: flex;
        display: -webkit-flex;
        flex-grow: 0;
        flex-shrink: 0;
        justify-content: center;
        -webkit-justify-content: center;
        align-items: center;
        -webkit-align-items: center;
        position: relative; /*fix for absolute positionned elements (dropdowns inside flexmenu lis)*/
    }

    ul#flexmenu li > ul.row > li,
    ul#flexmenu li > ul.row > li > ul.col {
        height: 10vh !important;
        content: 'viewport-units-buggyfill; height: 10vh !important;';
    }

        ul#flexmenu li > ul.row > li span,
        ul#flexmenu li > ul.row > li a,
        ul#flexmenu li > ul.row > li input {
            padding: 0 1.4em;
            font-size: 6vw;
            line-height: 6vw;
            content: 'viewport-units-buggyfill; line-height:6vw; font-size: 6vw;';
        }

li.justify-left {
    justify-content: flex-start !important;
    -webkit-justify-content: flex-start !important;
}

ul#flexmenu li > ul > li.three,
ul#flexmenu li > ul > li.two,
ul#flexmenu li > ul > li.four {
    display: flex;
    display: -webkit-flex;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items:center;
    -webkit-align-items: center;
    border: 1px solid white;
}

ul#flexmenu li > ul > li.two {
    width: 50vw;
    content: 'viewport-units-buggyfill; width: 50vw;';
}

ul#flexmenu li > ul > li.three {
    width: 33.3vw;
    content: 'viewport-units-buggyfill; width: 33.3vw;';
}

ul#flexmenu li > ul > li.four {
    width: 25vw;
    content: 'viewport-units-buggyfill; width: 25vw;';
}


li.two > a,
li.two > span {
    font-size: 6vw !important;
    line-height: 6vw !important;
    content: 'viewport-units-buggyfill; line-height: 6vw !important; font-size: 6vw !important;';
}

li.three > a,
li.three > span {
    font-size: 5vw !important;
    line-height: 5vw !important;
    content: 'viewport-units-buggyfill; line-height: 5vw !important; font-size: 5vw !important;';
}

li.four > a,
li.four > span {
    font-size: 4vw !important;
    line-height: 4vw !important;
    content: 'viewport-units-buggyfill; line-height: 4vw !important; font-size: 4vw !important;';
}

li.two:first-child {
    border-width: 0 1px 0 0 !important;
}

li.two:last-child {
    border-width: 0 !important;
}

li.three:nth-child(1) {
    border-width: 0 1px 0 0 !important;
}

li.three:nth-child(2) {
    border-width: 0 1px 0 0 !important;
}

li.three:nth-child(3) {
    border-width: 0 0 0 0 !important;
}

li.four:nth-child(1) {
    border-width: 0 1px 0 0 !important;
}

li.four:nth-child(2) {
    border-width: 0 1px 0 0 !important;
}

li.four:nth-child(3) {
    border-width: 0 1px 0 0 !important;
}

li.four:nth-child(4) {
    border-width: 0 0 0 0 !important;
}

Sample Usage: (This varies alot, sometimes we have other nested ul lis etc..)

 <ul id="flexmenu">
            <li  class="gradient-one">
                <input type="text" ng-model="filterText" placeholder="SEARCH" />
            </li>
            <li ng-repeat="contact in contacts | orderBy: 'displayName' | filter: filterText track by contact.id" ng-class-odd="'gradient-two'" ng-class-even="'gradient-three'">
                <div class="context-wrapper" context="contact">
                    <span>{{contact.displayName | limitTo: 11}}{{contact.displayName.length > 11 ? '...' : ''}}</span>
                </div>
            </li>
        </ul>

JSFiddle : http://jsfiddle.net/5neaar1r/

Thanks.

Upvotes: 0

Views: 399

Answers (1)

Rounin
Rounin

Reputation: 29501

Perhaps, something like this (at least to start with):

ul#flexmenu,
ul#flexmenu > li,
ul#flexmenu li > ul,
ul#flexmenu li > ul > li,
ul#flexmenu li > ul > li.two,
ul#flexmenu li > ul > li.three,
ul#flexmenu li > ul > li.four {
-webkit-display: flex; display: flex;
}

ul#flexmenu,
ul#flexmenu li  >  ul.row {
-ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;
}

ul#flexmenu > li,
ul#flexmenu li > ul.col,
ul#flexmenu li > ul > li.two,
ul#flexmenu li > ul > li.three,
ul#flexmenu li > ul > li.four {
-ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row;
}

ul#flexmenu,
ul#flexmenu li > ul {
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}

ul#flexmenu,
ul#flexmenu > li,
ul#flexmenu li > ul > li,
ul#flexmenu li > ul > li.two,
ul#flexmenu li > ul > li.three,
ul#flexmenu li > ul > li.four {
-webkit-align-items: center; align-items: center;
}

ul#flexmenu,
ul#flexmenu li > div {
-webkit-perspective: 1000; perspective: 1000; 
-webkit-transform: translateZ(0); transform: translateZ(0); 
-webkit-backface-visibility: hidden; backface-visibility: hidden;
}

ul#flexmenu,
ul#flexmenu li > ul {
content: 'viewport-units-buggyfill; width: 100vw; ';
}


li select,
ul#flexmenu > li,
ul#flexmenu li > div,
ul#flexmenu li > ul {
height: 20vh;
}


ul#flexmenu {
margin: 0; 
padding: 0; 
height: 100%; 
-webkit-overflow-scrolling: touch;
}

ul#flexmenu > li {
justify-content: flex-start; 
flex-grow: 0; 
flex-shrink: 0; 
width: 100vw; 
content: 'viewport-units-buggyfill; width: 100vw; height: 20vh; '; 
position: relative; 
z-index: 2;
}

ul#flexmenu > li.disabled {
background: black;
}

ul#flexmenu li > a,
ul#flexmenu li > span,
ul#flexmenu li > div > a,
ul#flexmenu li > div > span,
ul#flexmenu li > input[type='text'],
ul#flexmenu li > input[type='number'] {
padding: 0 1.1em; 
text-transform: uppercase; 
color: white; 
text-decoration: none; 
font-size: 5.5vh; 
line-height: 5.5vh; 
content: 'viewport-units-buggyfill; line-height: 5.5vh; font-size: 5.5vh; ';
}

ul#flexmenu li > div {
width: 100vw; 
line-height: 20vh; 
background: inherit; 
z-index: 2; /*fixforcontextmenusoitcomesontop*/
}


li select {
top: 0; 
opacity: 0; 
position: absolute; 
content: 'viewport-units-buggyfill; height: 20vh; ';
}

li.three > select {
width: 33.3vw; 
content: 'viewport-units-buggyfill; width: 33.3vw; ';
}

ul#flexmenu li > ul {
background: inherit; 
width: 100vw;
}

ul#flexmenu li > ul.col > li.two.offset {
width: 35vw; 
content: 'viewport-units-buggyfill; width: 35vw; ';
}

ul#flexmenu li > ul.col > li.two.offset+li {
width: 65vw; 
content: 'viewport-units-buggyfill; width: 65vw; ';
}
}

ul#flexmenu li > ul > li {
flex-grow: 0; 
flex-shrink: 0; 
justify-content: center; 
-webkit-justify-content: center; 
position: relative; /*fixforabsolutepositionnedelements(dropdownsinsideflexmenulis)*/
}

ul#flexmenu li > ul.row > li,
ul#flexmenu li > ul.row > li > ul.col {
height: 10vh !important; 
content: 'viewport-units-buggyfill; height: 10vh !important; ';
}

ul#flexmenu li > ul.row > li span,
ul#flexmenu li > ul.row > li a,
ul#flexmenu li > ul.row > li input {
padding: 0 1.4em; 
font-size: 6vw; 
line-height: 6vw; 
content: 'viewport-units-buggyfill; line-height: 6vw; font-size: 6vw; ';
}

li.justify-left {
justify-content: flex-start !important; 
-webkit-justify-content: flex-start !important;
}

ul#flexmenu li > ul > li.two,
ul#flexmenu li > ul > li.three,
ul#flexmenu li > ul > li.four {
border: 1px solid white;
}

ul#flexmenu li > ul > li.two {
width: 50vw; 
content: 'viewport-units-buggyfill; width: 50vw; ';
}

ul#flexmenu li > ul > li.three {
width: 33.3vw; 
content: 'viewport-units-buggyfill; width: 33.3vw; ';
}

ul#flexmenu li > ul > li.four {
width: 25vw; 
content: 'viewport-units-buggyfill; width: 25vw; ';
}

li.two > a,
li.two > span {
font-size: 6vw !important; 
line-height: 6vw !important; 
content: 'viewport-units-buggyfill; line-height: 6vw!important; font-size: 6vw!important; ';
}

li.three > a,
li.three > span {
font-size: 5vw !important; 
line-height: 5vw !important; 
content: 'viewport-units-buggyfill; line-height: 5vw!important; font-size: 5vw!important; ';
}

li.four > a,
li.four > span {
font-size: 4vw !important; 
line-height: 4vw !important; 
content: 'viewport-units-buggyfill; line-height: 4vw!important; font-size: 4vw!important; ';
}

li.two: last-child {
border-width: 0 !important;
}

li.two: first-child,
li.three: nth-child(1),
li.three: nth-child(2),
li.four: nth-child(1),
li.four: nth-child(2),
li.four: nth-child(3) {
border-width: 0 1px 0 0 !important;
}

li.three: nth-child(3),
li.four: nth-child(4) {
border-width: 0 0 0 0 !important;
}

Upvotes: 1

Related Questions