responsive styles - github pages · many css frameworks support responsive design by providing a...
TRANSCRIPT
Responsive Styles
INFO 343
Today's Objectives
Review basic CSS syntax
Apply conditional styles by using media queries
Create flexible layouts with the flexbox display
Introduce the use of CSS frameworks (not needed for a2)
CSS Review
The Box-Model
CSS Displays
Media Queries
We will practice mobile-first web design. Why mobile, and why first?
Mobile first web design
Media Queries
Allow you to apply conditional styles, depending on the screen width
Default styles should target small devices (why?)
/* Styles out here are applied by default, and should target mobile devices */
@media screen and (min-width:992px) {
/* Assign multiple styles in here for screens larger than 991px */
#element-1 {
font-size:10px;
}
.klass-1 {
font-size:20px;
}
} module-8
Module-8 exercise-1
Flexbox
Box-sizing: border-box; module-8
Include padding and border in the size of the box!
Flexbox
Provides a simple syntax for distributing elements within a container
Manipulates the height, width, and alignment of immediate children
Multiple advantages, such as matching the height of elements
module-8
Assign the display property to flex for your container element.flex-container {
display:flex; /* Set the container display to flex */
}
Assign child elements properties to set how much space they'll occupy.flex-item {
flex-basis:25%; /* Set the amount of horizontal space to take up */
}
Flexbox: how it works
module-8
The following properties will help you better control your flexbox layout
- justify-content: Horizontally distribute item in your container- align-items: Vertically distribute items in your container- flex-wrap: Wrap items onto a new line (if necessary)
Flexbox: Additional properties
module-8
How can we use flexbox and media queries together?
Module-8 exercise-2
CSS Frameworks
(you don't need to use one for the assignment due Tuesday)
Lots of CSS code that someone else wrote, that can make your website look nice
We'll introduce Materialze, but feel free to use a Framework of your choice
Read it into your <head> section of your .html file
Some frameworks enable reactive elements by loading JavaScript files
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Load jQuery library, a dependency for Materialize -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
</head>
Loading a Framework
module-8
Assign classes that reference the .css files that you've loaded
<button class="btn">Class "BTN"</button>
<button>Without "btn"</button>
Using a Framework
module-8
Many CSS frameworks support responsive design by providing a grid system
In Materialze, there is a 12 column grid system, all of equal width
Use classes to specify how many columns you want an element to occupy on which screensize
The Grid
module-8
Materialize column specifications module-8
Assign each element multiple classes to specify the number of columns given the screensize
<!-- Container div with pre-set styles from Materialize -->
<div class="container">
<!-- A row for your grid -->
<div class="row">
<!-- An element that will take up:
- 12 columns on a small screen (<=600px),
- 6 columns on a medium screen (<=992px), and
- 4 columns on a large screen (>992px) -->
<div class="col s12 m6 l4">...</div>
</div>
</div>
Achieving Responsiveness
module-8
A lot less work than media queries!
Module-8 exercise-3
Upcoming...
By Tuesday: You should feel comfortable with module 8
Due Tuesday, 10/11 (8:30 a.m.): a2-html-css