Scribd
Upload
63 views20 pages

CSS Frameworks for Students

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.

Uploaded by

Itinerario Formativo Programación
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
63 views20 pages

CSS Frameworks for Students

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.

Uploaded by

Itinerario Formativo Programación
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 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