CSS Is Awesome

CSS

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

Ciaran Broderick, SysAdmin In Spirit

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

Roadmap

HTML5, CSS3 and JS6
1. What is HTML / CSS?

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 (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. CSS that other people make (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
Small "About Me" website.
Contains basic details about myself.
Provides a contact form.
Has to look nice. (I'm shallow like that)

An Example Website

Step 1. HTML only


                                    <!DOCTYPE html>
                                    <html lang="en">
                                        <head>
                                            <title>All about Ciaran Broderick</head>
                                        </head>
                                        <body>
                                            <h1>Ciaran Broderick</h1>
                                            <blockquote>"Ciaran Broderick is one of the coolest people you'll ever meet. You should try and hang out with them whenever you can and also give them pizza" - Ciaran's Mom</blockquote>
                                            <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>
                                
remove_red_eye

Step 2. Let's add Bulma


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

Step 3. Titles


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

Step 4. Container


                                    <body>
                                        <div class="container">
                                            <h1>Ciaran Broderick</h1>
                                            ...
                                        </div>
                                    </body>
                                
remove_red_eye

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>
                                
remove_red_eye

Step 6. Content


                                    <h1 class="title">Ciaran 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>
                                
remove_red_eye

Bulma


                                    <!DOCTYPE html>
                                    <html lang="en">
                                        <head>
                                            <meta name="viewport" content="width=device-width, initial-scale=1">
                                            <title>All about Ciaran Broderick</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">Ciaran Broderick</h1>
                                                <div class="content">
                                                    <blockquote>"Ciaran Broderick is one of the coolest people you'll ever meet. You should try and hang out with them whenever you can and also give them pizza" - Ciaran's Mom</blockquote>
                                                </div>
                                                <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>
                                
remove_red_eye

Bootstrap


                                    <!DOCTYPE html>
                                    <html lang="en">
                                        <head>
                                            <meta name="viewport" content="width=device-width, initial-scale=1">
                                            <title>All about Ciaran Broderick</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">Ciaran Broderick</h1>
                                                <div class="content">
                                                    <blockquote>"Ciaran Broderick is one of the coolest people you'll ever meet. You should try and hang out with them whenever you can and also give them pizza" - Ciaran's Mom</blockquote>
                                                </div>
                                                <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>
                                
remove_red_eye

Materialize CSS


                                    <!DOCTYPE html>
                                    <html lang="en">
                                        <head>
                                            <title>All about Ciaran Broderick (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>Ciaran Broderick</h1>
                                                <blockquote>"Ciaran Broderick is one of the coolest people you'll ever meet. You should try and hang out with them whenever you can and also give them pizza" - Ciaran's Mom</blockquote>
                                                <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>
                                
remove_red_eye

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.

Bulma.io Grid System
X1. 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>
                                
remove_red_eye
Alerts / Notifications
Cards / Panels
Navbars / Tabs
And More!

Other Things You Can (Typically) Expect

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.
Variables $color: #002366;
Imports @import "other";
Maths width: 600px/960px * 100%;
More Arrays, Dictionaries, Loops, Nesting

What Can It Do?

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; Loop


                                // 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>
                                
remove_red_eye
What are your questions?

                                your_questions.each do |question|
                                  self.answer question
                                end
                            
Thanks for listening

crnlpanic.netsoc.co/techtalks/css

github.com/crnbrdrck/netsoc-css-talk