4
\$\begingroup\$

Could I get some feedback on my simple start to an admin template: http://jsfiddle.net/spadez/GHKxW/3/

HTML

  <div class="wrapper">
    <div class="left">
      <a href="#"><img src="nav_sprite.jpg" class="logo" /></a>

      <ul class="navigation">
        <li id="dashboard"><a href="index.html" class="active">Dashboard</a></li>


      </ul>
    </div>

    <div class="right">
      <h1>Title</h1>
    <p>Content</p>
    </div>
  </div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    border: 0;
}

li {
    list-style: none;
}
a {
    text-decoration: none
}

html, body {height: 100%; max-height: 100%; padding:0; margin:0;}
.wrapper {display:table; width:100%; height:100%;}
.wrapper > div {display:table-cell; vertical-align: top;}
.wrapper .left {width:200px; background-color:#34495E}

#btn_pri {
    background-color: 60A0DF;
    color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}

.navigation {
}
.navigation li {
}
.navigation li span {
    display: inline-block;
    background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center;
    width: 16px;
    height: 16px;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
}
.navigation li a {
    display: block;
    color: white;
    padding-top: 15px;
    padding-bottom: 15px;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
}
.navigation li a:hover {
    background-color: #495C6D;
}
.navigation li a.active {
    background-color: #495C6D
}
#rss span {
    background-position: -52px -68px;
}
#photos span {
    background-position: -90px -66px;
}
#links span {
    background-position: -45px 0;
}


h1 {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 30px; font-weight: 500;}

.logo {height: 50px; margin-bottom: 30px;}


.btn {
    letter-spacing: 1px;
    font-weight:bold;
    padding-left: 10px;
    padding-right: 10px;
    height: 34px;
    border-radius:3px;
    border: 0px;
    text-transform:uppercase;
    font-size:12px;
}

#btn_pri {
    background-color: #60A0DF;
    color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}
\$\endgroup\$
  • \$\begingroup\$ Answers seem pretty on point for what little you have here, but I'd also add that you should remember to use alt="logo" to add some more semantic value to your content images. But I know this is still an early build. \$\endgroup\$ – darcher Apr 19 '14 at 8:05
  • \$\begingroup\$ You can also add aria attributes, e.g. <h1 role="heading">, <ul role="list">, <li role="listitem">, <nav role="navigation" class="navigation">, <div class="right" role="main"> etc. w3.org/TR/wai-aria/roles \$\endgroup\$ – darcher Apr 19 '14 at 8:12
2
\$\begingroup\$

This looks pretty good for a start.

the only thing that I see right away is your CSS formatting

a {
    text-decoration: none
}

html, body {height: 100%; max-height: 100%; padding:0; margin:0;}
.wrapper {display:table; width:100%; height:100%;}
.wrapper > div {display:table-cell; vertical-align: top;}
.wrapper .left {width:200px; background-color:#34495E}

#btn_pri {
    background-color: 60A0DF;
    color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}

Here you switch between what I would call Minified CSS and Egyptian Brackets and the last rule here is a mix.

you should always stay consistent with your Formatting, especially in CSS because it can get confusing when you start adding more rules

so if you did this in all Egyptian Formatting.

a {
    text-decoration: none
}

html, body {
    height: 100%; 
    max-height: 100%; 
    padding:0; 
    margin:0;
}

.wrapper {
    display:table; 
    width:100%; 
    height:100%;
}

.wrapper > div {
    display:table-cell; 
    vertical-align: top;
}

.wrapper .left {
    width:200px; 
    background-color:#34495E
}

#btn_pri {
    background-color: 60A0DF;
    color: white;
}

#btn_sec { 
    background-color: #e74c3c;
    color:white;
}

This is how I would do it personally, it is clear what rule is what, and it looks neat and tidy as well.

but how ever you decide to do it, please be consistent.


As far as these Empty Rules.

.navigation {
}
.navigation li {
}

I assume that you are going to use them in the future for something, if not, get rid of them, they will clutter up your code.

\$\endgroup\$
1
\$\begingroup\$

While I agree with Malachi about the formatting for your CSS, my one caveat in development is rules that I consider "done" that are still expanded out take up lots of room. In a large CSS sheet this is maddening.

As I am working on the site, and I alone am the only developer then I will condense rules that I consider "done". If it is hard to understand what they are then I put in a simple comment temporarily. I feel that for myself this is more readable, especially in a css sheet that contains a few thousand lines.

To that end, I would suggest developing a comprehensive comment system that is easy for you to navigate, especially if you expect your css sheet to become large. Create an index and headings with comments that you can easily find through a scroll or with control-f. For example...

/* ----------------------- */
/* 1.0 Header Styles       */
/* 2.0 Navigation Styles   */
/* 3.0 Content Styles      */
/* 3.1 -- Specific Content */
/* ----------------------- */

/* 1.0 Header Styles
************************************/

The above of course is just my preference. It helps to keep me organized.

All in all, my point, is develop however YOU feel is quickest for yourself, assumign you are the only one working on the project. When you are done with development, your CSS should be minified and comments removed, so what it looks like in development doesn't really matter if you're the only one working on it.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.