Designing Outside of a Framework – The Magic of CSS Grid

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: 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.

“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.



A Technical Approach to Getting Your Design Team On The Same Page

I usually base a lot of my design decisions on what I feel looks good. Since I’m still a web design student, I’ve been lucky enough to get away with this methodology for now. I don’t know how I’ve come to these conclusions; maybe my right brain rules the show? But for some more analytical people, they need a more technical approach when it comes to web design.

Priyanka Godbole wrote an article entitled, “A Framework for Creating a Predictable and Harmonious Spacing System for Faster Design-Dev Handoff“ that answers the question of, ‘How can we over complicate a spacing issue so that everyone is on the same page.’ This is not a quote in her article, but rather my own point of view after reading it. Granted, I’m saying this because I didn’t fully understand her approach to solving her spacing issue. However, that is what I was able to gather after reading it.

When designing and developing a UI with a team, consistency and spacing become an issue. In Godbole’s case, she was developing an internal database system in which the design parties involved were not following any guidelines in spacing. As a result, extra padding, margins, and other inconsistent spacing were becoming an issue. Using a lot of hypothesis testing, multiples of 8 and 14, grids, intervals and geometry, her team was able to pick values that worked for the project and agreed to adhere to them.

While I didn’t understand most of her strategy on how she and her team calculated the code, I do understand the need to have guidelines in place to keep the experience consistent across all screen sizes and uses.  Nathan Curtis wrote an article on a similar theme, but more user-friendly content in, “Space in Design Systems”. Curtis and his team struggled over consistent spacing and felt limited with the HTML box model. His article brings up a good point: “Most collaborators can’t see space, a primary reason it’s so arbitrarily applied.” This is true in most cases, I believe. If you are working with a team of technical and nontechnical backgrounds, design definitions can differ. Curtis’s team created a model of S – XL which equals a certain pixel range to define specific elements within the UI coding.

Both articles stressed the importance of designing for consistency. When creating a methodical system of margins and padding, it shrinks the gap between designer and developer. From my own personal experience, I understand how there can be a disconnect between designers and developers on what looks good. A designer may be designing for user experience based on consumer research or other strategies, but a developer may be creating the backend magic that makes all of the features and elements in the code run efficiently and effectively. The developer is not concerned with the overall color and spacing structure. The designer may be wishing for something outside of the limitations of what the system can do. I think the key in both articles is to create agreed upon guidelines on how the finalized product should look and perform. How you get to the conclusions that your team agrees on is a whole other journey.

Professional Growth Activity – Course 3.1

Name: Jenn Clore
Activity: Refresh OKC “5 Ways to Snore-Proof Your Message
Description of Activity:  Local professionals in the web design and development industry gather each month to discuss tips and topics relating to the field. This month’s topic discusses how to make your message break through and cause people to listen.

Date(s) of Activity (also include times):

3/29/17 11:30a to 12:30p

Student Evaluation:

Why did you select this activity?

This topic was of interest to me because I’m always looking for tips on how to decrease my bounce rate, increase my social share content and increase my email open rates. I’m also always interested in tips on how to write good content that other people want to read.

Would you recommend this activity for other students? Why or why not?

I do recommend joining the Refresh OKC group because you get to learn from professionals already in the web design field. I also recommend this month’s topic because I believe content marketing is so important to a brand and their message. The five tips that Amber shared with us were simple, real world examples on how to get people to listen.

What did you like best about this activity?

The speaker, Amber Parrow, gave simple, actionable advice to a topic that has been interpreted in a thousand different ways

What did you like least about this activity? How would you make the activity better?

She did go through the slides a little fast. She was on tip #3 before I even realized what was going on. Perhaps a little slower would be helpful.

What is a creative idea/concept you can take away from this experience and possibly implement into your work?

The best tip that she gave was #5 – “Get out of the WE mindset”.  Ms. Parrow explained that a lot of content talks about what “we” can do for you. It’s so true. I know I mostly talk about what my company can do, or what we can provide or what services we offer, but rarely do I talk about what decisions the homeowner has to make or what the homeowner should consider from their perspective. She shared a quote from author Ann Handley, “Get into your customer’s shoes and into their journey.” This is a tip that I will start implementing to make my writing sound more personable and more conscious of the audience’s needs.

Photos courtesy of Refresh OKC

Guidelines for Great Product Designs

If beauty is in the eye of the beholder, then how can you, as a web designer, create a product that is perceived as beautiful to your target audience? In a recent lesson in my web design course, I read an article that discussed six product design principles. These principles help streamline the design process to create end-products that are more simple, efficient, and pleasing to the user.

After reading the article, I believe there are five key elements that can make me a better product creator of websites:

  • User-Friendliness – Elon Musk said, “Any product that needs a manual to work is broken”. There are always little sayings that basically all say the same thing, “Keep It Simple, Stupid” or “Less Is More”. If a website becomes too complicated to serve a simple function, whether that function is to elicit a phone call, or prompt a user to make a purchase, these bottom line functions should be so obvious and simple to understand the intention of the website.
  • Multi-PurposeThe Smashing magazine article spoke about the “lagniappe”, which is French for “an extra bonus or gift”. A good website gives the visitor a reason to keep returning. For example, a roofing company may showcase their products on the website, but an added bonus for a visitor could be a page for homeowner tips and “hacks” for home improvement, or a page of resources for other reputable contracting companies in the area.
  • Form and Color – Colors, typography, and fonts all create an experience that the designers intend the user to feel. I believe that the psychology of the design choices made on a website is very important in the success of a website. If the font comes off as too strong when the designer is trying to portray elegance, then the website would not have the desired effect. The same could be said about poorly chosen colors. Would a website for an ice cream shop work as well with bright primary colors as it would with soft pastel colors? It all depends on the image the designer is trying to project.
  • Approachable Innovation – Remember when QR codes were all the rage? It was trendy for a moment and then faded out fast. My issue with a QR code was that it required the user to have a QR reader app already downloaded on their phone in order to access the information behind the QR code. Wouldn’t it have been easier to just give the user a website address to begin with? A unique or innovative website sticks in a person’s mind longer than a cookie-cutter design, but it shouldn’t sacrifice a good user experience.
  • Simplicity – Saving the best for last, although this goes hand and hand with user-friendliness. A simplistic design immediately answers the question that the visitor had which lead them to the website in the first place. A good product does what it was intended to do without complicated bells and whistles. Features should enhance the product but not take away from it. The same thing applies to website design.

Capturing Productivity

Hello. My name is Jenn and I’m a productive procrastinator. In this article, the author defines productive procrastination as the act of creating a task list and moving down the list as you get bored with the previous task. A productive procrastinator will continuing moving up and down this list until all the tasks are completed. I had no idea that others have developed this same habit, but whatever your habit is, there are many tricks to living a productive life.

Within this article, I found three tips to be useful in my goal towards a happy, productive life. As discussed previously, creating lists is my tried-and-true way of being productive.   My second favorite tip from the article was isolating your senses. I’m the type of person who cannot think with white noise surrounding me. I’m at my most productive when I’m out of the house and at a quiet place. My favorite place to work on a project is All About Cha. When I’m there, I’m away from the daily household chores that creep in my mind and beg to be taken care of instead.

My third favorite tip from the article was to pick one tiny thing and do it. Life can get pretty overwhelming, especially for me as I work two jobs and take online classes. I often set daily or weekly mini goals to keep me on task. The best thing for me is to keep running lists. As an analog person, I often have multiple hand-written post-it notes or running lists at my desk, in my purse, or on my refrigerator.

Today’s lists and tasks

In a related article, (as in also assigned in my web design class) but not really related (as in a totally different topic), there could be new developments in identity theft by using your fingerprints. Not just the fingerprints you leave behind on a glass, but the fingerprints that are visible in a photograph. Imagine you’re posing for a picture with your favorite Spock hand gesture; guess what lives long and prospers for someone else – your fingerprint! According to Japan’s National Institute of Informatics (NII), the researchers were able to copy fingerprints based on photos taken by a digital camera three meters (nine feet) away from the subject. While I’m always amazed by technology advances, this is not one that will get a thumbs up from me. Especially not in front of a camera.


When Should You Bootstrap?

The framework Bootstrap seems to be a controversial subject with web designers and developers alike. According to, Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Doesn’t sound too controversial, does it? However, if you dig deeper into what Bootstrap is, you’ll find various articles from people in the industry who aren’t fans of the product.

“The main one being that all Bootstrap websites tend to look the same.” – CSS Guy

“Bootstrap was never meant to be used as a website development framework per se…The thing is that Bootstrap was built at Twitter, so that the developers could work faster by using a standardized interface to present their creations…A purpose that’s not entirely in line with the standard concept of web development.” – HTML Center

“One of the major issues I have with Twitter Bootstrap is that you end up with a whole lot of DOM elements crammed full of classes.” – Zing Designs

Despite the naysayers, Bootstrap IS one of the most powerful frameworks available and that didn’t happen without a majority of front-end developers having successful experiences. Bootstrap continues to be a mainstay in the market because of extensively developed features such as:

  • Easy start-up
  • Great grid system
  • Base styling for most HTML elements (Typography, Code, Tables, Forms, Buttons, Images, Icons)
  • Extensive list of components
  • Cross-browser compatibilities
  • Responsive design

While it’s true that Bootstrap, straight out of the box, will have cookie-cutter templates and a lot of unnecessary code, it’s important to understand that Bootstrap is completely customizable. You are not limited to un-editable themes or code-heavy features. You can pick and choose what features you want to utilize for your project and if you are willing to spend the extra time, you can design your website to look exactly how you want it.

For me, when it comes time to develop a mobile-ready website quickly for a client without having to incorporate it into an existing project, I would consider using Bootstrap. However, as my web design instructor said, “You will always need to learn how to deal with tons of code that you didn’t write. Your Bootstrap experience will teach you some things about that.”

If to Bootstrap or to not Bootstrap is still the question, check out this flowchart by ZingDesigns to help make your decision.



Ten Reasons Why I’ll Crash and Burn or Ten Reasons Why I’m A Rockstar


Five years ago I never gave web design any thought at all. Five years ago, everything changed. Five years ago I moved to Oklahoma. I started working for an online safety training company. I worked with animators, sound production, database engineers and subject matter experts. This is when my eyes were opened to digital marketing and all things technical. Five years ago, I’m not sure if I could tell you what an operating system was on my computer and how to find it. Fast forward five years and here I am, starting my journey into web design and it’s terrifying but also incredibly exciting. Let me tell you why.

Ten Reasons Why I Could Crash and Burn in this Course:

  1. I already work two jobs, where am I finding the time to focus on this?
  2. What if I’m fooling myself into believing I have an eye for design?
  3. The only “user experience” I can design for is my own
  4. I still don’t know what the cloud is, is that going to be important?
  5. My laptop could crash and burn
  6. I can’t grasp the concept of making Javascript work when I’m not really sure what it is anyway
  7. I have a preference for really long blog titles
  8.  I can’t even come up with ten items
  9. The course will move along faster than I can fully grasp
  10. That I can follow steps on how to do something but not really understand the reasons behind why I’m doing them or why it’s important

Ten Reasons Why I’ll Rock This Course:

  1. I’ve been thinking about doing this course for over a year and I’m finally doing it
  2. I already have some background in web design
  3. I already know what “user experience” is and the importance of it in web design
  4. Does anyone really know what the cloud is anyway?
  5. It’s a work laptop, so the company will pay to fix it
  6. There are excellent resources in this program to turn to with questions
  7. Long-tail urls are really the rage right now
  8. My specialty is building content
  9. This is the course that will help me recognize my potential and be an excellent resume builder
  10. I’ll rock this course because I know that I can

So here I am, one month into the program. Only 17 more months to go. Rockstar status, here I come.