grid_styled_content
intro
Work smart!
not hard.
The less code you use,
the less there is to break!

about me

markus@timtner.tech
Information System Services & Consulting since 2001

Standards Ambassador
Accessibility Advocate
Open Source Enthusiast
Browser Wars Veteran
Machine Whisperer

Agenda

Goals

A little history

Status quo

display:grid deep dive

Content elements with d:g

Bringing it all together

Goals

replace fluid_styled_content ASAP

provide state-of-the-art markup and styling

no need for post processing build chains

no need to rebuild standard content elements again and again (anymore)

easy and fun to use!

Heavily inspired by "the web - rebuilding things you do not need" by Chris

Bonus

  • add some sensible defaults to Elements
    [copyright, native video facades]
  • accessible container elements
  • Content Elements available as Content Blocks
  • deprecate GalleryProcessor?
  • Incorporate utopiy.fyi and TODS.css

Where do we come from?

A little history

source: htmlhell

HTML & CSS

separation of content and presentation

Tables
Floats
negative margins
holy grail layout
from grid-layout.com
from grid-layout.com
jQuery
Bootstrap
Tailwind

Every website looks the same^^

source: Dave Ellis

remember, this:

<div class="text-center text-red-400 text-lg">

Is the exact same ignorant bloated PRESENTATIONAL garbage as:

<center><font color="#F77272" size="+1">

Apart from the latter having one extra DOM element
and the former being more code.





  
  

    

      
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
		aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
		<circle cx="12" cy="13" r="4"/></svg>
        Album

Just the header from Bootstrap’s “album” example.


  

    

      
 Album

A quick standardized rewrite.

1.8k of markup doing 803 bytes flipping job!

TYPO3: css_styled_content
TYPO3: fluid_styled_content

Status quo

Technical basic recap

1kb Text < 1kb HTML < 1kb CSS < 1kb JS

Code/Content Ratio

"Performance"

HTML5

semantics

How many html tags do you know?

HTML Tags Memory Test

114
according to standard

HTML5

Anatomy of a webpage:


							<html>
								<head></head>
								<body>
									

									

									

								</body>
							</html>

CSS3

"baseline compatibility"

  • widely available
  • newly available
  • limited availability

CSS3

selectors, i.e. :has()

custom properties aka "variables" (--*)

display:flex

display:grid

transitions

animations

Responsive | Adaptive

HTML is already inherently adaptive!

(Designers were the ones screwing that over)

BUT: different viewports / device classes


"breakpoints"

desktop tablet handheld

→ @media queries, @container queries

Progressive Enhancement

text → html → css → js

"Desktop-first" approach

With CSS it is also easier
to just turn off flex or grid
to strip off columns,
than it is to add them!


But keep in mind:
different devices are also used differently!

Accessibility

A whole topic on its own.

But not today...

and now...

Layout columns

with display:grid !

What is it all about, display:grid ?

First, the grid vocabulary:


grid lines

grid cell

grid row

grid column

grid area

A basic grid

HTML

CSS 

							.container {
								display: grid;
								grid-template-columns: 1fr 1fr 1fr;
							}
Result:

there are lots of css grid attributes, but we focus on

grid lines.

named grid lines!

A grid with named lines:

CSS 


							.container {
								display: grid;
								grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
							}

Uuh! Ugly.

A grid with named lines

CSS: 


							.container {
								display: grid;
								grid-template-columns: 
									[main-start] 1fr 
										[content-start] 1fr [content-end] 
									1fr [main-end];
							}

Ah. more readable!

children with named columns

CSS: 


							.container :nth-child(1) { grid-column: content-start / content-end; }
							.container :nth-child(2) { grid-column: content-end   / main-end;    }
							.container :nth-child(3) { grid-column: main-start    / main-end;    }

Result:

same applies to grid-row

on top of that, there is also grid-area

... but not now.

Structured Content

"Content Elements"

What exactly is a content element ?

→ logically structured content

Err, what is structured content again?

Structured content refers to the concept of organizing and treating digital content like data. Publishing content as modular, discrete pieces of information that are tagged with machine-readable descriptions can transform how people find, understand, share, use, and reuse information.

from digital.gov

text

[header]

[header_link]

[subheader]

[bodytext]

media

[header]

[header_link]

[subheader]

[file(s)]

[alternative]

[title]

[description]

[copyright]

[link]

text AND media

  • media above text
    left center right justify
  • media below text
    left center right justify
  • media besides text
    left right
  • media in text
    left right

Wait, I found some more... !

  • text besides media
    left right
  • image left, text right
  • text left, image right

ok... , and what about responsive?


the layout of the element has to be adjusted to the viewport

"the narrower the viewport,
the more linear the content flow"
- me

But, remember, separation of concerns!


And I dont't want any of that stuff in my markup!!

So, what about the markup?




<-- [...] -->

It stays the same for all elements!

(mostly)




	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, left

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, right

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Below, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Below, left

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Below, right

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
In text, left

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
In text, right

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.
now to the (mostly) part



	

		
Image besides Text, right

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.

	

	

		

	



						



	

		

	

	

		
Image besides Text, left

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.

	



						



	

		

	

	

		
Text besides Image, right

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.

	



						



	

		
Text besides Image, left

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.
media(left|right) and text(right|left)
behave slightly different, though. :sad: 



	

		

			
			

				
©

				
NeoBlack CC BY 2.0

			

		

		
image description

	

	

		
Text + image

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.

	



						



	

		

			
			

				
©

				
NeoBlack CC BY 2.0

			

		

		
image description

	

	

		
image + Text

		
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.
You get the idea, I hope.

oh, and what about the breakouts ?

this is handled with the [grid_column] class

per default this falls back to .column-body




	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.



						



	
Above, center

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link.

	

		

	

	
Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon. Bacon ipsum dolor sit strong amet capicola jerky pork chop rump shoulder shank. Shankle strip steak pig salami link. Leberkas shoulder ham hock cow salami bacon em pork pork chop, jerky pork belly drumstick ham. Tri-tip strip steak sirloin prosciutto pastrami. Corned beef venison tenderloin, biltong meatball pork tongue short ribs jowl cow hamburger strip steak. Doner turducken jerky short loin chuck filet mignon.
You get the idea here too, I hope.

and the styling ?

Easy.

;D


body {
	--screen-margin       :   1.5rem;
	--screen-inset-width  :   5fr;
	--page-margin         :   3.33rem;
	--page-inset-left-min :   3.33rem;
	--page-inset-left-max :  10rem;
	--page-inset-right-min:   3.33rem;
	--page-inset-right-max:  10rem;
	--body-outset         :   3.33rem;
	--body-margin         :   1.5rem;
	--body-content-min    :  30rem;
	--body-content-max    :  45rem;

	margin: 0 auto;
	/*max-width: 1920px;*/
}
[grid layout columns image] 

body .grid {
	display: grid;
	gap: 0;
	grid-template-columns:
		[screen-start] var(--screen-margin)
			[screen-start-inset] var(--screen-inset-width)
				[page-start] var(--page-margin)
					[page-start-inset] minmax( var(--page-inset-left-min), var(--page-inset-left-max) )

						[body-start-outset] var(--body-outset)
							[body-start] var(--body-margin)
								[body-content-start]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
									[center-line]
									minmax(
										calc( var(--body-content-min) / 2 )
										,
										calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
									)
								[body-content-end]
							var(--body-margin) [body-end]
						var(--body-outset) [body-end-outset]

					minmax( var(--page-inset-right-min), var(--page-inset-right-max) ) [page-end-inset]
				var(--page-margin) [page-end]
			var(--screen-inset-width) [screen-end-inset]
		var(--screen-margin) [screen-end];
}
[desktop example image]

tablet


@media (max-width: 70rem) {
	body .grid {
		grid-template-columns:
			[screen-start] var(--screen-margin)
				[screen-start-inset] var(--screen-inset-width)
					[page-start page-start-inset body-start-outset body-start] var(--body-margin)
						[body-content-start] 
							minmax(
								calc( var(--body-content-min) / 2 )
								,
								calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
							)
							[center-line]
							minmax(
								calc( var(--body-content-min) / 2 )
								,
								calc( ( var(--body-content-max) - 2 * var(--body-margin) ) / 2 )
							)
						[body-content-end]
					var(--body-margin) [body-end]
					var(--body-outset) [body-end-outset]
					minmax( var(--page-inset-right-min), var(--page-inset-right-max) ) [page-end-inset]
					var(--body-outset) [page-end]
				var(--screen-inset-width) [screen-end-inset]
			var(--screen-margin) [screen-end];
	}
}
[tablet example image]

mobile


@media (max-width: 20rem) {
	body .grid {
		grid-template-columns:
			[screen-start] var(--screen-margin)
				[screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start] 
					minmax(0, calc( 1fr / 2 ))
						[center-line]
					minmax(0, calc( 1fr / 2 ))
				[body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset]
			var(--screen-margin) [screen-end];
	}
}
[mobile example image] 

.page-full {
	grid-column: screen-start/screen-end;
}

.grid > * {
	grid-column: body-content-start/body-content-end;
}

.grid .content {
	grid-column  : body-content-start/body-content-end;
	grid-row     : content-top/content-bottom;
	align-content: flex-start;
}

.grid .column-body {
	grid-column: body-content-start/body-content-end;
}

.grid .column-body-outset {
	grid-column: body-start-outset/body-end-outset;
}

.grid .column-page {
	grid-column: page-start/page-end;
}

.grid .column-page-inset {
	grid-column: page-start-inset/page-end-inset;
}

.grid .column-screen {
	grid-column: screen-start/screen-end;
}

.grid .column-screen-inset {
	grid-column: screen-start-inset/screen-end-inset;
}

.grid .column-screen-inset.shaded {
	grid-column: screen-start/screen-end;
	padding: 1em;
	background: #888;
	margin-bottom: 1em;
	overflow: hidden;
}
.grid .column-screen-inset.shaded {

}

@media (min-width: 70em) {
	.column-before {
		grid-column: page-start/body-start;
		}

	.margin-caption,
	.aside,
	aside:not(.footnotes):not(.sidebar),
	.column-margin {
		grid-column: body-end/page-end;
		}
}

.grid .column-body-outset-right,
.grid .column-body-right {
	grid-column: body-content-start/body-end-outset;
}
.grid .column-page-inset-right {
	grid-column: body-content-start/page-end-inset;
}
.grid .column-page-right {
	grid-column: body-content-start/page-end;
}
.grid .column-screen-inset-right {
	grid-column: body-content-start/screen-end-inset;
}
.grid .column-screen-right {
	grid-column: body-content-start/screen-end;
}
.left {
	text-align: left;
	padding-left: 1em;
}




.grid .column-body-outset-left,
.grid .column-body-left {
	grid-column: body-start-outset/body-content-end;
}
.grid .column-page-inset-left {
	grid-column: page-start-inset/body-content-end;
}
.grid .column-page-left {
	grid-column: page-start/body-content-end;
}
.grid .column-screen-inset-left {
	grid-column: screen-start-inset/body-content-end;
}
.grid .column-screen-left {
	grid-column: screen-start/body-content-end;
}
.right {
	text-align: right;
	padding-right: 1em;
}
and, thats it, basically.

but wait, there is more!

What do we do if we want to have custom styling?
(like, a background color etc)

→ [frame_class]

[frame_class example image]

Bonus Level

Nested Content

"Container Elements"

For Container Elements,
the same principles apply

These are basically just another wrapping tag
around the content elements

the appearance/positioning is controlled
via the [grid_class] in the wrapper tag.

These are the Elements which are commonly used:

1 column

2 columns

3 columns

4 columns

"accordion"

tabs

slider

concerning accordions:

details>summary

Click me

Accessibility, remember ;)

putting it all together

ok, nice.

But how does this work in practice?

Demo,
or it didn't happen !

Benefits

less code

better accessibility

better maintainability

easy interface for editors

Todos

release ✓
composer req markustimtner/grid-styled-content

better icons

better layout dataprocessor

documentation

cleanup

gsc styleguide

"Marketing"

Any help is greatly appreciated.

Q: Can I use it with {framework} ?

A: D'oh. No. You shouldn't. Just don't!

Thank you!
#grid_styled_content

changelog

1.1.1 2024-11-19 modified for FTUG @ orange hive

1.1.0 2024-11-13 display:grid FTW! presented at ctwebdev2024

1.0.0 2024-11-10 initial Version: presented at T3CRR24