Skip to content

Instantly share code, notes, and snippets.

@bishoplee

bishoplee/index.html

Last active March 20, 2020 16:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bishoplee/6a8343e1ffd4bfaeb3d5b76f9a4f6842 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bishoplee/6a8343e1ffd4bfaeb3d5b76f9a4f6842 to your computer and use it in GitHub Desktop.
Download ZIP
Using CSS Grid to build a page layout (Atom IDE like)
Raw
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>
Raw
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();
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
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;
}
Raw
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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment