CSS in React

Written on November 14th, 2016 By Joe Seifi (tags: css, javascript, reactjs) Comments Off

CSS has come a long way. We moved from CSS to Sass, to PostCSS. Now with the help of new build tools like Webpack and Rollup, CSS has plunged head first into the JavaScript world. Just as require and CommonJS made it possible to avoid globals in JavaScript and write modular code, we can now do the same with CSS, which the React community has embraced in various shapes.

I gave a talk last week at the ReactJS San Francisco Bay Area meetup group hosted at Trulia. Below are the slides from the talk where I covered Radium, react-css-modules, and styled components as the primary frameworks. Along with the talk, I’ve also publish a github repo (CSS in React on Github) where you can easily run the examples locally and learn by editing simple examples to get a CSS in React project going.

I also have an upcoming session at SXSW in 2017 titled CSS in React: The Good, The Bad, and the Ugly. Stay tuned for more examples and updates.

LESS – an overview of the CSS preprocessor

Written on June 25th, 2013 By Joe Seifi (tags: css, design) 0 comments

Here is a presentation I did that is an overview of the LESS preprocessor. If you’ve been thinking about using a CSS preprocessor and are curios about how LESS works, this is worth a look. It goes over the basic features of LESS including code samples. This talk does not cover Sass nor Stylus which are the other 2 CSS preprocessors out there.

You can also view this presentaion on SlideShare.

Responsive Website Design – Presentation and Demo Project

Written on September 5th, 2012 By Joe Seifi (tags: css, design, responsive) 0 comments

I’m sharing the slides from my talk at South Bay Mobile User Group this week hosted at Honda on Responsive Web Design.

Responsive Websites on SlideShare. A quick introduction to developing responsive websites including best practices, testing tools, and a sample project by Joe Seifi

You can also download and play with the code for this presentation on Github at
https://github.com/joeshub/responsive-web-node-less

The sample code uses LESS to make calculations easier in flexible layouts.

You can start the app with Node.js very simply. From the root folder just run > node app.js and browse to http://localhost:3000
For a more detailed step by step approach, go to http://localhost:3000/html/