Studio, Responsive One Page Website




Intro

Studio is a responsive one page website. It was made using HTML, SASS, and Bootstrap. The original design comes from xdguru.com. The idea was to create a responsive single page website for a pretend design agency. The conversion process from design to code was pretty straight forward, except for two main problems that I had ran into. Those two main problems and how I overcame them are what I will be discussing in this article.

Problem #1 Gradient Border Buttons

The first problem that I ran into was getting the border of the button to be a gradient color. Most buttons are straightforward since you can simply change border color in your css. However, this only works if the color is solid.

Solution

After some googling, I found that the best solution would be to give the anchor tag a span tag. Then I could make the span slightly bigger than the buton itself. This would not only give the button a border, but it would also allow me to add the gradient color that I needed. The button turned out to be exactly like it was in the design.

Problem #2 Proper Class Names for Components

Looking over the design I could see that many of the simple components like, buttons, cards, and the images in the portfolio grid would be used again throughout the whole design. I immediately knew that SASS would be the right now for this because it allowed me to keep my css in different files. This made everything more organized. I wanted to keep the class names easy to read in case someone in the future wanted to use the same design. This would present a challenge since there are so many different components.

Solution

The solution was to use BEM naming convention for the classes. Although using BEM can make your class names longer, it keeps the code cleaner and easier to read for any other developer. It also makes it easier when writing SCSS because you can nest the relating class name using &. Below is an example of what I write for a green button. It is a good example of how the BEM naming convention can work effectively with SCSS to keep your code organized and dry.

          .btn {
            border: none;
            border-radius: 60px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 1rem;
            &:hover {
              @include button-hover
            }
          }

          .btn--green {
            background-color: $green;
            color: $white;
            padding: 0.9375rem 2.6875rem;

            &:hover {
              text-decoration: none;
              cursor: pointer;
              color: $white;
              transform: translateY(-3px);
              box-shadow: 0 5px 10px rgba($black,.2);
            }
          }
        

Takeaways

The project turned out better than I had expected. I was able to make the end project look exactly like the design. This gave me a huge confidence booster in knowing that I can find solutions to problems that I have never encountered before.