138 WP-Tonic: All About CSS

by | Apr 8, 2020 | 0 comments

138 WP-Tonic: All About CSS

by | Apr 8, 2020 | CSS Tips and Tricks | 0 comments



We talk about CSS, Flexbox, CSS 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 https://www.lockedowndesign.com

Episode 138 Table of Contents
0:00 Podcast Intros.
1:49 WordPress New Story #1: The Wix Mobile App, A WordPress Joint

The Wix Mobile App, a WordPress Joint

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

Lessons from failing to sell WordPress themes at the start of the gold rush

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
1:11:03 YouTube bonus content begins.
1:11:10 Who are people you recommend to follow for CSS?
1:22:19 Where does Alex see WordPress going? How is the interest level for WordPress in the UK?

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

Links Mentioned During Episode 138:

A Complete Guide to Flexbox

A Complete 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

A Complete Guide to 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.lockedowndesign.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

Open Source Genesis Framework

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 managemnt system
https://grabaperch.com/

Some Innovative Codepen Examples

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/

BONUS CONTENT

CSS-Tricks / Chris Coyier
https://css-tricks.com/

Nat Eliason
http://www.nateliason.com/

Sara Soueidan
https://sarasoueidan.com/index.html

Rachel Andrew
https://rachelandrew.co.uk/

Brad Frost

Brad Frost Web

A List Apart: For People Who Make Websites

Homepage

Smashing Magazine
https://www.smashingmagazine.com/

Designer News
https://www.designernews.co/

Eric Meyer

Harry Roberts / CSS Wizardry
http://csswizardry.com/

Nicole Sullivan / Stubbornella
http://www.stubbornella.org/content/

Jonathan Snook
https://snook.ca/

Andy Clarke

Andy Budd

Dan Eden

Jetpack
Jetpack

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

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 and support service, and publisher of a twice weekly WordPress business podcast where we talk with some of the most successful people in WordPress development, business, and online marketing.

source