Scribd Logo
Upload

Welcome to Scribd!

  • 28 views

    CSS Frameworks

    Uploaded by

    Itinerario Formativo Programación
    This document provides an overview of a workshop on CSS frameworks. It discusses what CSS frameworks are, why they are useful for quickly designing prototypes and making websites responsive. Popular frameworks like Bootstrap are introduced. The workshop goals are to understand the power of frameworks, learn how to layout webpages with grids, learn Bootstrap's capabilities, and increase ability to make responsive pages. Components of frameworks like grids, navigation bars, and buttons are overviewed. Finally, setting up Bootstrap and an example of making a simple portfolio site using the grid are outlined.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd

    CSS Frameworks

    Uploaded by

    Itinerario Formativo Programación
    28 views20 pages
    This document provides an overview of a workshop on CSS frameworks. It discusses what CSS frameworks are, why they are useful for quickly designing prototypes and making websites responsive. Popular frameworks like Bootstrap are introduced. The workshop goals are to understand the power of frameworks, learn how to layout webpages with grids, learn Bootstrap's capabilities, and increase ability to make responsive pages. Components of frameworks like grids, navigation bars, and buttons are overviewed. Finally, setting up Bootstrap and an example of making a simple portfolio site using the grid are outlined.

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides an overview of a workshop on CSS frameworks. It discusses what CSS frameworks are, why they are useful for quickly designing prototypes and making websites responsive. Popular frameworks like Bootstrap are introduced. The workshop goals are to understand the power of frameworks, learn how to layout webpages with grids, learn Bootstrap's capabilities, and increase ability to make responsive pages. Components of frameworks like grids, navigation bars, and buttons are overviewed. Finally, setting up Bootstrap and an example of making a simple portfolio site using the grid are outlined.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    28 views20 pages

    CSS Frameworks

    Uploaded by

    Itinerario Formativo Programación
    This document provides an overview of a workshop on CSS frameworks. It discusses what CSS frameworks are, why they are useful for quickly designing prototypes and making websites responsive. Popular frameworks like Bootstrap are introduced. The workshop goals are to understand the power of frameworks, learn how to layout webpages with grids, learn Bootstrap's capabilities, and increase ability to make responsive pages. Components of frameworks like grids, navigation bars, and buttons are overviewed. Finally, setting up Bootstrap and an example of making a simple portfolio site using the grid are outlined.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    of 20

    CSS Frameworks:

    Quickly designing and prototyping websites

    Alvin Wang
    ScottyLabs

    • ScottyLabs is a student organization at Carnegie


    Mellon University.
    • They organize educational events to help people learn
    how to make things, host events to give students the
    opportunity to work on projects outside of class, and
    develop applications and services for the campus
    community.
    Alvin Wang

    • Senior in Information Systems / Human-Computer


    Interaction
    • Experience in front-end web development / design
    • Solid experience with popular CSS Frameworks
    • Developed a CSS Framework called Materialize
    Materialize
    http://dogfalo.github.io/materialize/
    Workshop Overview
    1. Introduction to CSS Frameworks
    2. Very Basic HTML/CSS refresher
    3. Explanation of framework components
    1. Walkthrough of Bootstrap
    4. Creating a website using Bootstrap
    • Understand the power of css framework
    • Know how to layout webpages with the grid
    • Know the capabilities of Bootstrap
    • Ultimate goal: increase your ability to make responsive
    web pages

    Goals
    What are CSS Frameworks?

    • A framework/development tool that makes it easier to


    design websites
    • At its most basic form, it is just a .CSS file that comes
    with many predefined classes
    • Provides a solid base for you to design upon
    Why would I want to use one?
    • Saves a lot of time setting up basic styles
    • Makes your websites look good with minimal effort
    • Great for prototyping
    • Adds responsiveness to your website
    What is responsiveness?

     Your webpage will resize from desktop to mobile


    seamlessly
     Large contrast from having to create a separate
    mobile site, which was common practice until the
    past few years
    • If you aren’t as aware of what styles are defined by
    the framework, styling your webpage can be
    frustrating.
    • If you don’t take the time to further customize your
    site after using the framework, your site could look
    very generic.

    Disadvantages
    • Bootstrap (made by Twitter, super popular)
    • Foundation (simpler design)

    Popular CSS Frameworks


    Websites made with Bootstrap

    http://expo.getbootstrap.com
    Components of a CSS Framework
    • CSS / CSS Preprocessor: LESS / SASS
    • JavaScript
    • Responsive Grid
    • Components
    • Navigation Bar
    • Buttons
    • Forms
    • Dropdowns
    • Modal Popups
    • Icons
    • + Tons MORE!!!
    HTML Refresher
    • Text Markup Language
    • Ideally, only content should go into HTML files
    • <div> are containers
    • There are many other tags…
    • We separate Style from Content by using CSS classes
    • We add classes to elements like this:
    • <div class=“class-name”>
    CSS Refresher
    • Cascading Style Sheet – styles you apply “cascade down”
    • General rules cascade down until more specific styles are
    applied
    • Ideally, only content should go into HTML files
    • <div> are containers
    • There are many other tags…
    • We separate Style from Content by using CSS classes
    • We add classes to elements like this:
    • <div class=“class-name”>
    • Not much!
    • A text editor of some sort (recommend Brackets)
    • Bootstrap

    What we’ll need


    • Download Bootstrap css + js
    • Don’t get the minified version so we can look at the
    full code if need be

    Setting up Bootstrap
    Make a simple portfolio
    Our focus is on laying out the portfolio using the grid
    and also learning how to add framework components
    to our site.
    The Grid
    Upcoming Workshops

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy