Flexbox showcase

Flexbox showcase.markdown

Flexbox showcase

Forked from Razvan Tudosa's Pen Flexbox showcase.

Forked from Razvan Tudosa's Pen Flexbox showcase.

A Pen by bogdan gradinariu on CodePen.

License.

index.html

<div data-debug="main-wrapper" class="main-wrapper full-width full-height pos-absolute flex-container flex-col overflow-hidden">
 
      <div data-debug="partial-wrapper" class="partial-wrapper flex-container flex-row flex-item">
        <div data-debug="wrapper" class="wrapper flex-container flex-col flex-item">
          <header data-debug="header" class="header flex-item flex-item-auto"></header>
          <div data-debug="container" class="my-container flex-container flex-row flex-item">
            <aside data-debug="left-sidebar" class="left-sidebar flex-container flex-col flex-item flex-item-auto">
              <header data-debug="left-sidebar-header" class="left-sidebar-header flex-item flex-item-auto"></header>
              <section data-debug="left-sidebar-content" class="left-sidebar-content flex-item"></section>
            </aside>
            <main data-debug="content" class="content flex-container flex-col flex-item">
              <section data-debug="content-header" class="content-header flex-item flex-item-auto"></section>
              <section data-debug="scrollable-content" class="scrollable-content flex-item overflow-scroll"></section>
            </main>
          </div>
        </div>
        <aside data-debug="right-sidebar" class="right-sidebar flex-container flex-col flex-item flex-item-auto">
          <header data-debug="right-sidebar-header" class="right-sidebar-header flex-item flex-item-auto"></header>
          <div data-debug="right-sidebar-content" class="right-sidebar-content flex-item"></div>
        </aside>
      </div>
      <footer data-debug="footer" class="flex-item flex-item-auto"></footer>

style.css

// variables
$root-element: ".main-wrapper";

.full-width {
  width: 100%;
  width: 100vw;
}
.full-height {
  height: 100%;
  height: 100vh;
}
.pos-absolute {
  position: absolute;
}
.pos-relative {
  positoin: relative;
}
.pos-fixed {
  position: fixed;
}
.pos-static {
  position: static;
}
.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.flex-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.flex-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 100%;
      -ms-flex: 1 1 100%;
          flex: 1 1 100%;
}
.flex-item.flex-item-auto {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
          align-self: stretch;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-scroll {
  overflow: scroll;
}
[data-debug] {
  box-sizing: border-box;
}
.main-wrapper {
  top: 0;
  left: 0;
}
.header {
  // mobile first
  display: block;
  
  position: relative;
  -webkit-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
  border: 3px solid rgba(51, 41, 43, 0.25);
  min-width: 3em;
  min-height: 3em;
  contenteditable: true;
}
.header:not(.main-wrapper) {
  margin: 0.2em;
}
.header:empty::after {
  content: attr(data-debug);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-face: tahoma;
  -webkit-transition: -webkit-transform 100ms ease-in-out;
          transition: transform 100ms ease-in-out;
  white-space: nowrap;
}
.header:hover {
  background: rgba(51, 41, 43, 0.25);
  border: 3px dashed rgb(51, 41, 43);
}
.header:hover::after {
  -webkit-transform: translate(-50%, -50%) scale(1.5);
      -ms-transform: translate(-50%, -50%) scale(1.5);
          transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}
.left-sidebar-header {
  // mobile first
  display: none;
  
  position: relative;
  -webkit-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
  border: 3px solid rgba(255, 153, 0, 0.25);
  min-width: 3em;
  min-height: 3em;
  contenteditable: true;
}
.left-sidebar-header:not(.main-wrapper) {
  margin: 0.2em;
}
.left-sidebar-header:empty::after {
  content: attr(data-debug);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-face: tahoma;
  -webkit-transition: -webkit-transform 100ms ease-in-out;
          transition: transform 100ms ease-in-out;
  white-space: nowrap;
}
.left-sidebar-header:hover {
  background: rgba(255, 153, 0, 0.25);
  border: 3px dashed #ff9900;
}
.left-sidebar-header:hover::after {
  -webkit-transform: translate(-50%, -50%) scale(1.5);
      -ms-transform: translate(-50%, -50%) scale(1.5);
          transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}
.left-sidebar-content {
  position: relative;
  -webkit-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
  border: 3px solid rgba(139, 0, 0, 0.25);
  min-width: 3em;
  min-height: 3em;
  contenteditable: true;
}
.left-sidebar-content:not(.main-wrapper) {
  margin: 0.2em;
}
.left-sidebar-content:empty::after {
  content: attr(data-debug);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-face: tahoma;
  -webkit-transition: -webkit-transform 100ms ease-in-out;
          transition: transform 100ms ease-in-out;
  white-space: nowrap;
}
.left-sidebar-content:hover {
  background: rgba(139, 0, 0, 0.25);
  border: 3px dashed darkred;
}
.left-sidebar-content:hover::after {
  -webkit-transform: translate(-50%, -50%) scale(1.5);
      -ms-transform: translate(-50%, -50%) scale(1.5);
          transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}
.content-header {
  position: relative;
  -webkit-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
  border: 3px solid rgba(0, 172, 238, 0.25);
  min-width: 3em;
  min-height: 3em;
  contenteditable: true;
  height: 200px;
}
.content-header:not(.main-wrapper) {
  margin: 0.2em;
}
.content-header:empty::after {
  content: attr(data-debug);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-face: tahoma;
  -webkit-transition: -webkit-transform 100ms ease-in-out;
          transition: transform 100ms ease-in-out;
  white-space: nowrap;
}
.content-header:hover {
  background: rgba(0, 172, 238, 0.25);
  border: 3px dashed #00acee;
}
.content-header:hover::after {
  -webkit-transform: translate(-50%, -50%) scale(1.5);
      -ms-transform: translate(-50%, -50%) scale(1.5);
          transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}
.scrollable-content {
  position: relative;
  -webkit-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
  border: 3px solid rgba(166, 166, 136, 0.25);
  min-width: 3em;
  min-height: 3em;
  contenteditable: true;
}
.scrollable-content:not(.main-wrapper) {
  margin: 0.2em;
}
.scrollable-content:empty::after {
  content: attr(data-debug);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-face: tahoma;
  -webkit-transition: -webkit-transform 100ms ease-in-out;
          transition: transform 100ms ease-in-out;
  white-space: nowrap;
}
.scrollable-content:hover {
  background: rgba(166, 166, 136, 0.25);
  border: 3px dashed #a6a688;
}
.scrollable-content:hover::after {
  -webkit-transform: translate(-50%, -50%) scale(1.5);
      -ms-transform: translate(-50%, -50%) scale(1.5);
          transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}
.right-sidebar-header {
  position: relative;
  -webkit-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
  border: 3px solid rgba(255, 153, 0, 0.25);
  min-width: 3em;
  min-height: 3em;
  contenteditable: true;
}
.right-sidebar-header:not(.main-wrapper) {
  margin: 0.2em;
}
.right-sidebar-header:empty::after {
  content: attr(data-debug);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-face: tahoma;
  -webkit-transition: -webkit-transform 100ms ease-in-out;
          transition: transform 100ms ease-in-out;
  white-space: nowrap;
}
.right-sidebar-header:hover {
  background: rgba(255, 153, 0, 0.25);
  border: 3px dashed #ff9900;
}
.right-sidebar-header:hover::after {
  -webkit-transform: translate(-50%, -50%) scale(1.5);
      -ms-transform: translate(-50%, -50%) scale(1.5);
          transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}
.right-sidebar-content {
  position: relative;
  -webkit-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
  border: 3px solid rgba(139, 0, 0, 0.25);
  min-width: 3em;
  min-height: 3em;
  contenteditable: true;
}
.right-sidebar-content:not(.main-wrapper) {
  margin: 0.2em;
}
.right-sidebar-content:empty::after {
  content: attr(data-debug);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-face: tahoma;
  -webkit-transition: -webkit-transform 100ms ease-in-out;
          transition: transform 100ms ease-in-out;
  white-space: nowrap;
}
.right-sidebar-content:hover {
  background: rgba(139, 0, 0, 0.25);
  border: 3px dashed darkred;
}
.right-sidebar-content:hover::after {
  -webkit-transform: translate(-50%, -50%) scale(1.5);
      -ms-transform: translate(-50%, -50%) scale(1.5);
          transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}
footer {
  position: relative;
  -webkit-transition: all 100ms ease-in-out;
          transition: all 100ms ease-in-out;
  border: 3px solid rgba(0, 0, 255, 0.25);
  min-width: 3em;
  min-height: 3em;
  contenteditable: true;
}
footer:not(.main-wrapper) {
  margin: 0.2em;
}
footer:empty::after {
  content: attr(data-debug);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-face: tahoma;
  -webkit-transition: -webkit-transform 100ms ease-in-out;
          transition: transform 100ms ease-in-out;
  white-space: nowrap;
}
footer:hover {
  background: rgba(0, 0, 255, 0.25);
  border: 3px dashed blue;
}
footer:hover::after {
  -webkit-transform: translate(-50%, -50%) scale(1.5);
      -ms-transform: translate(-50%, -50%) scale(1.5);
          transform: translate(-50%, -50%) scale(1.5);
  z-index: 10;
}

.left-sidebar {
  // mobile first
  display: none;
  
  width: 100%;
}

.right-sidebar {
  // mobile first
  display: none;
  
  min-width: 200px;
}

.hide-left-sidebar {
  .left-sidebar {
    display: none;
  }
}

.hide-right-sidebar {
  .right-sidebar, .left-sidebar-header {
    display: none;
  }
}

// default
// most generic
// mobile
@media (min-width:0px) {
//.mobile-state {
  #{$root-element} {
    &.show-right-sidebar {
      .partial-wrapper {
        flex-direction: column;
      }

      .wrapper {
        flex-grow: 0;

        .my-container{
          display: none;
        }
      }

      .right-sidebar {
        display: flex;
        flex-grow: 1;
      }
    }


    &.show-left-sidebar {
      .content, 
      .right-sidebar, 
      .left-sidebar-header {
        display: none;
      }
      .left-sidebar {
        display: flex;
      }
    }
  }
}

// tablet
// add some stuff on top of mobile
@media (min-width:480px) {
//.tablet-state {
  #{$root-element} {
    &.show-right-sidebar {
      .partial-wrapper {
        flex-direction: row;
      }

      .wrapper {
        .my-container{
          display: flex;
        }
      }
    }


    &.show-left-sidebar {
      .content {
        display: flex;
      }
      .left-sidebar {
        display: flex;
      }
    }

    .left-sidebar,
    .right-sidebar {
      width: 200px;
    }
  }
}

// desktop
// add some stuff on top of tablet
@media (min-width:1024px) {
//.desktop-state {
  #{$root-element} {
    .partial-wrapper {
      flex-direction: row;
    }

    .header {
      display: none;
    }

    .wrapper .my-container,
    .content,
    .left-sidebar,
    .left-sidebar-header,
    .right-sidebar {
      display: flex;
    }

    &.show-left-sidebar {
      .content, 
      .right-sidebar, 
      .left-sidebar-header {
        display: flex;
      }
    }
  }
}
/*
// default
// most generic
// mobile
@media (min-width:0px) {
  @extend .mobile-state;
}

// tablet
// add some stuff on top of mobile
@media (min-width:480px) {
  @extend .tablet-state;
}


// desktop
// add some stuff on top of tablet
@media (min-width:1024px) {
  @extend .desktop-state;
}*/