Category: CSS

Blog posts specific to learning about CSS.

I Have No Idea What I’m Doing – An Introduction To CSS Grid

Jenn Clore

In my most recent class assignment, I was introduced to CSS grid. I read articles by Jen Simmons on the topic and watched instructional videos by Rachel Andrew. As I read along and watched the examples in action, it seemed easy and straight-forward. It couldn’t get any easier than actually writing out exactly how you wanted divs to be laid out.

As I watched the tutorial videos assigned and followed along, I thought to myself, “ok, finally something I can do.” But as with all of my projects so far, it’s never as easy as it seems. I often tell myself that I have no idea what I’m doing. This project was no different.

I was tasked with redesigning the index page of my Discography project and do the same thing but using CSS grid. In the original assignment, I used Bootstrap.

It was easier to layout most of my page in CSS grid. It turned out I was already using the Holy Grail layout, and I didn’t even know it. Way to be original. So that helped a lot with positioning and naming my elements.

I struggled with getting my header nav links to align to the left and be responsive. I was able to accomplish that using a bit of flexbox. Part of the assignment was to add a feature query. I tried out the initial-letter rule to add a bit of flare to the band description in the center of the page.

Caniuse says initial-letter is a no-go on Chrome, but with the @support rule, it should be seen in Safari browser and be skipped over in other browsers that don’t support the feature.

I can say that by the end of the project, I had a better grasp on CSS grid and its capabilities. CSS grid and flexbox seem easier to use than Bootstrap, in my opinion.

Check out my design using Bootstrap – http://www.clorecreative.com/PanicDisco/index.html

Check out my design using CSS grid – http://www.clorecreative.com/cssgridpatd/index.html

Overall, can say I spent more time on the site using Bootstrap so it has a more polished look. But the CSS grid site took less time to put together. If I had to choose one or the other going forward, I think I would lean toward CSS grid and flexbox.

 

 

Designing Outside of a Framework – The Magic of CSS Grid

Jenn Clore

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.

 

 

Cultivating The CSS Community With CSS Zen Garden

Jenn Clore

Chugging along in my web design program, I have come up to the CSS Zen Garden project and came to a full stop. This website has been around for a long time, giving advanced and novice web designers a way to showcase their skills and the capabilities of CSS. My task is to go forth and do the same as designers in the past.

This project requires me to change the look of the CSS Zen Garden website by using CSS only WITHOUT TOUCHING THE HTML! Can this be done? Sure, the website has a library of successful attempts. But can I do it? That is the big question.

Throughout the course, we’re taught to learn from what others have done, to check out their code and find out their secrets. This website makes it simple by including every contributor’s html and CSS files.

To pick which designs to help inspire me, I searched through 218 designs.

CSS Zen Garden Library

Out of those, two designs stood out the most to me.

In the “Apothecary” design, it sets itself apart from all the rest with a turn-of the century, old school feel to it that none of the other designs have. The images, colors, and font choices give a cohesive look that is easy to read, unique, and simple. The CSS code looks simple enough, almost like something that I could potentially pull off.

In the “A Robot Named Jimmy” design, animation, bright colors and a simple to read font were used to bring an eye-catching whimsical feel to the design. Aside from the Apothecary design, this design used the full SVG code to add the graphic details. Some CSS transitions were also utilized in the design.

After delving a little more into the code of other authors in the library, I think I may be ready to start laying out my own interpretation of CSS Zen Garden. First I created a moodboard. I started one not really having any idea on what I was going to create. After researching “soothing colors”, it all stemmed from there. You can check out my moodboard by clicking here.

Mobile Wireframe

Then I moved on to my wireframe. I was taught that the mock-up should be in grayscale to not distract the client from the layout. Since the client is me, I went ahead with full colors.  I designed it in Canva. It’s a free tool for people who aren’t graphic designer to build something beautiful. I use it quite often in my job. I originally started out trying to create my mock-up in Illustrator, but I’m just not that comfortable with it yet. As you can see in my wireframe on the left, I’ve got some pretty grand visions on how I want my version of the CSS Zen Garden to look like. I didn’t feel that I needed any images but I wanted to stick with gradients, geometric shapes and the clean color scheme. I will incorporate the circle image below that I pulled from Canva. I hope to use it in the background.

Now I am in the process of creating my version of CSS Zen Garden. It is still a work in progress, but you can see the most recent updates by going to –

http://www.clorecreative.com/ZenGarden/ 

 

Going off the CSS Grid and Thinking Outside the Box

Jenn Clore

 

In the past, HTML grids were the only way to web design. Then came the advent of CSS to allow redesigning websites with ease by separating the styling from the main code. Over time, layout code became complicate so frameworks evolved and eventually websites started looking the same. Gone was the creativity and the web became filled with cookie-cutter designs.

In an article by Jen Simmons, titled “The benefits of learning how to code layouts with CSS”, the author believes that we need to go back to hand-coding layouts for each project. She says, “I’m tired of every website looking the same. I believe in the power of graphic design to elevate a project. To make it stand out. To give it a unique voice, to help its readers / users / viewers understand what is happening. I don’t want to paint-by-numbers, I want to paint.”

Her statement also reminded me of a tweet from a web designer I follow:

I think Jen Simmons and @xobritdear are so right. I’m lucky in my web design program to start out learning to hand code without being dependent on frameworks. According to the article, the challenge is to learn all the tools to help a web designer create a product that effectively tells a story. It might mean using a grid, a flex box, and a float but combined together can produce a unique picture.

The author forecasts that in 2018, there may be an increase in the demand for designers to know how to hand code. Luckily for us, Google already has all the answers to teaching us the code we need. There are so many great resources online to help us along our way to hand-coded greatness.

My favorite part of the article is when the author said, “We stopped taking risks at some point. Everything online seems so polished and perfect. The frameworks do make a new project look snazzy right away. All that polish, all those rounded-corner images. But we’ve got to break away from that, if we want to make great work, great designs. If we can dare to make mistakes, and learn to play and experiment again, we can push this industry to a whole new level, and truly start to understand the web as a graphic design medium.”

I like the idea of seeing the web as a graphic design medium, instead of just code, syntax, and rules. I love the advances that are happening in web design that continues to push us to the next level and to make us strive for a look that is unique to our story and our product.

Clean CSS in 7 Simple Steps

Jenn Clore

I recently watched a Lynda.com video tutorial on CSS Visual Optimization. This lesson went over the basics on how to create a more efficient, clean, and optimized CSS stylesheet. From this information, I compiled a list on what I believe are the seven most important tips to create clean code.

  1. Color Guide – Recently, I worked on a typography project that I wanted to make use of 4 or 5 main colors to use without the site. I had to either scroll up and down my code to refer to the color I used previously. Then I thought I was really efficient when I wrote it all down on a piece of notebook paper instead. A color guide is a great idea to create a key at the top of your code with all of your colors in one spot.

  1. CSS Reset – I’m about 4 month into my web design program and I just learned about the CSS reset. I wish I learned about this so much sooner. By default, browsers have their own style already embedded into a website. A CSS Reset clears all the margins, padding and other bothersome code and gives the coder a clean slate to start with. This tip is also explained a little further in an article by Silo Creative. There are a few reset options to choose from, but whichever method you choose, it will ultimately help with better design because you won’t have to create extra lines of code to erase the default styling throughout your markup.

  1. Table of Contents – This tip is particularly helpful if you plan on selling your code as a theme or if other people will need to look at your code and help edit it. An article by Cats Who Code, explains that, “As CSS files are becoming bigger and bigger, the easiest way to quickly find what you’re looking for is to create a table of contents and organize your ids and classes.” This tip will make designers work more efficiently, especially in the testing phase.

  1. CSS declarations – In the Lynda.com video, I learned that having too much white space in your code creates longer load times. Shorthand techniques and minimal white space makes code look cleaner and you can find what you are looking for fast. If you have one rule for a class, it’s ok to put it all on one line. If your class has multiple rules, you can put it on one line as well and separate each by a comma. For clarity sake though, move the selectors with multiple rules to multiple lines. Creating faster websites make for better web designers.

  1. CSS Shorthand – Embracing CSS shorthand saves the web-designer a lot of time in the developing stage. Instead of taking up white space by multiple lines of text, it is more efficient to condense your code into one line if possible. For example, instead of writing out #FFFFFF for white, you can condense it to #FFF. Instead of writing out a separate line of code for padding on all sides of an element, try putting it all on one line.

  1. Typography guide – A good website usually tries to keep within two fonts, maybe three. Along the same lines as a color guide, it’s also good practice to have a typography guide so you can have a quick reference to where you should use which font. This makes you a better designer because you save time in your development and create a guideline for consistency on where how you use the fonts chosen for your design.

  1. Creating a structure template – Creating a structure template for the things you do repeatedly each time you create a new web design efficiently cuts so much time in the design process. If you use the same reset method every time or use the same typography every time, or you’re a fan of responsive two column designs, it would be helpful to have a template saved with this code already created. This saves you multiple lines of code that you don’t have to type out every time.

I found these tips helpful in my recent typography project. I used the color guide and typography guide at the beginning of my CSS to help keep me consistent in my design. I also started cleaning up all of the white space I created by moving applicable rules to one line.