ISTA 230

ISTA 230 - Introduction to Web Design

CSS 3 – Approaches to Layout

CSS

CSS

CSS - Block Elements

      
Block Element
Block Element
Block Element
Block Element

CSS

CSS

CSS - Inline Elements

      
Inline Element
Inline Element
Inline Element
Inline Element

CSS

CSS

CSS - Layout

CSS

CSS

CSS - Layouts

CSS is kind of horrible at layouts.

CSS

CSS

CSS - Layouts

      
Header
Nav
Article
Aside
Footer

CSS

CSS

CSS - Layouts

      
Header
Nav
Article
Aside
Footer

CSS

CSS

CSS - Layouts

      
Column 1
Column 2
Column 3

CSS

CSS

CSS 3 - Flexbox Layout

<div id="container">
   <div class="item" id="item1">Item 1</div>
   <div class="item" id="item2">Item 2</div>
   <div class="item" id="item3">Item 3</div>
   <div class="item" id="item4">Item 4</div>
</div>

CSS

CSS

CSS 3 - Flexbox Layout

      
Item 1
Item 2
Item 3
Item 4

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;
}
      
Item 1
Item 2
Item 3
Item 4

CSS

CSS

CSS 3 - Flexbox Layout

      
Item 1
Item 2
Item 3
Item 4
      
Items
Items
Items
Items

CSS

CSS

CSS 3 - Flexbox Layout

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;
   flex-direction: row; /* Default for flex-direction */
}
      
Item 1
Item 2
Item 3
Item 4

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;
   flex-direction: column;
}
      
Item 1
Item 2
Item 3
Item 4

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;


}
      
Centered

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;
   justify-content: center;

}
      
Centered

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;
   justify-content: center;
   align-items: center;
}
      
Centered

CSS

CSS

CSS 3 - Flexbox Layout

Diagram of boxes when using flex layouts

CSS

CSS

Flexbox Properties

.container
{
   display: flex;
   justify-content: center; /* Main axis alignment */
   align-items: center;     /* Cross axis alignment   */
}

.item
{

}
/*
 * Allows us to use a flexbox layout instead
 * of a block/inline layout.
 *
 * -- Browser prefix recommended --
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 10 only

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;
   justify-content: flex-start;
}
      
Item 1
Item 2
Item 3

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;
   justify-content: flex-end;
}
      
Item 1
Item 2
Item 3

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;


}
      
Item 1
Item 2
A much more detailed item

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;
   align-items: stretch;

}
      
Item 1
Item 2
A much more detailed item

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   display: flex;
   align-items: stretch;
   justify-content: space-between;
}
      
Item 1
Item 2
A much more detailed item

CSS

CSS

CSS 3 - Flexbox Layout

#container .item
{
   
}
      
Item 1
Item 2
A much more detailed item

CSS

CSS

CSS 3 - Flexbox Layout

#container .item
{
   flex-grow: 1;
}


      
Item 1
Item 2
A much more detailed item

CSS

CSS

CSS 3 - Flexbox Layout

#container .item
{
   flex-grow: 1;
}

#item2 { flex-grow: 3; }
      
Item 1
Item 2
A much more detailed item

CSS

CSS

CSS 3 - Flexbox Layout

#container .item
{
   align-items: flex-start;
}


      
Item 1
Item 2
A much more detailed item

CSS

CSS

CSS 3 - Flexbox Layout

#container .item
{
   align-items: flex-start;
}

#item2 { align-self: flex-end; }
      
Item 1
Item 2
A much more detailed item

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   width: 300px;

}

#container .item
{
   width: 80px;
}
      
Item 1
Item 2
Item 3
Item 4
Item 5

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   width: 300px;
   flex-wrap: wrap;
}

#container .item
{
   width: 80px;
}
      
Item 1
Item 2
Item 3
Item 4
Item 5

CSS

CSS

CSS 3 - Flexbox Layout

#container #item1 {           }
#container #item2 {           }
#container #item3 {           }
#container #item4 {           }
#container #item5 {           }
      
Item 1
Item 2
Item 3
Item 4
Item 5

CSS

CSS

CSS 3 - Flexbox Layout

#container #item1 { order: 3; }
#container #item2 { order: 4; }
#container #item3 { order: 1; }
#container #item4 { order: 5; }
#container #item5 { order: 2; }
      
Item 1
Item 2
Item 3
Item 4
Item 5

CSS

CSS

CSS 3 - Flexbox Layout

#container
{


}
      
Item 1
Item 2
Item 3
Item 4
Item 5

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   flex-direction: row-reverse;

}
      
Item 1
Item 2
Item 3
Item 4
Item 5

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   flex-direction: row-reverse;
   justify-content: flex-start;
}
      
Item 1
Item 2
Item 3
Item 4
Item 5

CSS

CSS

CSS 3 - Flexbox Layout

#container
{
   flex-direction: row-reverse;
   justify-content: flex-end;
}
      
Item 1
Item 2
Item 3
Item 4
Item 5

CSS

CSS

CSS 3 - Multi-Column Layouts

CSS

CSS

CSS 3 - Multi-Column Layouts

<div id="container">
   <div>                                     </div>
   <div>                                     </div>
   <div>                                     </div>
</div>

CSS

CSS

CSS 3 - Multi-Column Layouts

#container { overflow:auto; }

#container div
{
   width:28%;
   padding:1%;
   margin-right:1%;
   border-right:1px solid #ccc;
   float:left;
}

CSS

CSS

CSS 3 - Multi-Column Layouts

<div id="container">
   <div>                                     </div>
   <div>                                     </div>
   <div>                                     </div>
</div>

CSS

CSS

CSS 3 - Multi-Column Layouts

<div id="container">
   <div>When in the Course of human...       </div>
   <div>We hold these truths to be...        </div>
   <div>from the consent of the governed,... </div>
</div>

CSS

CSS

CSS 3 - Multi-Column Layouts

      
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers
from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

CSS

CSS

CSS 3 - Multi-Column Layouts

<div id="container">
   When in the Course of human...


</div>

CSS

CSS

CSS 3 - Multi-Column Layouts

#container
{
   columns:3;

}

CSS

CSS

CSS 3 - Multi-Column Layouts

      
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

CSS

CSS

CSS 3 - Multi-Column Layouts

#container
{
   columns:3;
   column-gap:3em;
}

CSS

CSS

CSS 3 - Multi-Column Layouts

      
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

CSS

CSS

CSS 3 - Multi-Column Layouts

#container
{
   columns:3;
   column-gap:3em;
   column-rule:1px solid #ccc;
}

CSS

CSS

CSS 3 - Multi-Column Layouts

      
When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

CSS

CSS

CSS 3 - Multi-Column Layouts

<div id="container">
   <h1>The Declaration of Independence</h1>
   When in the Course of human...


</div>

CSS

CSS

CSS 3 - Multi-Column Layouts

      

The Declaration of Independence

When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.--That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, --That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

CSS

CSS

CSS 3 - Multi-Column Layouts

#container
{
   columns:3;
   column-gap:3em;
   column-rule:1px solid #ccc;
}

#container h1
{
   column-span:all;
}

CSS

CSS

CSS 3 - Multi-Column Layouts

      

CSS

CSS

CSS 3 - Multi-Column Layouts

#container
{
   columns:100px;
   column-gap:3em;
   column-rule:1px solid #ccc;
}

#container h1
{
   column-span:all;
}

CSS

CSS

CSS 3 - Multi-Column Layouts

      

CSS

CSS

CSS 3 - Multi-Column Layout

CSS

CSS

columns Property

div { columns: 3; }
div
{
   columns: 100px;
   column-gap: 2em;
   column-rule: 1px solid #999;
}
div h1 { column-span: all; }
/*
 * Allows us to flow text in multiple
 * columns.
 * 
 * Default Value: none
 * Inherited: No
 *
 * -- Browser prefix recommended --
 */
Chrome: Yes
Firefox: Yes
Opera: Yes
Safari: Yes
MS Edge: Yes
IE: >= IE 10 only

It is worth noting that there are JavaScript solutions for Internet Explorer, versions 9 and below. See http://13thparallel.com/archive/column-script/ for more details.

CSS

CSS

CSS - Shapes

      

Chimichuri Soup

This is one of my favorite meals and it's so easy to make. Most of the ingredients can be found at Trader Joe's and the recipe makes enough for at least five people.

There are literally four ingredients to this recipe: one bag of frozen chimichurri rice, one box of tomato and roasted red pepper soup, one can of chicken breast, and one jar of corn and chile salsa. That's it!

Simply mix all ingredients in a pot and simmer until warmed through, usually about 20 minutes. The recipe yields about 8 cups.

CSS

CSS

CSS - Shapes

<img src='images/soup.png' id='soupPic' alt='A picture of my soup' />
#soupPic
{
   float: left;
}

#recipe
{
   margin-left: 300px;
}

CSS

CSS

CSS - Shapes

      
Picture of the soup

Chimichuri Soup

This is one of my favorite meals and it's so easy to make. Most of the ingredients can be found at Trader Joe's and the recipe makes enough for at least five people.

There are literally four ingredients to this recipe: one bag of frozen chimichurri rice, one box of tomato and roasted red pepper soup, one can of chicken breast, and one jar of corn and chile salsa. That's it!

Simply mix all ingredients in a pot and simmer until warmed through, usually about 20 minutes. The recipe yields about 8 cups.

CSS

CSS

CSS - Shapes

CSS

CSS

CSS - Shapes

#recipe { margin-left: 0px; }

#soupPic
{
   shape-outside: url('../images/soup.png');
   shape-image-threshold: 0.95;
   shape-margin: 20px;
}

CSS

CSS

CSS - Shapes

      
Picture of the soup

Chimichuri Soup

This is one of my favorite meals and it's so easy to make. Most of the ingredients can be found at Trader Joe's and the recipe makes enough for at least five people.

There are literally four ingredients to this recipe: one bag of frozen chimichurri rice, one box of tomato and roasted red pepper soup, one can of chicken breast, and one jar of corn and chile salsa. That's it!

Simply mix all ingredients in a pot and simmer until warmed through, usually about 20 minutes. The recipe yields about 8 cups.

CSS

CSS

CSS - Shapes

      

Chimichuri Soup

This is one of my favorite meals and it's so easy to make. Most of the ingredients can be found at Trader Joe's and the recipe makes enough for at least five people.

There are literally four ingredients to this recipe: one bag of frozen chimichurri rice, one box of tomato and roasted red pepper soup, one can of chicken breast, and one jar of corn and chile salsa. That's it!

Simply mix all ingredients in a pot and simmer until warmed through, usually about 20 minutes. The recipe yields about 8 cups.

CSS

CSS

CSS - Shapes

#recipe:before
{
   content: '';
   display: block;
   float:left;
   width: 300px;
   height: 400px;
   shape-outside: circle(200px);
}

CSS

CSS

CSS - Shapes

      

Chimichuri Soup

This is one of my favorite meals and it's so easy to make. Most of the ingredients can be found at Trader Joe's and the recipe makes enough for at least five people.

There are literally four ingredients to this recipe: one bag of frozen chimichurri rice, one box of tomato and roasted red pepper soup, one can of chicken breast, and one jar of corn and chile salsa. That's it!

Simply mix all ingredients in a pot and simmer until warmed through, usually about 20 minutes. The recipe yields about 8 cups.

CSS

CSS

CSS - Shapes

#recipe:before
{
   content: '';
   display: block;
   float:left;
   width: 300px;
   height: 400px;
   shape-outside: circle(200px at 0% 50%);
   
      /**
      Defines a circle whose radius is 200px and positioned at 0,50% of the
      element's coordinate system.
      **/
}

CSS

CSS

CSS - Shapes

      

Chimichuri Soup

This is one of my favorite meals and it's so easy to make. Most of the ingredients can be found at Trader Joe's and the recipe makes enough for at least five people.

There are literally four ingredients to this recipe: one bag of frozen chimichurri rice, one box of tomato and roasted red pepper soup, one can of chicken breast, and one jar of corn and chile salsa. That's it!

Simply mix all ingredients in a pot and simmer until warmed through, usually about 20 minutes. The recipe yields about 8 cups.

CSS

CSS

CSS - Shapes

#recipe:before
{
   content: '';
   display: block;
   float:left;
   width: 300px;
   height: 400px;
   shape-outside: ellipse(300px 100px at 0% 50%);
}

CSS

CSS

CSS - Shapes

      

Chimichuri Soup

This is one of my favorite meals and it's so easy to make. Most of the ingredients can be found at Trader Joe's and the recipe makes enough for at least five people.

There are literally four ingredients to this recipe: one bag of frozen chimichurri rice, one box of tomato and roasted red pepper soup, one can of chicken breast, and one jar of corn and chile salsa. That's it!

Simply mix all ingredients in a pot and simmer until warmed through, usually about 20 minutes. The recipe yields about 8 cups.

CSS

CSS

CSS - Shapes

      
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel sapien arcu. Vestibulum congue risus quam, et consectetur sapien pulvinar sed. Vivamus ut lacus ut arcu dapibus aliquet. Etiam convallis felis eget viverra congue.

“What a fantastic looking pull quote!”

Vivamus eu lobortis diam. Ut pulvinar ex non ligula semper ornare. Integer quis congue turpis. Praesent aliquam lacinia dui non lobortis. Fusce scelerisque, nunc at luctus aliquam, tellus nulla feugiat nisi, et ultricies lectus velit id turpis. Aliquam rhoncus eros at ex varius, in volutpat orci tempus. Integer porta arcu nec dignissim malesuada. Nullam pretium tortor nec aliquam scelerisque. Quisque tristique et nisl a euismod. Proin tellus lacus, mattis eu commodo nec, tincidunt sit amet dolor. Sed vestibulum varius nibh, condimentum cursus metus tincidunt id. Sed in metus tellus.

CSS

CSS

CSS - Shapes

.pullQuote
{
   float: left;
   border-radius: 100px;
   padding: 50px;
   shape-outside: inset(offsetValue round borderRadius);
}

CSS

CSS

CSS - Shapes

.pullQuote
{
   float: left;
   border-radius: 100px;
   padding: 50px;
   shape-outside: inset(0px round 100px);
}

CSS

CSS

CSS - Shapes

      
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel sapien arcu. Vestibulum congue risus quam, et consectetur sapien pulvinar sed. Vivamus ut lacus ut arcu dapibus aliquet. Etiam convallis felis eget viverra congue.

“What a fantastic looking pull quote!”

Vivamus eu lobortis diam. Ut pulvinar ex non ligula semper ornare. Integer quis congue turpis. Praesent aliquam lacinia dui non lobortis. Fusce scelerisque, nunc at luctus aliquam, tellus nulla feugiat nisi, et ultricies lectus velit id turpis. Aliquam rhoncus eros at ex varius, in volutpat orci tempus. Integer porta arcu nec dignissim malesuada. Nullam pretium tortor nec aliquam scelerisque. Quisque tristique et nisl a euismod. Proin tellus lacus, mattis eu commodo nec, tincidunt sit amet dolor. Sed vestibulum varius nibh, condimentum cursus metus tincidunt id. Sed in metus tellus.

CSS

CSS

CSS - Shapes

CSS

CSS

CSS Shape Properties

img
{
   shape-outside: url('../images/pic.png');
   shape-image-threshold: 0.95;
   shape-margin: 20px;
}

.pullQuote
{
   shape-outside: inset(0px round 150px);
}
/*
 * Allows us to use a non-rectangular shapes for
 * our wrapping text around other elements.
 */
Chrome: Yes
Firefox: No
Opera: Yes
Safari: Yes
MS Edge: No
IE: No