clondon/flex-layout.markdown

## flex-layout.markdown

      
    Raw
  

              flex-layout.markdown
            
          
    Flex Layout

A Pen by clondon on CodePen.
License.

  
## index.html
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <h1 layout="row center-center" class="header">Testing with flex-layout-attribute.min.css</h1>
<div layout="row center-center-justify">
  <div><h1>Header</h2>
  Ut ea ut adipisicing in aliquip eiusmod esse duis dolor magna tempor dolor enim.Alcohol sign grenade j-pop neon assassin footage corrupted market bicycle savant claymore mine. Towards long-chain hydrocarbons woman sensory singularity construct sprawl meta-spook monofilament-ware artisanal. Sprawl soul-delay monofilament narrative tube dead pistol Chiba wristwatch warehouse pre-saturation point rifle concrete face forwards youtube order-flow.-ware otaku tube euro-pop office semiotics sprawl spook concrete order-flow math-cartel. Digital-space drone faded plastic Shibuya into RAF meta-savant knife. Singularity hacker gang beef noodles grenade 3D-printed human tattoo sunglasses A.I. market assassin vinyl. Refrigerator uplink rebar convenience store range-rover bomb urban free-market pen nodal point nano-futurity sub-orbital.-ware vinyl San Francisco order-flow otaku uplink math-render-farm cardboard spook man systemic. Monofilament shanty town tanto hacker marketing neon alcohol meta-face forwards dissident. </div>
  <div><h1 class="cube1">Header 2</h1>
    Ut ea ut adipisicing in aliquip eiusmod esse duis dolor magna tempor dolor enim.Alcohol sign grenade j-pop neon assassin footage corrupted market bicycle savant claymore mine. Towards long-chain hydrocarbons woman sensory singularity construct sprawl meta-spook monofilament-ware artisanal. Sprawl soul-delay monofilament narrative tube dead pistol Chiba wristwatch warehouse pre-saturation point rifle concrete face forwards youtube order-flow.-ware otaku tube euro-pop office semiotics sprawl spook concrete order-flow math-cartel. Digital-space drone faded plastic Shibuya into RAF meta-savant knife. Singularity hacker gang beef noodles grenade 3D-printed human tattoo sunglasses A.I. market assassin vinyl. Refrigerator uplink rebar convenience store range-rover bomb urban free-market pen nodal point nano-futurity sub-orbital.-ware vinyl San Francisco order-flow otaku uplink math-render-farm cardboard spook man systemic. Monofilament shanty town tanto hacker marketing neon alcohol meta-face forwards dissident.
  </div>
  <div><h1>Header 3</h1>
    <p>
    Ut ea ut adipisicing in aliquip eiusmod esse duis dolor magna tempor dolor enim.Alcohol sign grenade j-pop neon assassin footage corrupted market bicycle savant claymore mine. Towards long-chain hydrocarbons woman sensory singularity construct sprawl meta-spook monofilament-ware artisanal. Sprawl soul-delay monofilament narrative tube dead pistol Chiba wristwatch warehouse pre-saturation point rifle concrete face forwards youtube order-flow.-ware otaku tube euro-pop office semiotics sprawl spook concrete order-flow math-cartel. Digital-space drone faded plastic Shibuya into RAF meta-savant knife. Singularity hacker gang beef noodles grenade 3D-printed human tattoo sunglasses A.I. market assassin vinyl. Refrigerator uplink rebar convenience store range-rover bomb urban free-market pen nodal point nano-futurity sub-orbital.-ware vinyl San Francisco order-flow otaku uplink math-render-farm cardboard spook man systemic. Monofilament shanty town tanto hacker marketing neon alcohol meta-face forwards dissident. </p>
  </div>

</div>

        <script src="js/vendor/modernizr-3.5.0.min.js">
        </div>
        </script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
        <script>
            window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
            ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
        </script>
        <script src="https://www.google-analytics.com/analytics.js" async defer></script>
    </body>
</html>

## style.sass
@import url('https://fonts.googleapis.com/css?family=Montserrat')
$color_tundora_approx: rgba(68, 68, 68, 1)
$color_light_turquoise_approx: rgba(0, 216, 255, 0.1)
$black: rgba(0, 0, 0, 1)
$color_bright_turquoise_approx: rgba(0, 216, 255, 1)
$color_light_turquoise_approx: rgba(0, 216, 255, 0.1)
$color_celeste_approx: rgba(204, 204, 204, 1)
$color_suva_gray_approx: rgba(136, 136, 136, 1)
$white_100: rgba(255, 255, 255, 1)

//fonts
$font_0: Helvetica
$font_1: Arial
$font_2: sans-serif

body
  font-family: 'Montserrat', sans-serif
  padding: 10px
.header
  h1
  font-size: 50px
  background-color: red
.a1-style
  background-color: lightblue
  padding: 10px

.a2-style
  background-color: lightgreen
  padding: 10px
.sm-full-style
  background-color: beige
  background-size: 100%
.one
  height: 200px
  font-weight: 200px
  border: 1px solid yellow
  padding: 80px


.cube1
  background-image: url(https://static.pexels.com/photos/8263/pexels-photo.jpg)
  background-size: cover
  background-repeat: no-repeat

.tomato
  background: yellow
  background-image: url(https://static.pexels.com/photos/106344/pexels-photo-106344.jpeg)
  background-size: cover


.top-block
  background: #445577
  color: red


h2
  font-family: 'Lalezar', cursive font-size: 2em
  color: #ffffee

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/flex-layout-attribute/1.0.3/css/flex-layout-attribute.min.css" rel="stylesheet" />
	<html class="no-js" lang="">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="manifest" href="site.webmanifest">
	<link rel="apple-touch-icon" href="icon.png">
	<!-- Place favicon.ico in the root directory -->

	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
	</head>
	<body>
	<!--[if lte IE 9]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
	<![endif]-->

	<!-- Add your site or application content here -->
	<h1 layout="row center-center" class="header">Testing with flex-layout-attribute.min.css</h1>
	<div layout="row center-center-justify">
	<div><h1>Header</h2>
	Ut ea ut adipisicing in aliquip eiusmod esse duis dolor magna tempor dolor enim.Alcohol sign grenade j-pop neon assassin footage corrupted market bicycle savant claymore mine. Towards long-chain hydrocarbons woman sensory singularity construct sprawl meta-spook monofilament-ware artisanal. Sprawl soul-delay monofilament narrative tube dead pistol Chiba wristwatch warehouse pre-saturation point rifle concrete face forwards youtube order-flow.-ware otaku tube euro-pop office semiotics sprawl spook concrete order-flow math-cartel. Digital-space drone faded plastic Shibuya into RAF meta-savant knife. Singularity hacker gang beef noodles grenade 3D-printed human tattoo sunglasses A.I. market assassin vinyl. Refrigerator uplink rebar convenience store range-rover bomb urban free-market pen nodal point nano-futurity sub-orbital.-ware vinyl San Francisco order-flow otaku uplink math-render-farm cardboard spook man systemic. Monofilament shanty town tanto hacker marketing neon alcohol meta-face forwards dissident. </div>
	<div><h1 class="cube1">Header 2</h1>
	Ut ea ut adipisicing in aliquip eiusmod esse duis dolor magna tempor dolor enim.Alcohol sign grenade j-pop neon assassin footage corrupted market bicycle savant claymore mine. Towards long-chain hydrocarbons woman sensory singularity construct sprawl meta-spook monofilament-ware artisanal. Sprawl soul-delay monofilament narrative tube dead pistol Chiba wristwatch warehouse pre-saturation point rifle concrete face forwards youtube order-flow.-ware otaku tube euro-pop office semiotics sprawl spook concrete order-flow math-cartel. Digital-space drone faded plastic Shibuya into RAF meta-savant knife. Singularity hacker gang beef noodles grenade 3D-printed human tattoo sunglasses A.I. market assassin vinyl. Refrigerator uplink rebar convenience store range-rover bomb urban free-market pen nodal point nano-futurity sub-orbital.-ware vinyl San Francisco order-flow otaku uplink math-render-farm cardboard spook man systemic. Monofilament shanty town tanto hacker marketing neon alcohol meta-face forwards dissident.
	</div>
	<div><h1>Header 3</h1>
	<p>
	Ut ea ut adipisicing in aliquip eiusmod esse duis dolor magna tempor dolor enim.Alcohol sign grenade j-pop neon assassin footage corrupted market bicycle savant claymore mine. Towards long-chain hydrocarbons woman sensory singularity construct sprawl meta-spook monofilament-ware artisanal. Sprawl soul-delay monofilament narrative tube dead pistol Chiba wristwatch warehouse pre-saturation point rifle concrete face forwards youtube order-flow.-ware otaku tube euro-pop office semiotics sprawl spook concrete order-flow math-cartel. Digital-space drone faded plastic Shibuya into RAF meta-savant knife. Singularity hacker gang beef noodles grenade 3D-printed human tattoo sunglasses A.I. market assassin vinyl. Refrigerator uplink rebar convenience store range-rover bomb urban free-market pen nodal point nano-futurity sub-orbital.-ware vinyl San Francisco order-flow otaku uplink math-render-farm cardboard spook man systemic. Monofilament shanty town tanto hacker marketing neon alcohol meta-face forwards dissident. </p>
	</div>

	</div>

	<script src="js/vendor/modernizr-3.5.0.min.js">
	</div>
	</script>
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
	<script>window.jQuery \|\| document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
	<script src="js/plugins.js"></script>
	<script src="js/main.js"></script>

	<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
	<script>
	window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
	ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
	</script>
	<script src="https://www.google-analytics.com/analytics.js" async defer></script>
	</body>
	</html>
	@import url('https://fonts.googleapis.com/css?family=Montserrat')
	$color_tundora_approx: rgba(68, 68, 68, 1)
	$color_light_turquoise_approx: rgba(0, 216, 255, 0.1)
	$black: rgba(0, 0, 0, 1)
	$color_bright_turquoise_approx: rgba(0, 216, 255, 1)
	$color_light_turquoise_approx: rgba(0, 216, 255, 0.1)
	$color_celeste_approx: rgba(204, 204, 204, 1)
	$color_suva_gray_approx: rgba(136, 136, 136, 1)
	$white_100: rgba(255, 255, 255, 1)

	//fonts
	$font_0: Helvetica
	$font_1: Arial
	$font_2: sans-serif

	body
	font-family: 'Montserrat', sans-serif
	padding: 10px
	.header
	h1
	font-size: 50px
	background-color: red
	.a1-style
	background-color: lightblue
	padding: 10px

	.a2-style
	background-color: lightgreen
	padding: 10px
	.sm-full-style
	background-color: beige
	background-size: 100%
	.one
	height: 200px
	font-weight: 200px
	border: 1px solid yellow
	padding: 80px


	.cube1
	background-image: url(https://static.pexels.com/photos/8263/pexels-photo.jpg)
	background-size: cover
	background-repeat: no-repeat

	.tomato
	background: yellow
	background-image: url(https://static.pexels.com/photos/106344/pexels-photo-106344.jpeg)
	background-size: cover


	.top-block
	background: #445577
	color: red


	h2
	font-family: 'Lalezar', cursive font-size: 2em
	color: #ffffee