Using CSS Grid to build a page layout (Atom IDE like)

index.html

<div class="page">
  
  <!--Sidebar-->
  <div class="sidebar">
    <div class="panel">
     <div class="panel-header ">Project</div>

		  <!--Tree-->
      <div class="panel-body">
        
		    <ul class="tree-group">
          
          <li class="tree-item tree-item--chevron-down">
            <span class="tree-item-label tree-item-label--repo">vintage-shop</span>
            <ul class="tree-group">
              <li class="tree-item tree-item--chevron-right">
                <span class="tree-item-label tree-item-label--file-directory">git</span>
              </li>
              <li class="tree-item tree-item--chevron-right">
                <span class="tree-item-label tree-item-label--file-directory">dist</span>
              </li>
              <li class="tree-item tree-item--chevron-right">
                <span class="tree-item-label tree-item-label--file-directory">node_modules</span>
              </li>
              <li class="tree-item tree-item--chevron-right">
                <span class="tree-item-label tree-item-label--file-directory">src</span>
              </li>
              <li class="tree-item">
                <span class="tree-item-label tree-item-label--file-text">.editconfig</span>
              </li>
              <li class="tree-item">
                <span class="tree-item-label tree-item-label--file-text">build.js</span>
              </li>
              <li class="tree-item">
                <span class="tree-item-label tree-item-label--file-text">development.html</span>
              </li>
              <li class="tree-item">
                <span class="tree-item-label tree-item-label--file-text">LICENSE</span>
              </li>
              <li class="tree-item">
                <span class="tree-item-label tree-item-label--file-text">package-lock.json</span>
              </li>
              <li class="tree-item">
                <span class="tree-item-label tree-item-label--file-text">production.html</span>
              </li>
              <li class="tree-item">
                <span class="tree-item-label tree-item-label--file-book">README.md</span>
              </li>
              <li class="tree-item">
                <span class="tree-item-label tree-item-label--file-text">test.html</span>
              </li>
            </ul>
          </li>
         </ul>
       </div>

    </div>
  </div><!--Sidebar ends-->

  
  <div class="editor">
    
    <!--Editor 1 -->
    <div class="panel">
      
      <div class="panel-header">
        <div class="tabs">
          <div class="tab-item">scafolding.less</div>
          <div class="tab-item tab-item--selected">styles.less</div>
          <div class="tab-item">cart-item.stash</div>
        </div>
      </div>

      <div class="panel-body">
        <ol class="editor-container">
          <li class="editor-line"></li>
          <li class="editor-line"><span class="editor-content">Hey there!</span></li>
          <li class="editor-line"></li>
         </ol>
       </div>
     </div>

     <!--Editor 2 -->
     <div class="panel window-2">
         
       <div class="panel-header">
         <div class="tabs">
           <div class="tab-item tab-item--selected">styles.less</div>
         </div>
       </div>

       <div class="panel-body">
         <ol class="editor-container">
           <li class="editor-line"></li>
           <li class="editor-line"><span class="editor-content">Hey there!</span></li>
           <li class="editor-line"></li>
         </ol>
       </div>
       
      </div>
    
  </div><!--Editor ends-->

	<!--Footer-->
	<div class="footer">
    <div class="footer-file-info">
      <span class="file-info-source">src/styles.less</span>
      <span class="file-info-location">2:5</span>
      </div>
    <div class="footer-controls">
      <a href="">LF</a>
      <a href="">UTF-8</a>
      <a href="">Less</a>
      <a href=""><span class="icon-git-branch"></span>master</a>
      <a href="">⬇︎ 5 ⬆︎</a>
      <a href=""><span class="icon-diff"></span>1 file</a>
      <a href=""><span class="icon-squirrel"></span></a>
    </div>
  </div>
  
</div><!--Grid structure ends-->

<!-- Control Bar for demo purposes-->
<div class="control-bar">
  <button id="window-1">Close Tabs to the Right</button>
	<button id="window-2">Split Right</button>
</div>

script.js

$( "#window-2" ).click(function (){
	$( ".editor" ).addClass( "editor--2-windows-layout" );
  $( "#window-1" ).show();
  $( "#window-2" ).hide();
});

$( "#window-1" ).click(function (){
	$( ".editor" ).removeClass( "editor--2-windows-layout" );
  $( "#window-2" ).show();
  $( "#window-1" ).hide();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.less

/** Read the guide at: http://bit.ly/2xIdHu0 **/

/** Variables & Mixins **/

@bar-height: 30px;

.ellipsis {
  overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/** Scafolding --------------------**/
body {
	margin: 0;
}

.page {
	display: grid;
	grid-template-rows: auto @bar-height;
	grid-template-columns: 300px 1fr;
	height: 100vh;
}


/** Panel Module **/
.panel {
	display: grid;
	grid-template-rows: @bar-height auto;
	height: calc(~"100vh -" @bar-height);
}

.panel-body {
	overflow: auto; 
}


/** Tabs Module **/
.tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	height: 100%;
}

.tab-item {
	.ellipsis;
	text-align: center;
  padding: 6px;
}


/** Editor **/
.editor {
  display: grid;
  .window-2  {
    display: none;
  }
  &.editor--2-windows-layout {
		grid-template-columns: 1fr 1fr;
      .window-2 { 
       display: grid;
	  }
	}
}


/** Footer **/
.footer {
  display: grid;
  grid-template-columns: 1fr auto;
	grid-column-start: 1;
	grid-column-end:   3;
}

.footer-file-info {
  .ellipsis;
}

.footer-controls {
  display: flex;
  height: 100%;
  justify-content: flex-end;
  a {
    height: 100%;
    display: flex;
    align-items: center;
  }
}


/** Theme --------------------- **/


/** Icons 
  * From https://octicons.github.com/
**/
@font-face {
  font-family: 'octicons';
  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'octicons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-squirrel:before {
  content: "\e900";
}
.icon-repo:before {
  content: "\e901";
}
.icon-git-branch:before {
  content: "\e902";
}
.icon-diff:before {
  content: "\e905";
}


/** Variables **/
@gray-dark: #2c313a;
@gray-base: #5c6370;
@gray-light: #c5cad3;
@gray-lighter: #d7dae0;
@gray-lightest: #dcdfe4;
@blue: #1f96ff;
@border-default: 1px solid @gray-light;

/** Styles **/
body {
	background-color: @gray-lighter;
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 0.8rem;
	color: @gray-dark;
}


.sidebar {
	border-right: @border-default;
	.tree-group {
		padding: 0;
		margin: 0;
	}
	.tree-item {
		padding: 5px 0 5px 25px;
		list-style: none;
    position: relative;
    &:before {
     font-family: 'octicons' !important; 
     position: absolute;
     left: 10px;
    }
    &.tree-item--chevron-down:before {
      content: "\e907";
    }
    &.tree-item--chevron-right:before {
      content: "\e908";
    }
	}
  .tree-item-label {
    display: flex;
    &:before {
     font-family: 'octicons' !important; 
     font-size: 17px;
     margin-right: 10px;
    }
    &.tree-item-label--repo:before {
      content: "\e901";
    }
    &.tree-item-label--file-directory:before {
      content: "\e903";
    }
    &.tree-item-label--file-text:before {
      content: "\e904";
    }
    &.tree-item-label--file-book:before {
      content: "\e906";
    }
  }
	.panel-header {
		display: flex;
	  align-items: center;
	  justify-content: center;
	}
}

.editor {
	.tab-item {
		border-right: @border-default;
		border-bottom: @border-default;
    color: @gray-base;
		&.tab-item--selected {
			background-color: @gray-dark;
			color: @gray-lightest;
			border-color: @gray-dark;
		}
	}
	.panel-body {
		background-color: @gray-dark;
		color: @gray-lightest;
		font-family: "Courier New";
		font-size: 1rem;
		.editor-container {
			padding-left: 45px;
			margin-top: 0;
		}
		.editor-line {
			color: @gray-base;
		}
		.editor-content {
			color: @gray-light;
		}
	}
  .window-2  {
    border-left: 1px solid @gray-light;
  }
}

.footer {
  align-items: center;
	border-top: @border-default;
}
.footer-file-info {
  .file-info-source {
    padding: 0 10px;
  }
}
.footer-controls {
  a {
    padding: 0 10px;
    color: initial;
    text-decoration: none;
    [class*="icon-"] {
      font-size: 15px;
      margin-right: 5px;
    }
    &:hover {
      background-color: @gray-light;
    }
    .icon-squirrel {
      color: @blue;
    }
  }
}

/** Control Bar for demo purposes **/
.control-bar {
	position: fixed;
	bottom: 50px;
	right: 20px;
}
#window-1 {
  display: none;
}

using-css-grid-to-build-a-page-layout-atom-ide-like.markdown

Using CSS Grid to build a page layout (Atom IDE like)

A practical guide for using CSS grid for build a page layout, including a sticky header and footer, a panel with scrollable areas and a tabs module.

Read the guide at: http://bit.ly/2xIdHu0

A Pen by adriana on CodePen.

License.