Up and coming web designers are at the golden age of CSS design and development. In the 1990s and earlier, designers were limited to designing their websites completely in HTML. But then they got smart when they realized that it made redesigns almost impossible. They separated the styling from the content to create a separate file called “CSS”. This started a revolution. Almost.
Fast forward another decade and designers and developers started to streamline the CSS process by designs frameworks and style guides and templates for faster web site turnaround. Frameworks such as Bootstrap took away most of the work of creating lines of CSS code by hand. That was great, but we became lazy. We became limited by the pre-defined templates and layouts that Bootstrap and other frameworks have created for us.
Jen Simmons wrote in her article, “The benefits of learning how to code layouts with CSS”, that it was time to go back to writing our own code. We stopped using graphic design to create websites. We started to rely on the same old website designs that we already laid out for us. CSS has all the elements we need to create beautiful UX designs that can convey the right message to our audience. We just need to learn how to use it.
New website design tools have become readily available like Wix, Weebly, Squarespace and old reliable, WordPress. Now anyone can design their own website in just a few hours with no prior coding experience at all. But with these predefined templates, all the web starts to look the same. Web designers have lost their creativity.
Simmons says that it is possible to make every new project unique because we now have the CSS tools to make it possible. The author writes, “Because now, finally, we have real tools for layout. CSS properties that were created to do layout. CSS Grid, Flexbox, Alignment, Writing Modes, Multicolumn, along with, yes, Floats, Positioning, Inline Block, Display Table — just to name a few.”
I also touched a little more on this topic in my blog post, “Going of the CSS Grid and Thinking Outside the Box.”
Listed below is part of a class assignment to watch Rachel Andrew’s tutorials on the CSS grid: gridbyexample.com/video and this question for each video: what does the skill demonstrated in this video allow us to do?
1. Defining A Grid – This skill allows us to create our own grid layout using a couple rules of CSS
2. Defining The fr Unit – The fr unit creates flexible units without having to calculate percentages. It represents a fraction of the available space in the grid content and makes a grid responsive. FR means 1 fraction unit of the available space. As the screen size goes up and down, the available space adjusts.
3. Repeat Notation – To use when you have a lot of column tracks in your grid. You can define the size and how many repeating columns. It doesn’t have to be limited by repeating. You can define your one-off columns before the repeating pattern.
4. Minmax() – This element sets the cell at a minimum and maximum width that you don’t want your object to exceed.
5. Grid Auto placement and Order – This rule helps to order the cells by row or by column, however you decide they should be placed on the page.
6. Auto-fill and Auto-Fit – Auto-fill tells the browser to fit as many pre-defined cells as it can on the screen, without the designer having to calculate how many will fit. If you add minmax to the rule, it tells the browser to not make the cells any larger or smaller than the pre-designed size amount you entered. Auto-fill will leave empty spaces if there aren’t enough cells created to fill the area. Auto-fit will distribute the sizes to fill the viewport. It will collapse the auto space to zero.
7. Auto-placement and packing modes – Grid-auto-flow: dense; fills up the space around the grid so there’s no chunks of empty spaces. It will move cells out of source order and find a space that it will fit in. Grid-column: 1/-1 will span a cell across the width of the screen and make it responsive.
8. Line-based Positioning – This helps to position items around the grid.
9. Named Lines – Allows you to name specific sections of your grid rather than relying on numbers for positioning. For example, by naming 2 fr [content start], you can now replace 2 fr by the words [content start]. Naming lines is helpful when working with media queries because you don’t have to change your numbering when referencing a certain size within a breakpoint. You can just reference the name.
10. Aligning and Justifying Grid Items – Align-items: start/end/center; or justify-items: start/end/center; will align or justify cell positions within a grid container. Align-self and justify-self will position individual line items within a div. Justify moves items left to right within the cell. Align moved items up and down within the cell. The default positioning is stretch.
11. Aligning and Justifying the Grid – Align-content: start/end/center; or justify-content: start/end/center; will align or justify the item grid items together as a group within a container. The default positioning is start. :space-between; will override preset width, height and grip-gaps and place grid items on the margins of the container. :space-around; will create equal amount of spacing with each items.
12. Grid Template Areas – Positioning items on a grid by calling them out by name. Do this my naming each portion of the grid. For example, if you have a header, you will need to give it a name within your CSS first – header {grid-area:hd};. Whereas header can be any div or item in your html and hd can really be any name you want to name that item. Then you’ll have to go under .grid or whatever you named the div that contains the grid to position each item. Use the rule grid-template-area:”(insert named grid items here in the order you’d like them to be placed”; to layout your grid.
.grid{
grid-template-area:
“hd”
“main”
“sidebar”
“footer” }
will place each item horizontally on the grid.
13. Magic Lines and Magic Areas – This video shows how to position named lines within a grid.
14. Nested Grids – You can set up grid items inside of grid containers, essentially a grid within a grid
15. Subgrid and display:contents – Only direct children of a grid can become grid items. if you have divs inside items withing the div.grid, they are not effected by the main grid. The rule display: subgrid; on the div inside of the main grid div will include the child items within the main grid items. The rule display: contents; will make the inside div items act like they are part of the main div and will remove the parent div around them. Only the box generation is effected by the display:contents rule.
16. Stacking and z-index – Use if you want to place grid items on top of other grid items or overlay them. z-index will bring items forward. RGB colors add transparency to background colors.
17. Anonymous Items – Spans and div can act as grid items.
18. Absolute Positioning and Grid Items – Absolute positioning takes a grid item out of alignment and then you can move it around the grid as needed. Position: relative the parent so you can position:absolute the child.
19. Grid Template Shorthand – You can combine grid-template-rows and grid-template-columns into grid-template: row info / column info;. Shorthand naming areas by first naming each area, for example .grid > div:nth-child(4){grid-area:whatever shorthand name you want to give the grid item; } item in parenthesis is whatever you named your div item within the grid div. Then under .grid you can use rule – grid-template-areas: “whatever shortname you gave your grid item in order of how you want them to appear”;
You can combine rows, columns and template into one rule – grid-template: “head head head head” (means header will expand over 4 rows) auto (row size height for first row – auto makes it just high enough to fit whatever content is in it) “side1 main main side2″ 300px (300px is row height for the second row) / 1fr, 1fr, 1fr, 1fr; (1fr is 4 fraction units in height).
20. Feature Queries and Grid – Not all browsers support CSS grid, like Safari. You can set up a feature query to show a message if the browser doesn’t support grid. @support (display:grid) {.message (.message will be whatever you call the paragraph class that you add your message) {display:none;}}
Next part of the class assignment is two pick two common CSS grid layout patterns that I might use for my discography project redesign.
I can see this option as one of my redesigns for the home page of my discography project. It is responsive and I can move the band images to the side bar and move my table to the 2 column larger section.
This option is also doable for my redesign. I’m not really sold on it, but I had to pick two so this was my next best choice. i just don’t have the vision yet.
