138 All About CSS with our WordPress Round Table

We talk about CSS, Flexbox, CS Grids, CSS frameworks like Bootstrap and Foundation, Sass and other CSS pre-processors.

Our panel this week:

Alex Denning from https://alexdenning.com/ and https://masterwp.co/

Jackie D'Elia from https://jackiedelia.com/

Sallie Goetsch from https://wpfangirl.com/

Jonathan Denwood from https://www.wp-tonic.com/

John Locke from Lockedown SEO

 

Episode 138 Table of Contents

0:00 Podcast Intros.

1:49 WordPress New Story #1: The Wix Mobile App, A WordPress Joint

https://ma.tt/2016/10/wix-and-the-gpl/

8:07 WordPress Story #2: Lessons from failing to sell WordPress themes at the start of the gold rush

https://alexdenning.com/lessons-sell-wordpress-themes/

25:08 Main Topic: All About CSS

25:26 What things do you find frustrating about CSS?

27:18 How has CSS changed over the years?

30:16 Flexbox, and the CSS problems it has solved

34:44 The browsers that tend to have browser quirks in 2016/2017

37:02 Do CSS Frameworks make front-end development easier or harder?

42:31 Jackie's workflow with Sass and PostCSS.

50:47 John is still old-school with CSS.

51:48 Sallie's workflow and where she wants to go.

53:40 Email is the final frontier for relatively easy CSS support.

58:47 When will CSS Grid be supported in the majority of browsers?

1:02:39 What are some innovative uses of CSS you have seen this year?

1:07:40 Podcast outros

 

===================

Links Mentioned During Episode 138:

 

A Complete Guide to Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

 

Using CSS Flexible Boxes

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

 

Flexibility: A JavaScript polyfill for Flexbox

https://github.com/jonathantneal/flexibility

 

Sass: Syntactically Awesome Style Sheets

http://sass-lang.com/

 

Grunt: The JavaScript Task Runner

http://gruntjs.com/

 

Gulp: The streaming build system

http://gulpjs.com/

 

Animate.css

https://daneden.github.io/animate.css/

 

A Complete Guide to (CSS) Grid

https://css-tricks.com/snippets/css/complete-guide-grid/

 

CSS Grid Layout Module Level 1

https://www.w3.org/TR/2016/CR-css-grid-1-20160929/

 

Target Safari 7.1 and 8.0 CSS Styles (OSX Yosemite)

https://www.lockedownseo.com/target-safari-7-1-and-8-0-css-styles-osx-yosemite/

 

Bootstrap

http://getbootstrap.com/

 

Foundation by Zurb

http://foundation.zurb.com/

 

High Performance Responsive Design by Tom Barker (O'Reilly Media)

http://shop.oreilly.com/product/0636920033103.do

 

Genesis Framework

http://my.studiopress.com/themes/genesis/

 

PostCSS: A tool for transforming CSS with JavaScript

http://postcss.org/

 

node-css-mqpacker

https://github.com/hail2u/node-css-mqpacker

 

Less

http://lesscss.org/

 

Codekit

https://codekitapp.com/

 

PHPStorm IDE

https://www.jetbrains.com/phpstorm/

 

Grid by Example

http://gridbyexample.com/

 

Perch: The really little content managment system

https://grabaperch.com/

 

Some Innovative Codepen Examples

http://codepen.io/khadkamhn/pen/amzWKv

http://codepen.io/FelixRilling/pen/vEKGC

Jen Simmons: Revolutionize Your Page: Real Art Direction on the Web

http://jensimmons.com/presentation/revolutionize-your-page-real-art-direction-web

 

Creating Responsive Shapes With Clip-Path and Breaking Out of the Box

https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/

 

CSS Shapes Module Level 1

https://drafts.csswg.org/css-shapes-1/

 

Carousels Don't Have to be Complicated

http://mediatemple.net/blog/tips/carousels-dont-have-to-be-complicated/

 

2015.DConstruct.org

http://2015.dconstruct.org/

===================

Subscribe to WP-Tonic on iTunes

https://itunes.apple.com/us/podcast/wp-tonic-wordpress-podcast/id893083124?mt=2

 

===================

 

WP-Tonic is a both a WordPress maintenance service, and publisher of a twice weekly WordPress podcast where we talk with some of the most successful people in WordPress development, business, and online marketing.