Tag: css

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/ 

 

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.