‘CSS’ Videos

  • Mike DeWitt: Developing WordPress Themes Using Modular Sass

    Mike DeWitt: Developing WordPress Themes Using Modular Sass

    WordCamp Toronto 2015Speaker: Mike DeWitt

    January 11, 2016 — CSS preprocessors make developing clean and semantic stylesheets effortless. My talk will take someone through a basic structure for organizing Sass within a WordPress theme, using the Bones theme framework as an example.

    I will go through some of the benefits and cool tricks you can implement with this structure including breakpoint includes, variables, functions, nesting, and mixins.

    Finally I will address perhaps the greatest hurdle to immediately implementing Sass in your WordPress theme — compiling. I will take people through the common methods of doing this including Grunt, Compass, and WordPress plugins like WP-SCSS.

    Learning Outcomes:

    – Look at their current workflow and ask the question: Why am I repeating myself? And how can I automate it?
    – Embrace a CSS workflow that is made up many small components instead of one large component.
    – Gain familiarity we core features of Sass like nesting, variables, mixins, functions, and imports.
    – Feel confident in using a library like Bourbon to write stylesheets that have better browser compatibility, all while writing less lines of code.
    – Be aware of build tools like Grunt/Gulp, which can be used to compile Sass in addition to many other front end tasks.
    – Feel confident in implementing Sass in a WordPress theme immediately.

    Presentation Slides »

  • Michael Arestad: Godzilla CSS

    Michael Arestad: Godzilla CSS

    WordCamp US 2015Speaker: Michael Arestad

    December 13, 2015 — CSS in itself can be pretty difficult even when it’s just one person writing it on a project that is small in scope, but what happens when things get bigger? What naming conventions scale well? How do you work on it with a large team? What are the considerations needed for an open source project or really any project? What tools should be used? I’m going to be answering these and discussing a few other issues that may spring up when working on complex projects. I’m also going to talk about things that might drive you crazy, but don’t actually make an impact on your project.

    Presentation Slides »

  • Beth Soderberg: Dynamic CSS - Transforms, Transitions, and Animation Basics

    Beth Soderberg: Dynamic CSS – Transforms, Transitions, and Animation Basics

    WordCamp US 2015Speaker: Beth Soderberg

    December 10, 2015 — You’ve got the basics of CSS down, but you are ready to kick it up a notch and add a bit more pizazz and interactivity to your websites. In this session we’ll explore the fundamentals of CSS transforms, transitions, and animation. What are the basic building blocks that make up these capabilities? What is the difference between a transition and a transform? What does browser support look like? Most importantly, how can you put these tools to use in your next project and where can you find good resources to learn more? We’ll answer these questions and more as we explore the basics of how to add some of the more truly dynamic elements of CSS to our websites.

    Presentation Slides »

  • Daniel Martinez: Administración del CSS en la construcción de Temas

    Daniel Martinez: Administración del CSS en la construcción de Temas

    WordCamp Cantabria 2015Speaker: Daniel Martinez

    December 9, 2015 — Administración del CSS en la construcción de Temas – Daniel Martinez

  • Luc Princen: Thinking Outside The Box (Model): WordPress Theming With Flexbox

    Luc Princen: Thinking Outside The Box (Model): WordPress Theming With Flexbox

    WordCamp Sofia 2015Speaker: Luc Princen

    December 7, 2015 — In this talk we’ll drop most of the regular box-model in CSS and start exploring flexbox. A new (and native) way to align, order and position elements in css. We’ll be live-coding a theme-page and getting a glimpse into the concrete advantages of using flex over the current techniques.

  • Josh Collinsworth: Be Classless – Optimizing Your CSS for WordPress

    Josh Collinsworth: Be Classless – Optimizing Your CSS for WordPress

    WordCamp Omaha 2015Speaker: Josh Collinsworth

    November 17, 2015 — It’s easy to get caught up adding HTML classes (and IDs) to each and every element we want to style, but the fact is, WordPress helps us out with specific targeting by adding its own classes and IDs to certain elements on every page and post. Cleverly utilizing WordPress’s default page build along with CSS’s pseudo classes and combinators makes it possible to be highly specific with our targeted styles while leaving the original HTML completely alone. In short, if we look for ways, we can often avoid adding more classes and wrapping text in spans to have WordPress and CSS do the work for us.

  • Maura Teal: Getting Started With Sass

    Maura Teal: Getting Started With Sass

    WordCamp Philly 2015Speaker: Maura Teal

    November 17, 2015 — An introduction to Sass for beginning developers or power users who already have a basic understanding of CSS. This talk will go over getting started with Sass in WordPress theme development, including: Sass vs CSS, setup options (theme file structure or use of a CSS plugin), understanding variables, nesting, mixins, extends, and libraries like Compass and Susy.

    Additionally, this talk can cover use cases for integrating the Sass version of frameworks like Bootstrap or Foundation without having to clutter your theme’s markup. With that you get the best of both worlds (bespoke and human-readable classes and the springboard for development and design that frameworks provide).

  • Pete Schuster: CSS Architecture and Style Guides

    Pete Schuster: CSS Architecture and Style Guides

    WordCamp Philly 2015Speaker: Pete Schuster

    November 5, 2015 — This session will cover CSS style guides and architecture. It will introduce and explain the benefits of OOCSS, BEM, and style guide driven development.

  • Stephanie Hobson: Debugging CSS

    Stephanie Hobson: Debugging CSS

    WordCamp Vancouver 2015Speaker: Stephanie Hobson

    October 2, 2015 — CSS is awesome. Except when it’s not. From diagnostic styles to dev tools, we’ll cover a variety of techniques to help you determine if that unexpected behaviour is the result of a misplaced semicolon or if it’s time to file a bug report.

    Presentation Slides »

  • Kathryn Presner: A CSS Adventure

    Kathryn Presner: A CSS Adventure

    WordCamp Montréal 2015Speaker: Kathryn Presner

    September 21, 2015 — Ever wanted to make small changes to the look-and-feel of your site but weren’t sure how to go about it? Itching to change the colour of your site title, tweak the size of your paragraph text, or hide the date on your posts? Let’s go on a CSS adventure together! In this session you’ll learn some basic CSS (Cascading Style Sheets) and we’ll look at some practical examples, using a browser inspector to customize our site’s design.

    Prerequisites:
    Some basic HTML knowledge is helpful, but not required. You should be open to looking “under the hood” at a site’s HTML and CSS.