Ugarit Layout

This bootstrap snippet called "Ugarit Layout" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: layout,grid,ui,user intrerface

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab


<!-- 
AlPhaD UI - Ugarit layout

* Version: 1.0.0
* Build Date    : 18 12 2017
* Last Update   : - []
* Author: ALPhA D
* Website: www.alphadsy.com
* contribute on github : https://github.com/alphadsy/alpha-ui
more ui & layout https://github.com/alphadsy

-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- website meta -->
<!-- 
  set website Info 
-->
<meta name="description" content="website description goes here">
<meta name="keywords" content="website keywork goes here">
<meta name="author" content="ALPHA D"> 
<!-- 
  set Website Title 
-->
<title>Ugarit - AlphaD UI</title>

<!-- 
  Favicon   
  set link to website favicon in href="" ex:href="img/icon.png" 
-->
<link href="#" rel="icon" type="image/png">

<!-- css  -->
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- simplebar -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.css">
<!-- ugarit css -->
<link href="ugarit.css" rel="stylesheet">

</head>

<body class="background">

<!-- page -->
<div class="page-container">
  <!-- ======================
   left side
  ======================= -->
  <div class="left-side">
    <!-- brand -->
    <div class="brand">
      <h2>Left Side</h2>
      <h4>main information section.</h4>
      <p>you can use color-bg image-bg carousel-bg...</p>
    </div>
  </div><!-- / .left-side -->
  
  <!-- ======================
   right side
  ======================= -->
  <div class="right-side">
    <!-- wall -->
      <div class="wall" data-simplebar>
  		
  		<!-- ======================
  		 intro
  		======================= -->
      <div class="section intro" id="intro">
        <h2>Intro/summary</h2>
        <p>Scroll down for more details</p>  
        <p>recommendation: tell user that this part is scrollable</p>
        <i class="fa fa-angle-double-down"></i>  
      </div><!-- / .intro -->
      
      <!-- ======================
  		 section
  		======================= -->
      <div class="section" id="#">
	      <h2>More Information</h2>
        <p>Scroll down</p>  
        <p>you may use different bg-color or <a href="https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/">Separators</a> to divide sections</p>  
      </div><!-- / .sections -->

      <!-- ======================
  		 section
  		======================= -->
      <div class="section" id="#">
			  <h2>Last Section</h2>
        <p>no more scrolling.</p>
        <a href="#">
          <p>Demo(working on one!)</p>
        </a>
        <a href="https://github.com/alphadsy/alpha-ui">
          <p>Report Issue & Join Us on Github.</p>
        </a>
        <a href="https://github.com/alphadsy">
          <p>More Free Layouts & UI.</p>
        </a>
      </div><!-- / .section -->

	  </div><!-- / .wall -->
	</div><!-- / .left-side -->

</div><!-- / .page-container -->

<!-- JavaScript -->
<!-- jQuery v3.2 -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- bootstrap 4 js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script><!-- simplebar -->
<script src="https://cdn.jsdelivr.net/npm/simplebar@latest/dist/simplebar.js"></script>

</body>
</html>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview


/*
AlPhaD UI - Ugarit layout

* Version: 1.0.0
* Build Date    : 18 12 2017
* Last Update   : - []
* Author: ALPhA D
* Website: www.alphadsy.com
* contribute on github : https://github.com/alphadsy/alpha-ui
more ui & layout https://github.com/alphadsy
--------------------

[Layout]

* body /.background
  + Page-container  
    + Left-side 
      - Brand  
    + Right-side 
      + Wall  
        - Section  

--------------------

[Color codes]

Background: #232741 (dark-blue)
  
--------------------

[Typography]

--------------------

[content table]

1- Extra small devices (portrait phones, less than 576px)
2- Small devices (landscape phones, 576px and up)
3- Medium devices (tablets, 768px and up)
4- Large devices (desktops and landscape tablets, 992px and up)
5- Extra large devices (large desktops and tv, 1200px and up)
*/
   
/* =======================================
1- Extra small devices (portrait phones, less than 576px)
========================================*/

/* === full page ===*/
html,
body {
  height:100%;
  width:100%;
 
  overflow-y: visible;
  overflow-x: hidden;
}
.background {
  background-color: #232741;

  min-height: 100vh;
  min-width: 100vw;
}

/* === page-container ===*/
.page-container {
  margin-bottom: 3vh;
  margin-top: 2vh;
  margin-right: 0vw;
  margin-left: 0vw;

  padding-right: 0px;
  padding-left: 0px;
}
.left-side,
.right-side {
  width: calc(100% - 12px);
  padding: 6px; 
  float: left;
}

/* === left-side ===*/
.left-side {
}
.brand {
  min-height: 20vh;
  margin-top: 0vh;
  
  color: #fff;  
  text-align: left;
}

/* === right-side ===*/
.wall {
  overflow-y: hidden;
  height: 100%;
  width: 100%;
  
  background-color: #fff;
  color: #000;

  border-radius: 15px;
}

/* === wall content ===*/
.wall .section {
  padding: 20px;

  text-align: center;
}
/* intro */
.section.intro {
  /*
  any spacial css for this section
  */
} 
/* =======================================
2- Small devices (landscape phones, 576px and up)
========================================*/
@media (min-width: 576px) {
}

/* =======================================
3- Medium devices (tablets, 768px and up)
========================================*/
@media (min-width: 768px) {
}

/* =======================================
4- Large devices (desktops, 992px and up)
========================================*/
@media (min-width: 992px) { 

/* === 1-1 full page ===*/
html,
body {
  overflow-y: hidden;
}
.background {
}

/* === page-container ===*/
.page-container {
  margin-bottom: 8vh;
  margin-top: 7vh;
  margin-right: 8vw;
  margin-left: 8vw;

  padding-right: 10px;
  padding-left: 10px;
}
.left-side,
.right-side {
  width: 50%;

  padding:10px; 
}

/* === left-side ===*/
.left-side {
}
.brand {
  min-height: 40vh;
  margin-top: 30vh;
} 

/* === wall ===*/
.wall {
  height: calc(85vh);
  overflow-x: hidden!important;
  
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* === wall content ===*/
.wall .section {
  min-height: calc(85vh);
}
/* intro */
.section.intro {
  /*
  any spacial css for this section
  */
}

}

/* =======================================
5- Extra large devices (large desktops, 1200px and up)
========================================*/
@media (min-width: 1200px) {  
}
 

                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview


//### Credits:
//- [Bootstrap](https://getbootstrap.com)  
//- [simpleBar](https://github.com/Grsmto/simplebar)  
 

Information about this bootstrap snippet

Creator: shu3ayb badran

Bootstrap version: 4.0.0-beta

Created: Dec 22nd 2017, 00:18

Views: 76