Craig CampbellJan 15, 2014Lessons: 21Length: 2.6 hours

Next lesson playing in 5 seconds

Overview
Transcript

5.5 Styling the Breakpoints

Our feature icons look okay in a full-size browser, but when you start resizing the browser’s width, things start to break. In this lesson, we’ll make use of Skeleton’s pre-made media queries to fix this issue.

1.Introduction
2 lessons, 05:58

1.1
Introduction
00:58

1.2
What is Skeleton?
05:00

2.Getting Started
2 lessons, 11:39

2.1
Downloading the Files
07:08

2.2
Viewing the Sample Page
04:31

3.Grid System Basics
2 lessons, 10:59

3.1
Grid System Basics
06:25

3.2
Responsive Grid
04:34

4.Fleshing Out the Body
5 lessons, 40:47

4.1
Coding the Header
10:25

4.2
Importing Custom Icons
06:06

4.3
Coding the Main Content
11:21

4.4
Coding the Contact Form
06:47

4.5
Finishing the Footer
06:08

5.Custom Styles
9 lessons, 1:25:42

5.1
Fonts and Backgrounds
05:13

5.2
Placing the Logo
07:11

5.3
Styling the Navigation
07:43

5.4
Styling the Feature Icons
13:19

5.5
Styling the Breakpoints
10:52

5.6
Animated Hover Effect
08:02

5.7
Basic Footer Styles
08:24

5.8
Customizing the Contact Form
14:17

5.9
Styling the Footer Content
10:41

6.Conclusion
1 lesson, 01:43

6.1
Final Thoughts
01:43

Craig Campbell

Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.

craigsoup

Rapid Workflow with Skeleton

Next lesson playing in 5 seconds

5.5 Styling the Breakpoints

1.Introduction2 lessons, 05:58

2.Getting Started2 lessons, 11:39

3.Grid System Basics2 lessons, 10:59

4.Fleshing Out the Body5 lessons, 40:47

5.Custom Styles9 lessons, 1:25:42

6.Conclusion1 lesson, 01:43