Three Design Principles Your CSS Needs


Profile picture of Fernando Del Valle Hacker Noon

Fernando Del Valle

Web Engineer

Coming from a design background, as I head into the tech world, I constantly hear from friends, classmates, and even successful web developers claim that they “just don’t have it. ‘eye for design’. Let’s try to do something about it.

The purpose of this article is to give a helping hand to any web developer who needs to both design and code a project. This is by no means an “everything you need to know” kind of thing, and I really encourage everyone to read The Non-Designer’s Design Book by Robin Williams, which is a great resource to learn more than some basics.

The way we will approach each principle is quite simple, the topic will be explained and an example will be shown, and a nice snippet will be provided so that it is clear how to apply it. For the sake of simplicity, we’ll use vanilla CSS.

Without further ado, let’s dive in.

Spacing

Just like organisms, elements on a web page need space to exist, whatever box model you choose to use, you can use the margin property to make sure everything has enough space. and is pleasantly spaced.

A good rule of thumb is to keep a clear relationship between vertical and horizontal spacing, as one vertical unit will always be three horizontal units. Although my go-to choice is more often than not to just double down on one.

In this first example we see nine blue squares spaced at random, it looks out of order and out of place.

picture

This is the HTML code that creates the first example:

  
  <h2 class="title">Example Oneh2>
  <h3 class="subtitle">Assigns spacing to each element individually.h3>
  <div class="example-one">
    <div class="example-one-element element-1">div>
    <div class="example-one-element element-2">div>
    <div class="example-one-element element-3">div>
    <div class="example-one-element element-4">div>
    <div class="example-one-element element-5">div>
    <div class="example-one-element element-6">div>
    <div class="example-one-element element-7">div>
    <div class="example-one-element element-8">div>
    <div class="example-one-element element-9">div>
  div>

Here is the CSS that stylizes it:

/* Example One */
.example-one {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 100px;
}

.example-one-element {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.element-1 {
  margin: 10px 45px;
}

.element-2 {
  margin: 30px 5px;
}

.element-3 {
  margin: 5px 45px;
}

.element-4 {
  margin: 17px 10px;
}

.element-5 {
  margin: 15px 15px;
}

.element-6 {
  margin: 5px 5px;
}

.element-7 {
  margin: 35px 35px;
}

.element-8 {
  margin: 15px 45px;
}

.element-9 {
  margin: 15px 35px;
}

Not only is it repetitive and ugly code, it looks terrible.

Let’s see some ways to fix this problem.

The second example shows 12 red squares, spaced using the

grid-gap 

goods.

picture

This is the HTML code that creates the second example:

-- Example Two -->
  

class="title">Example Two

class="subtitle">Assigns the same vertical and horizontal spacing.

<div class="example-two"> <div class="example-two-element">div> <div class="example-two-element">div> <div class="example-two-element">div> <div class="example-two-element">div> <div class="example-two-element">div> <div class="example-two-element">div> <div class="example-two-element">div> <div class="example-two-element">div> <div class="example-two-element">div> <div class="example-two-element">div> <div class="example-two-element">div> <div class="example-two-element">div> div>

Here is the CSS that stylizes it:

/* Example Two */
.example-two {
  margin: 0 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 50px;
}

.example-two-element {
  width: 200px;
  height: 200px;
  background-color: red;
}

As we can see, the CSS is much shorter.

The third example shows ten green squares that have been spaced so that the vertical space is larger than the horizontal, but keeping the proportion clear and constant it looks nice. In this case, we use

margin

for spacing.

picture

This is the HTML code that creates the third example:

  
  <h2 class="title">Example Threeh2>
  <h3 class="subtitle">Assigns more vertical than horizontal.h3>
  <div class="example-three">
    <div class="example-three-element">div>
    <div class="example-three-element">div>
    <div class="example-three-element">div>
    <div class="example-three-element">div>
    <div class="example-three-element">div>
    <div class="example-three-element">div>
    <div class="example-three-element">div>
    <div class="example-three-element">div>
    <div class="example-three-element">div>
    <div class="example-three-element">div>
  div>

Here is the CSS that stylizes it:

/* Example Three */
.example-three {
  margin: 0 50px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.example-three-element {
  width: 200px;
  height: 200px;
  background-color: green;
  margin:  0 40px 160px 0;
}

The fourth example is similar to the third but we have more horizontal space than vertical. We used the

grid-row-gap

and

grid-column-gap 

spacing properties.

picture

This is the HTML code that creates the fourth example:

    
    <h2 class="title">Example Fourh2>
    <h3 class="subtitle">Assigns more horizontal than vertical space.h3>
    <div class="example-four">
      <div class="example-four-element">div>
      <div class="example-four-element">div>
      <div class="example-four-element">div>
      <div class="example-four-element">div>
      <div class="example-four-element">div>
      <div class="example-four-element">div>
      <div class="example-four-element">div>
      <div class="example-four-element">div>
      <div class="example-four-element">div>
      <div class="example-four-element">div>
    div>

Here is the CSS that stylizes it:

/* Example Four */
.example-four {
  margin: 0 50px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 60px;
  grid-row-gap: 30px;
}

.example-four-element {
  width: 200px;
  height: 200px;
  background-color: purple;
  
}

Contrast

It’s pretty simple, no dark elements above other dark elements, no light elements above light elements. Think of a zebra, a zebra has very good contrast, and if it was a web page it would have good visual accessibility. I understand this can be tricky, so if in doubt increase the contrast. Remember that the content should be easy to recognize.

For the following examples, we’ll ignore the HTML and CSS snippets as this is a fairly straightforward concept.

Example 5
Shows little contrast between a bright element and a light background.

picture

Example 6
Displays little contrast between a dark element and a dark background.

picture

Example 7
Displays a great contrast between a light element and a dark background.

picture

Example 8
Displays a great contrast between a dark element and a dark background.

picture

Uniformity

I can’t stress this enough, we have to keep it regular and, if possible, simple.

The basic concept here is that if we are using a typeface for a piece of text, let’s say a

element, we use the same font for all, or at least most

elements. In principle, we don’t use more than three different fonts, unless we really have a good reason for it.

Another great example of this is alignment, he loves engagement, so once we choose we’re here for good.

Same with colors, we must always resist the urge to have a thousand colors around, as fun as it is to make beautiful palettes, simple is the word we must remember, each color must serve a purpose. One color for text, one color for headings, one color for contrast and, yes, one color can serve many purposes.

Finally, the shape of the elements is important, the border radius must be the same or, as a spacing, proportional. Ditto with the shadows.

Our ninth example shows how horrible things are when each element follows its own rules and there is no uniformity.

picture

This is the HTML code that creates the ninth example:

    
    <h2 class="title">Example Nineh2>
    <h3 class="subtitle">Shows how irregular elements look bad.h3>
    <div class="example-nine">
      <div class="example-nine-container-1">
        <p class="example-nine-container-1-text">This says something neutralp>
      div>
      <div class="example-nine-container-2">
        <p class="example-nine-container-2-text">This says something betterp>
      div>
      <div class="example-nine-container-3">
        <p class="example-nine-container-3-text">This says something worsep>
      div>
    div>

Here is the CSS that stylizes it:

/* Example Nine */
.example-nine {
  width: 100%;
  height: 300px;
  background-color: rgb(205, 232, 248);
  display: flex;
  flex-direction: row;
}

.example-nine-container-1 {
  background-color: lightblue;
  width: 150px;
  height: 75px;
  text-align: right;
  padding: 15px;
}

.example-nine-container-2 {
  background-color: lightgreen;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 50px 0 20px 150px;
  border-radius: 10%;
  border: 3px solid green;
  box-shadow: 0px 0px 7px 7px rgba(10, 107, 2, 0.3);
}

.example-nine-container-3 {
  background-color: lightpink;
  width: 800px;
  height: 200px;
  text-align: center;
  border-radius: 2px;
  margin-top: 50px;
  margin-left: 70px;;
}

.example-nine-container-1-text {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 15px;
  color: blue
}

.example-nine-container-2-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: green;
}

.example-nine-container-3-text {
  font-family: 'Times New Roman', Times, serif;
  font-size: 60px;
  color: purple
}

We know this is an exaggerated example, but it looks bad, right?

Our tenth and final example shows how we could correct the ninth example, ensuring that uniformity is achieved.

picture

This is the HTML code that creates the tenth example:


    <h2 class="title">Example Tenh2>
    <h3 class="subtitle">Shows how much better the previous example looks when uniformity is applied.h3>
    <div class="example-ten">
      <div class="example-ten-container">
        <p class="example-ten-container-text">This says something amazing!p>
      div>
      <div class="example-ten-container">
        <p class="example-ten-container-text">This says something amazing!p>
      div>
      <div class="example-ten-container">
        <p class="example-ten-container-text">This says something amazing!p>
      div>
      <div class="example-ten-container">
        <p class="example-ten-container-text">This says something amazing!p>
      div>
    div>

Here is the CSS that stylizes it:

/* Example Ten */
.example-ten {
  width: 100%;
  height: 300px;
  background-color: rgb(169, 252, 206);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.example-ten-container {
  background-color: lightgreen;
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 10%;
  border: 3px solid green;
  box-shadow: 0px 0px 7px 7px rgba(10, 107, 2, 0.3);
}

.example-ten-container-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: green;
}

The reminder

At this point it’s worth mentioning that having a document with the exact colors, fonts to use (how, when, and where) is always a good idea, many companies have them (shame if they don’t) and this is commonly referred to as a branded book.

In my work I combine branded books with Sass in order to use variables for colors, font sizes, but that’s a topic for another day.

Hope this article is helpful for you and you can find all the code for all the examples in this Github repository.

Good coding!

Key words



Source link

Previous New design principles require infrastructure to 'celebrate nation's ambition'
Next Do not forget the principles of safety from the design in times of difficulty