Coding with Kaylie: CSS Craziness

Posted by Kaylie on | 0 Comments

Tags: , ,

I decided it was time to tackle another front-end project. I planned it out, thought it through, and jumped right in! Only one problem: It, ummmm, wasn't doing what I wanted it to. What did I want it to do, exactly? You know, just a simple responsive two-column layout that has containers with a rounded border and 60% white background with text, 40% background with a vibrant color and an image.

The fact that the above turned into a run-on sentence should have clued me into the fact that it seems easy enough in my head but that, on paper (or in Coda!) it was going to get pretty complicated.

After three hours and a almost-there-but-not-quite-and-I-can't-put-my-finger-on-it bit of frustration, I called for a Jared-vention. Which is, naturally, where I get huffy and tell Jared that I'm "Done with this for now" and that if he "wants to work on it, he can." Ah, he never turns down a challenge! And, to no one's surprise, he was able to figure it out. That said, it took him a bit of working through it, as well, so my bad for picking a project that was a bit above my skill level.

Valuable Lessons Learned From This Project

  • Percentages are great for responsive design but you sometimes need to use hard and fast pixel restrictions. The text I had in the container kept popping out of its element when the screen got really small. The answer? Set a min-height for the element and hide any overflow. This might not be perfect if I had a ton of text and wanted to make sure the user sees it all but, in my case, it is just a sentence or two to describe the┬ácategory. Setting a min-height of 200px ensures that all of the text will be contained properly.
    
    .Categories li {
    	float: left;
    	width: 45%;
    	min-width: 225px;
    	min-height: 200px;
    	margin: 10px;
    	border: 1px solid gray;
    	border-radius: 10px;
    	overflow: hidden;
    	position: relative;
    }
    
    
  • You don't always need to float elements. It is oh.so.tempting but refrain if you can. In my case, I had CSS that both floated the content within my containing element and set it to display as a block with a width of 55%. Guess what? I only needed one of those. Let's stick with the one that doesn't require clearing later so as to not mess up positioning of other elements.
    
    .categoryContent {
    	margin: 0;
    	padding: 0 0 5% 5%;
    	/*float: left;*/
    	width: 55%;
    	display: block;
    	max-width: 55%;
        overflow: auto;
        height: 100%;
        min-height: 200px;
        background: #fff;
    }
    
    
  • I used an unordered list to layout my categories. If you're going to do this, and each li is going to be styled differently (in my case, each one has a different color and image on the right side), use classes on the individual li elements instead of a div within the li element. It just makes more sense semantically.
  • If you're doing a project like this, you're going to have a lot of CSS. Comment it well and try to know what each selector and value you assign it does. If you're not sure and you're changing things just to see if it has the effect you want, that's totally fine. When you do find a combination that you think does what you want, leave it and make a comment about what you did and why. If you run into issues later, you'll be able to easily find the areas that you weren't so sure about. Chances are, that's where your problem lies.
  • It's really awesome to have a Jared around to help with projects and explain where things went horribly awry. I strongly recommend investing in one. If you can't, just take a deep breath and come back to it later with a clear head...and possibly a clean slate.

Now, without further ado, I present the start of the two-column knowledge base category page! And some screenshots, since I am planning on continuing this project to make it a full-blown site, which means it will be changing. :-)

two column mobile

Two-Column Mobile View


two column desktop

Two-Column Desktop View


Post your comment

Comments

No one has commented on this page yet.

RSS feed for comments on this page | RSS feed for all comments