Responsive Foundation 6.0.0

Sidebar

Grid » How to Use the Grid Push ClassesLink

New Issue

The Responsive Foundation grid is based off the Boostrap grid.

Example Source: grid/_package.scss, line 23 View Source
Markup grid/examples/grid.hbs 
<div class="wrapper">
			<main id="main" role="main" class="content">
					<article class="content-area">
						<h2 class="post-headline">
							<a href="http://gcharlie-upgrade.cms-devl.bu.edu/2018/09/28/hello-world/" rel="bookmark">Hello world!</a>
						</h2>
						<div class="meta post-meta"></div>
						<figure class="alignleft">
							<img src="https://placekitten.com/300/200">
						</figure>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat […]</p>
						<p class="alignwide">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat […]</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat […]</p>
		
		<div class="container">
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #e55" class="col-6 col-xs-4 col-md-3 col-xs-offset-4 col-md-offset-0">
					col-6 col-xs-4 col-md-3
				</div>
		
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #e55" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
		
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #e55" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
		</div>
		
		<div class="container">
			<div class="row">
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #e55" class="col-6 col-xs-4 col-md-3 col-xs-offset-4 col-md-offset-0">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #e55" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #e55" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
			</div>
		</div>
						<p class="alignfull">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat […]</p>
		
						<figure class="alignright">
							<img src="https://placekitten.com/300/200">
						</figure>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat […]</p>
					</article>
			</main><!-- .content -->
		</div>
		
		<div class="container">
			<div class="row">
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #e55" class="col-6 col-xs-4 col-md-3 col-xs-offset-4 col-md-offset-0">
					col-6 col-xs-4 col-md-3
				</div>
			</div>
		
			<div class="row">
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #e55" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
			</div>
		
			<div class="row">
				<div style="background: #f66" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
				<div style="background: #e55" class="col-6 col-xs-4 col-md-3">
					col-6 col-xs-4 col-md-3
				</div>
			</div>
		</div>