[1/12] Become a Full Stack .NET Developer: Creating Beautiful and Precise Designs with CSS

View fullsize

The dotted line is our main container. Within the div.date we have two children (div.month and div.day).

With this module we delved deeper into understanding the finer points of CSS, in particular the positioning of elements and manipulating attributes as we refine the look of our Gighub app.

We examined the div structure of an element containing a gig listing (see first image posted for more details). In the Index.CSHTML file, we modified the view template so that our gig listings would have more aesthetic look with a curved and highlighted box to contain the date. At this time, we learnt about a shortcut in the Web Essentials plugin we were using called zencoding, which is a quickly way to write HTML/CSS in Visual Studio.

Because the outer box has relative positioning, it allows us to absolutely position the inner box at 10 pixels to the top and 100 pixels to the left inside it.

After this, we went into some theory discussing the differences between relative and absolute positioning in CSS. An element with relative position allows us to absolutely position its children.

Back in the Index.CSHTML file, we gave the <UL> element of our gig list and class name called"gigs", so we could identity it in CSS. We went into the Site.CSS file which already contained default boilerplate CSS styles. We added a new section to this at the bottom called "Page-Level Styles".

/* Page-Level Styles */
.gigs {
  list-style: none;
}

.gigs > li {
  position: relative;
  margin-bottom: 30px;
}

.gigs > li .details {
  position: absolute;
  top: 10px;
  left: 70px;
}

This code removed the bulletpoint in our gigs list while placing the outer box as a relatively positioned element allowing for the inner box to be positioned absolutely.

After that bit of CSS code, we would now add a little bit more to polish our date icon a little bit more.

.gigs > li .date {
  background: red;
  color: white;
  text-align: center;
  width: 60px;
  -ms-border-radius: 8px;
  border-radiusL 8px;
}

.ggis > li .date .month {
  text-transform:uppercase;
  font-size: 14px;
  font-weight: bold;
  padding: 2px 6px;
}

.gigs > li .date .day {
  background: #f7f7f7;
  color: #333;
  font-size: 20px;
  padding: 6px 12px;
}

View fullsize

Our Gigs list affter our CSS tweaking so far.

As you can see after this little bit of CSS coding our Ggis list had morphed from being a plain single bullet pointed text line to somethign a little more presentable. However there was still a final bit of polishing we could apply to it before the end of this module.

.gigs > li .details .artist {
  font-weight: bold;
  display: block;
}

.gigs > li .details .genre {
  font-size: 15px;
}

body {
  padding-top: 90px;
}

View fullsize

Our Gigs list now at the end of this module.

These final CSS tweaks added a bit of padding to the first date at the top of the list so it was not smushed up against the app header, it moved the Genre tag onto a new line while also making it slightly smaller than the artist name (so as not to compete for as much visual attention from the user). 

Happy with the new look of our Gigs list, we proceeded to commit our code to the repsoitory as we finsihed this module.