Thu Oct. 12

Goals

• I calculate layout box.
• I know the flex basics.
• I can use layout grids.

Content

• Clac
• Flex
• Grid

RECAP – 10.10.

1. Float
2. Background Images & CSS3 Filter
3. Q & A

Calc is cool

Calc only works with box-sizing.

• Calc theorie

Use Cases for Calc()

• w3school
• Calc – sample
• Calc – fixed header sample
• mediaevent.de

Flex

Flex is an other display setting witch is CSS3.

• css-tricks (EN)
• CSS3 Flexbox (DE)
• Specs und Demos: mdn flex | msdn flex
• Flex by Monorom (unfinished)

Layout Grid

Oft sind Grids die unsichtbaren Helfer einer Webseite und bilden die Basis, das Fundament. Nicht jede Webseite braucht zwingend ein Grid. Ein Grid ist eine einfache Möglichkeit, responsive und flexible Layouts zu erstellen.

Einige Vorteile solcher Grid-Systeme:

• Konsistentes Design
• Weniger CSS-Fehler
• Können einfach als Wireframe genutzt werden
• Einfache und schnelle Entwicklung von Prototypen

Often grids are the invisible helpers of a website and build the basis of a layout. Not every website necessarily needs a grid. It's just a very convenient way to create responsive and flexible layouts.

Some advantages of grid based layouts:

• Consistent design (easier to plan and translate the layout into its responsive behaviour)
• Less css mistakes
• Can be used as wireframes
• Quick and easy development of prototypes

Using responsive Layout Grid

• 100+ Best Grid Systems
• Monorom's Particles Grid

Goals

• I'm readay to present the portfolio at the Community Meetup.

Exercises

• Finish the portfolio - grid exercise