Full Stack Developer – Part 5 – Cascading Style Sheets (CSS) Added

Today, we are going to make what we have done so far look ‘pretty’ 🙂 More specifically, the User Interface (UI). For this web application, I am going to pick some colors that look good together and using Cascading Style Sheets (CSS), add them to the HyperText Markup Language (HTML) controls as well as arrange them in a pleasing fashion.

Yet again, I ended up breaking this into multiple Git Commits:

One of the simpliest things to do use to use HTML tables. However, using <div>’s and <span>’s arranged with CSS positioning is more of what I see today. So, we will be using the later. So, let’s take stock of what we have in our application and what we want it to look like.

We need a .css file, so let’s add that. I am going to call it desktopsite.css and will leave it empty for now. This is the only .css file I think this site will use. However, I name it with a meaningful name so that in case I want to add others (perhaps a mobile version), I can and it is very easy to quickly know which file is for which version of the site.

1

We have two pages – a summary location list and a details page. I think we need a title to combine them. Let’s call it ‘The Awesome Location Manager’ (TALM). This will go on both pages, so we need to create a header. In most sites I have worked on and/or created in the past, a footer is a requirement. For this site, I am not going to add it though. If I had, it would be very, very similar to the title we just created.  We add the title as a partial view that resides in the ‘Shared’ folder.

Title View

2.3

Title View Rendered

2.1

2.2

Now, let’s add some <div>’s to our two pages and title partial view. We will use these for positioning and other stylistic options. Something to remember is to think from a composition perspective. More specifically, you are ‘composing’ a picture (i.e. page). What do you want it to look like? Once you have an idea in your head, break out these visual sections of the page (i.e. HTML elements) into components that can be easily manipulated.

Location Summary

For the location summary, we need a sub-title, a list of locations and buttons to handle the functionality.  Again, all existing elements from the previous posts, but now they are in the layout we plan to use.  If you notice, I have already applied the styles.  I had planned to show this in a more step by step fashion, but in playing with the colors and positioning, I went through several versions.  Showing all that is a lot for one blog post 🙂

1

Location Details

For the location details, we again need a sub-title, function buttons and two list areas – one for the read-only view and one for the create/update functionality.

2

I think we are ready for some some color. I got the color scheme from one of the samples in reference #4.  In my experience, simple is best.

  • background – white
  • foreground/accent  – #695DBD

Digging into desktopsite.css, I like to start out generic and get more specific as needed.  So, I define the background and banner (i.e. shared Title partial view) and work my way down.

3

Couple of interesting things to point out:

  • In the past, I have either used a . for a class or # to refer to a specific named HTML control.  You can also refer to types of HTML controls and the styling will be applied to any matching control.  This is how I set up the location summary list (i.e. <ul>).

5

6

  • You can chain css styles together on one control.  This is really useful in you want to share one css style among st many controls.

4

I then import the style sheet and voila, we have color!

7.3

7,4

7.5

The last post in this series will be to add some JavaScript.

Stay tuned!

References

  1. https://stackoverflow.com/questions/5248183/html-partial-vs-html-renderpartial-html-action-vs-html-renderaction
  2. https://www.sessions.edu/color-calculator/
  3. https://stackoverflow.com/questions/5110028/add-css-or-javascript-files-to-layout-head-from-views-or-partial-views
  4. http://blog.visme.co/website-color-schemes/
  5. https://www.awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face.html
  6. https://www.w3schools.com/howto/howto_css_two_columns.asp
  7. https://stackoverflow.com/questions/1444495/how-do-i-apply-a-css-class-to-html-actionlink-in-asp-net-mvc
  8. https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s