Topic: css

CSS in React

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

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

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/

How to force CSS background images to print in web browsers

Here’s a trick you can use when you want the printed version of a webpage to include the background images you have in your CSS.

First of all you’ll want to have a specific print css file that targets the print media type. You can easily create one and include it within the head.

Then you will override the container which hosts your background image in the print style file and change the display style of the element to list-item and attach the background image here again as a list-style-image. To make sure you don’t need to deal with margin or padding issues, you’ll also place the image inside your mock list.

I’ve tested and verified this method in the latest versions of Safari, Chrome, Internet Explorer, and FireFox. Please let me know if you find any inconsistencies during your testing.

Here’s the sample code:

Your main document, will import 2 stylesheets, 1 for the screen and another for the printer. You can fine tune the media settings as you need.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="screen.css" media="screen, print" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>

Here is the background image called in your main css file used in browsers.

.bg {
    background: url("http://fpoimg.com/250x250") top left no-repeat;
    width:250px;
    height: 250px;
}

And your print hack used by browsers when users initiate the print dialog. So you can add the print class to your div and have it print out, or remove it if needed.

.bg.print {
    display: list-item;
    list-style-image: url("http://fpoimg.com/250x250");
    list-style-position: inside;
}

Note: You can also use the @media rule instead of importing files if you want to avoid making an extra http request.

Yummy Yummy, New Delicious Design

Looks like the long awaited web 2.0izing of the del.icio.us website is finally here. Very sleek and sexy is my first impression.

Take a look at some of the older user interfaces to get a sense for how del.icio.us has evolved until now. Aside from the new look there are new features as well. The delicious dev team has supposedly completely rewritten the code base, to allow for a more scalable and spry tool.

New features:

Navigation: New simple CSS tabs with onclick drop down menus make is simple to find your tasty bookmarks. The navigation structures seems to borrow from Flickr. Search also comes with a simple drop down option list to find stuff in your bookmarks, network or everyone.

Bookmarks: You have Title view, regular view and Full View options here. View your popular bookmarks to filter the good stuff and filter down more by choosing fresh only.

Sidebar: is updated to show a relative set of tags related to your left content pane.

Action Box: This light blue box in the sidebar shows the common tasks for the given page.

Search URL: This is a reverse search for bookmarks and pulls in the ones with the given URL along with tags used for that URL by each user, broken down in chronological order. You can also view the notes added by each user to the given URL.

Settings: The settings page is laid out with all the actions listed on one page, similar to a sitemap.

Forums: There is a support forum that looks more like a categorized list of links than a forum. I like the non-cluttered design. Reminds me of Drupal.

As in the past their API is still available for developer consumption.