CSS Is Awesome

CSS

How to style your own website easily by using CSS other people spend ages making.

Roadmap

Part 1 Intro to HTML / CSS
Part 2 Frameworks
Part 3 Examples
Part 4 ????

1. What is HTML / CSS?

HTML5, CSS3 and JS6

HTML


                            <!DOCTYPE html>
                            <html lang="en">
                                <head>
                                    <meta charset="utf-8" />
                                    <title>My First Webpage</title>
                                </head>

                                <body>
                                    <h1>Welcome to my first webpage!</h1>
                                </body>
                            </html>
                        

CSS


                            body {
                                background-color: #ee6e73;
                                color: black;
                                font-family: monospace;
                            }

                            h1 {
                                color: white;
                            }
                        

2. CSS that other people make

a.k.a Frameworks

A CSS framework is a pre-prepared software framework that is meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language.

2. Frameworks

A CSS framework is a collection of CSS (and sometimes JS) files that make it easier to keep web pages styled consistently.

Bootstrap

Bootstrap

Bulma

Bulma

Materialize CSS

Materialize CSS

An Example Website

Small "About Me" website.
Contains basic details about myself.
Provides a contact form.
Has to look nice. (I'm shallow like that)

Step 1. HTML only


                            <!DOCTYPE html>
                            <html lang="en">
                                <head>
                                    <title>All about me!</head>
                                </head>
                                <body>
                                    <h1>Freya Broderick</h1>
                                    <h2>Education</h2>
                                    <ul>
                                        <li>BSc Computer Science, UCC</li>
                                        <li>MSc in Pizza, School of NetSoc</li>
                                        <li>PhD in Giving Hugs, School of Life</li>
                                    </ul>
                                    <h2>Work Experience</h2>
                                    <ul>
                                        <li>SysAdmin, UCC NetSoc</li>
                                        <li>Programmer, in general</li>
                                    </ul>
                                    <h2>Contact Me</h2>
                                    <form>
                                        <label for="name">Your Name:</label><input type="text" id="name" name="name" />
                                        <label for="message">Message:</label><textarea id="message" name="message"></textarea>
                                        <input type="submit" />
                                    </form>
                                </body>
                            </html>
                        
View

Step 2. Let's add Bulma


                            <head>
                                <meta name="viewport" content="width=device-width, initial-scale=1">
                                <title>All about me!</title>
                                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
                            </head>
                        
View

Step 3. Titles


                            <h1 class="title">Freya Broderick</h1>
                            ...
                            <h2 class="title">Education</h2>
                            ...
                            <h2 class="title">Work Experience</h2>
                            ...
                            <h2 class="title">Contact Me</h2>
                            ...
                        
View

Step 4. Container


                            <body>
                                <div class="container">
                                    <h1>Freya Broderick</h1>
                                    ...
                                </div>
                            </body>
                        
View

Step 5. Form


                            <form>
                                <div class="field">
                                    <label class="label" for="name">Your Name:</label>
                                    <div class="control">
                                        <input class="input" type="text" id="name" name="name" />
                                    </div>
                                </div>
                                <div class="field">
                                    <label class="label" for="message">Message:</label>
                                    <div class="control">
                                        <textarea class="textarea" id="message" name="message"></textarea>
                                    </div>
                                </div>
                                <input class="button is-primary is-pulled-right" type="submit" />
                            </form>
                        
View

Step 6. Content


                            <h1 class="title">Freya Broderick</h1>
                            <div class="content">
                                ...
                            </div>
                            <h2 class="title">Education</h2>
                            <div class="content">
                                ...
                            </div>
                            <h2 class="title">Work Experience</h2>
                            <div class="content">
                                ...
                            </div>
                        
View

Bulma


                            <!DOCTYPE html>
                            <html lang="en">
                                <head>
                                    <meta name="viewport" content="width=device-width, initial-scale=1">
                                    <title>All about me!</title>
                                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
                                </head>
                                <body>
                                    <div class="container">
                                        <h1 class="title">Freya Broderick</h1>
                                        <h2 class="title">Education</h2>
                                        <div class="content">
                                            <ul>
                                                <li>BSc Computer Science, UCC</li>
                                                <li>MSc in Pizza, School of NetSoc</li>
                                                <li>PhD in Giving Hugs, School of Life</li>
                                            </ul>
                                        </div>
                                        <h2 class="title">Work Experience</h2>
                                        <div class="content">
                                            <ul>
                                                <li>SysAdmin, UCC NetSoc</li>
                                                <li>Programmer, in general</li>
                                            </ul>
                                        </div>
                                        <h2 class="title">Contact Me</h2>
                                        <form>
                                            <div class="field">
                                                <label class="label" for="name">Your Name:</label>
                                                <div class="control">
                                                    <input class="input" type="text" id="name" name="name" />
                                                </div>
                                            </div>
                                            <div class="field">
                                                <label class="label" for="message">Message:</label>
                                                <div class="control">
                                                    <textarea class="textarea" id="message" name="message"></textarea>
                                                </div>
                                            </div>
                                            <input class="button is-primary is-pulled-right" type="submit" />
                                        </form>
                                    </div>
                                </body>
                            </html>
                        
View

Bootstrap


                            <!DOCTYPE html>
                            <html lang="en">
                                <head>
                                    <meta name="viewport" content="width=device-width, initial-scale=1">
                                    <title>All about me!</title>
                                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
                                </head>
                                <body>
                                    <div class="container">
                                        <h1 class="title">Freya Broderick</h1>
                                        <h2 class="title">Education</h2>
                                        <div class="content">
                                            <ul>
                                                <li>BSc Computer Science, UCC</li>
                                                <li>MSc in Pizza, School of NetSoc</li>
                                                <li>PhD in Giving Hugs, School of Life</li>
                                            </ul>
                                        </div>
                                        <h2 class="title">Work Experience</h2>
                                        <div class="content">
                                            <ul>
                                                <li>SysAdmin, UCC NetSoc</li>
                                                <li>Programmer, in general</li>
                                            </ul>
                                        </div>
                                        <h2 class="title">Contact Me</h2>
                                        <form>
                                            <div class="field">
                                                <label class="label" for="name">Your Name:</label>
                                                <div class="control">
                                                    <input class="input" type="text" id="name" name="name" />
                                                </div>
                                            </div>
                                            <div class="field">
                                                <label class="label" for="message">Message:</label>
                                                <div class="control">
                                                    <textarea class="textarea" id="message" name="message"></textarea>
                                                </div>
                                            </div>
                                            <input class="button is-primary is-pulled-right" type="submit" />
                                        </form>
                                    </div>
                                </body>
                            </html>
                        
View

Materialize CSS


                            <!DOCTYPE html>
                            <html lang="en">
                                <head>
                                    <title>All about me! (Materialize)</title>
                                    <!--Import Google Icon Font-->
                                    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
                                    <!--Import materialize.css-->
                                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

                                    <!--Let browser know website is optimized for mobile-->
                                    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
                                </head>
                                <body>
                                    <div class="container">
                                        <h1>Freya Broderick</h1>
                                        <h2>Education</h2>
                                        <ul class="collection">
                                            <li class="collection-item">BSc Computer Science, UCC</li>
                                            <li class="collection-item">MSc in Pizza, School of NetSoc</li>
                                            <li class="collection-item">PhD in Giving Hugs, School of Life</li>
                                        </ul>
                                        <h2>Work Experience</h2>
                                        <ul class="collection">
                                            <li class="collection-item">SysAdmin, UCC NetSoc</li>
                                            <li class="collection-item">Programmer, in general</li>
                                        </ul>
                                        <h2>Contact Me</h2>
                                        <form>
                                            <div class="input-field">
                                                <input type="text" id="name" name="name" />
                                                <label for="name">Your Name</label>
                                            </div>
                                            <div class="input-field">
                                                <textarea class="materialize-textarea" id="message" name="message"></textarea>
                                                <label for="message">Message</label>
                                            </div>
                                            <input class="btn teal lighten-1 right" type="submit" />
                                        </form>
                                    </div>
                                    <!--JavaScript at end of body for optimized loading-->
                                    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
                                </body>
                            </html>
                        
View

X1. Grid System

Most, if not all, CSS Frameworks come with a row and column based grid system.
Using this, you can create responsive layouts that take up x/12 of the width allowed at all times.

X1. Grid System

Bulma.io Grid System

X1. Grid System


                            <div class="container">
                                ...
                                <div class="columns">
                                    <div class="column is-5">
                                        <h2 class="title">Education</h2>
                                        ...
                                    </div>
                                    <div class="column is-7">
                                        <h2 class="title">Work Experience</h2>
                                        ...
                                    </div>
                                </div>
                                ...
                            </div>
                        
View

Other Things You Can Expect

Alerts / Notifications
Cards / Panels
Navbars / Tabs
And More!

4. ????

Isn't this all a hell of a lot of work for people?

4. CSS Preprocessors

Well what if we could do programming stuff in CSS?

4. CSS Preprocessors

Sass CSS Logo

4. Sass

Syntactically Awesome Style Sheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

What Can It Do?

Variables: $color: #002366;
Imports: @import "other";
Maths: width: 600px/960px * 100%;
More: Arrays, Dictionaries, Loops, Nesting

Let's Make A Rainbow; HTML


                            <!DOCTYPE html>
                            <html lang="en">
                                <head>
                                    <title>A Sassy Rainbow</title>
                                </head>
                                <body>
                                    <div class="stripe is-red"></div>
                                    <div class="stripe is-orange"></div>
                                    <div class="stripe is-yellow"></div>
                                    <div class="stripe is-green"></div>
                                    <div class="stripe is-blue"></div>
                                    <div class="stripe is-indigo"></div>
                                    <div class="stripe is-violet"></div>
                                </body>
                            </html>
                        

Let's Make A Rainbow; SCSS


                            // Normal CSS Works here too
                            * {
                                margin: 0;
                                padding: 0;
                            }

                            // Define the colours in a map
                            $stripes: (
                                "red": #F00,
                                "orange": #FF7F00,
                                "yellow": #FF0,
                                "green": #0F0,
                                "blue": #00F,
                                "indigo": #4B0082,
                                "violet": #9400D3,
                            );

                            // Define the colour bands
                            .stripe {
                                height: calc(100vh / 7);
                                text-align: center;

                                p {
                                    color: white;
                                }

                                // For loop for defining the colour schemes
                                @each $name, $color in $stripes {
                                    &.is-#{$name} {
                                        background-color: #{$color};
                                    }
                                }
                            }
                        

Let's Break It Down; Maps


                        // Define the colours in a map
                        $stripes: (
                            "red": #F00,
                            "orange": #FF7F00,
                            "yellow": #FF0,
                            "green": #0F0,
                            "blue": #00F,
                            "indigo": #4B0082,
                            "violet": #9400D3,
                        );
                    

Let's Break It Down; Nesting


                            // Define the colour bands
                            .stripe {
                                height: calc(100vh / 7);
                                text-align: center;

                                p {
                                    color: white;
                                }
                            }
                        

Let's Break It Down; Nesting


                            .stripe {
                                height: calc(100vh / 7);
                                text-align: center;
                            }

                            .stripe p {
                                color: white;
                            }
                        

Let's Break It Down; Loops


                        // Define the colour bands
                        .stripe {
                            ...
                            // For loop for defining the colour schemes
                            @each $name, $color in $stripes {
                                &.is-#{$name} {
                                    background-color: #{$color};
                                }
                            }
                        }
                    

Putting it all together


                            # Install Sass
                            gem install sass             # Ruby
                            npm install -g sass          # JS
                            brew install sass/sass/sass  # Dart

                            # Compile the SCSS into CSS
                            sass rainbow.scss rainbow.css
                        

Putting it all together


                            <head>
                                <title>A Sassy Rainbow</title>
                                <link href="rainbow.css" rel="stylesheet" />
                            </head>
                        
View

What are your questions?


                        your_questions.each do |question|
                          self.answer question
                        end
                    

Thank you!


Slides:

freyamade.netsoc.co/techtalks/css

Code:

freyamade/netsoc-css-talk