1 #Layout Page Layout
At a high level, most pages build using IGW styles will be structured similarly, consisting of up to three top-level parts:
- header
- main container
- footer
The header and footer are optional. They will extend to the edges of the page, while the main container will have padding and a constrained width. It is probably helpful to structure the top level of your page like this:
<body>
<header>...</header>
<div class="container-fluid">...</div>
<footer>...</footer>
</body>
There is some flexibility in how exactly you structure this. If you inspect pages on the website, you will find that they aren't strictly structured into three top-level elements; the header and footer are each split into a few different elements. Conceptually, though, this is how they are organized.
1.1 #Layout.Container Main container
The main section of your page should be wrapped in a container. This will pad the sides and constrain the content to the appropriate width. There are two types of container to choose from. Apply the class container or container-fluid. Both containers are fully responsive.
The container-fluid is the recommended approach. It will constrain its content to a percentage of the viewport responsively.
The container class is similar, but it will snap to a specific width, based on the viewport size: about 720px, 940px, or 1140px for medium to large screens. This will be narrower than a container-fluid.
On mobile devices, both container types behave the same.
1.2 #Layout.Setup Setting up grid system
If you wish, you can put your content directly inside your main container. However, there are two more things that are recommended at the top level: initialize the grid system with a column basis, and add an l-main which adds padding to the top of the page:
<div class="container-fluid">
<div class="row">
<div class="l-main true-grid-10">
<!-- main page content here -->
</div>
</div>
</div>
The l-main adds a top padding between the header and the main content. This is especially important if you use a nav-flyout menu at the top of the page, since it hangs down over other content.
The true-grid-10 establishes the number of grid columns at 10. This is the recommended number of columns, but you can replace this with any number up to 12 (true-grid-12, etc). Wrapping this in a row is necessary, as every grid row requires this class for alignment. See the next section for more details on using the grid.
1.3 #Layout.Header Page Header
header-bar, header-bar-list
Main page header. Works well when immediately followed by a section-navs.html#kssref-navs-flyout.
<header class="header-bar inverse">
<div class="split">
<div class="split-left">
<h1 class="page-logo hidden-xs">
<a href="/" class="logo-ice-white">ICE</a>
</h1>
</div>
<div class="split-right text-right">
<ul class="header-bar-list">
<li class="is-active"><a href="https://www.theice.com">ICE</a></li>
<li><a href="https://www.nyse.com">NYSE</a></li>
<li><a href="https://www.intercontinentalexchange.com/about">About</a></li>
<li class="hidden-xs">
<div class="site-search">
<label class="site-search-icon" for="site-search">Search</label>
<input type="search" placeholder="Search" id="site-search"/>
</div>
</li>
</ul>
</div>
</div>
</header>