Jake Trent

Tag: Css

Update Body Class in React

React gives us a great component abstraction. Each of these components represents a node in the DOM. Each component is self contained, doesn’t talk up the component hierarchy directly and passes explicit data and code down the hierarchy. But what about when you have a React app that wants to reach out and modify something it doesn’t control?

Read more

I Love CSS Modules

I heard a fantastic yesterday by Glen Maddern where Interoperable CSS was well-illustrated as the fantastic CSS language advancement that it is. I was happy to hear hushed ooo’s and ahh’s from the audience as they realized the power of what they were seeing. I have been enjoying the benefits of CSS modules myself and my team and would share some of my favorite features in hopes that others will be inclined to use this feature as well. Cleanse the world of global stylesheets!

Read more

Style File Input

File input fields are notoriously painful to style. Here are a few quick tips to that will save you some dead ends.

Read more

ngStyle Background

ngStyle is the directive used to set inline style attributes with AngularJs. Most of the time, it’s straightforward to use. background css attributes can be just slightly trickier.

Read more

Cons of CSS Preprocessors

If you have any sizeable stylesheet these days, you should use a CSS preprocessor. They’re awesome, but they come with a few cons. The pros still definitely out-weigh the cons. Use the preprocessor. The cons are just things you’ll want to look out for to make your experience with CSS preprocessors better.

Read more

Responsive Table with Scrolling

Sometimes a table element is the most semantic element one can use in markup. It is true. If you’re displaying tabular data, a table is a likely option. If you’re on a responsive site, however, you’ll cringe at this option. It turns out that tables aren’t very responsive web design-friendly. One way to create a more responsive table is with scrolling.

Read more

Greater Flexibility with Responsive Design

With the advent of mobile devices, tablets, and screens attached to your toaster, we as web developers – er, ninjas – can no longer be ok with creating markup and styles that only appear properly in a traditional desktop environment. Well, I guess we could, but we’d soon be defeated by much more gnarly ninjas. Based on work and ideas of the Unstoppable Robot Ninja himself, your css dexterity is sure to reach levels of cosmic explosion by reviewing just a few principles of responsive design.

Read more

Most Seamless Iframe

With few exceptions, it seems that when a developer puts a iframe on his page, he wants it to be seamless on his page. In other words, he doesn’t want the viewer to know that it’s actually an iframe. To that end, there are a couple of things you can do to make the iframe virtually invisible.

Read more

Replace Text With Css-Defined Image

Sometimes bland text on a webpage needs a little spicing up with an image. Instead of having to mess with markup, this text can be replaced with an image. Plus, the remaining text in the markup allows for better screen-reader access. There is a fair amount of discussion on the best way to do this. One of the ways that I’ve found works pretty well for me is what is known as the Leahy/Langridge Image Replacement (LIR)

Read more