Fresh eyes on stylesheets!

Rundown

Over the last two weeks I've been working on a project for my Software Engineering class I am taking through FlatIron School. The task was to build a single page web application from scratch using everything we had learned pior, plus researching new things we didn't have much understanding on through google. One of the biggest things I was most curious about was styling a page with CSS. Then my instructor told our class about stylesheets and I was instantly intrigued!

CSS Made Simple!

My instructor gave us three websites to look into if we were curious about diving into styling our web app but didn't want to take the time to learn everything there is about basic CSS. The three that she mentioned where

• Semantic UI
• Bootstrap
• Materialize

After looking at each of their sites I decided to go with Materialize because I liked more of their modern designs that they offered.

How I Used Materialize!

The biggest thing that I was curious about was how to get certain items in your html to be displayed on certain parts of the page! Materialize (and other stylesheets) use certain class names to style the page based on the tag given. For displaying content in a grid, Materialize uses a container class on a section tag and a row class on a div tag. Then, to separate the container, you want you use a col class on a child div tag and state how many spaces you want the row to be. There are 3 different size options you can use depending on how big the screen size is.

• s for small screens
• m for medium screens
• l for large screens

All 3 of the sizes can be used in a single tag so your web page can be adaptable depending on the users screen size. After you choose which or how many you want to include, you put a number after the s, m, or l to state how much space in that row of the container you want it to take up. There are a total of 12 spaces that take up an entire screen when using this method, so in the example below, my section for the tabs take up the entire top part of the screen. Then each of the tabs splits those 12 spaces equally by each of them being 6 spaces long.

<section class="container section">
            <div class="row">
                <div class="col l12">
                    <ul class="tabs">
                        <li class="tab col s6">
                            <a href="#database" class="green-text text-darken-3">Database</a>
                        </li>
                        <li class="tab col s6">
                            <a href="#generator" class="green-text text-darken-3">Generator</a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

Conclusion

Materialize and other stylesheets like Bootstrap offer far more than just displaying html in certain places on the screen. The tabs in the example above are also something the Materialize provides in there stylesheet. But I think that taking this approach was a life saver for me to be able to make my project look a little more cleaner without having to do hours on hours of researching CSS. It's almost as simple as plug and play and very intuitive when you get the hang of it. I would highly recommend any new programmers who don't have a lot of time to spare but are wanting to add a little flair to their programs to look into Materialize or other stylesheets.