Demo Site
A simple demo of Structure.CSS with no bells or whistles
This website is an example of how structure is rendered. Yes I am aware it looks terrible, it has no custom CSS. You will need to bring to BYO jazz for your site. If you have dark mode enabled in your browser you should be noticing that support for that is baked in.
Being basic is the aim of the game
There's not really much to say, it's a simple framework for me to get websites up and running quickly. This demo was more basic but my wife took a cheeky peak at it and made fun of it so now this is what you get.
We have a 12 column flex system
As is the standard for most frameworks we have a 12 column system which is implemented via flex divs. Here is a demo of it:
12/12 flex span for small6/12 flex span for medium4/12 flex span for large
12/12 flex span for small6/12 flex span for medium4/12 flex span for large
12/12 flex span for small6/12 flex span for medium4/12 flex span for large
full width when smallshrink flex span for mediumshrink flex span for medium
full width when smallauto flex span for mediumauto flex span for medium
shrink flex span for large
We also have a grid system
By default our grid container is the standard 12 wide grid we see in most systems. There is a 10 wide option but as 12 works better for this demo here that is:
12/12 grid span for small6/12 grid span for medium4/12 grid span for large
12/12 grid span for small6/12 grid span for medium4/12 grid span for large
12/12 grid span for small6/12 grid span for medium4/12 grid span for large
Flex vs Grid system
Flex
Pro: Can have shrink/expand columns
Con: Padding on columns can cause frustrating UI artifacts
Grid
Pro: Good for card/tile views when you want everything sized the same
Con: Is very much a 12 or 10 column system
My recommendation
If you don't mind having an extra div between your column div and it's content that handles padding and margins go with Flex. Check out the source of this page to get an idea what this looks like.
Do you use tables often?
Neither do I, but occasionally they are required. With that in mind here is an example table that collapses down on small screeens:
| Ubuntu Server.iso | 0.9GB |
| Windows 10.iso | 4.6GB |
| ISO to USB.exe | 1.0MB |
An example of a pre block
pre {
display: block;
line-height: 1.25rem;
white-space: pre-wrap;
margin: 8px;
padding: 8px;
font-family: $pre-font-stack;
color: $darker-color;
background-color: $lighter-color;
}How about forms?
Ok so forms are a work in progress. Here is an example form for me to test with.