CSS

Cascading Style Sheets

Using wp.media.view.Modal

There are a lot of demos and tutorials about incorporating the wp.media image uploader and selector, but not much about the other parts of the library.

wp.media.views.Modal is a blank modal view, which the media modal uses as its default container.

This view is demo'd in the Media Guide, but it's not really discussed elsewhere.

Modal displays the large white box that contains the media manager. Within wp.media, it's used only two times.

WordPress Study

I'm studying the wp.media library, and Backbone.js. I never really did anything with except toy programs with Backbone - and I didn't really grok it, so now I can learn it... post Angular and post-React. It's going backwards in time, but, still instructive because the Backbone.js idioms are different from the easier-to-use frameworks.

What Many Other Books Don't Tell You about CSS

CSS

A lot of other books out there don't discuss selector specificity and the Cascade in enough detail. They don't talk about ways to organize your code, either. When you read this ebook, it'll make sense.

CSS Font and Style Switcher (jQuery)

This is a bit of code to add a floating box to your page that will let you switch stylesheets and fonts. I wrote it specifically to start trying out different "themes" and fonts, not to allow the end user to do these things. But the client will be using it to preview.

It's not fully parameterized, nor does it generate the HTML for the selects, so you'll need to hack the code.

Writing Articles in HTML5

I've been writing HTML forever, but really never looked at the new HTML5 tags. For the most part, I'd devolved into using DIV and SPAN and FORM and a few other tags to code up webpages. That's OK for writing software, but it was getting pretty stupid when I was putting in code like DIV CLASS="address". A quick trip through the HTML5 tags revealed a cornucopia of tags relevant to writing academic papers and computer programming tutorials.

CSS Animations using Transitions with Conditional CSS, Stacked Rectangles

This is a somewhat elaborate example of how to use conditional CSS and transitions to create a fluid, responsive stack of rectangles that are polite enough to stack up when the screen is narrow. The idea is I'm working on is to have a menuing system that stacks when the screen shrinks.

CSS Animations via Transitions

I don't know anything about CSS Transitions, so I made this little demo to try it out. It's ultra-simple, and I normally wouldn't post this kind of thing, but the examples I saw were a lot snazzier, so it was harder to read the code. (To this end, this is probably too fancy.)

CSS Animations via Styles (similar to jQuery animations)

This explores how to do CSS-style based animations, where the animations are controlled via Javascript code that adds and deletes class names from the className property.

Buttons vs. Links, and how to make buttons that look like links, and act like links, but aren't links.

This is a common UI element that hovers between "pattern" and "anti-pattern", but it's one I've seen in Drupal, WordPress, and a few other places. It's the button next to a link, where the link acts just like a button:

Technically, it's a violation of UI principles, to have a link that does something to the server's state. Anthony at uxmovement thinks so, but I disagree with him, because the way the link is next to the button, it's obvious that it complements the button.

Chrome Rendering Glitch with Label's Padding in Points (PT), Even Values

I have to learn the Chromium bug reporting system. Found an interesting rendering bug if, on a label, you specify a padding with an even number of points (pt), the rendering is shifted up a little bit, and the border can disappear if it's adjacent to another element.

CSS Hints for Technoids Who Forgot to Learn CSS

This article has been completely rewritten, and expanded into a book: CSS: An Overview for Software Developers.

This article is obsolete and will go away eventually, and replaced with an excerpt from the book.

----------------

The original was written: 2004-11-18 03:16:46 -0700.

Here's a bit of the article:

Dang, but it took me forever to learn CSS. Maybe I should have used a book. Here, I'm going to share with you the hard-found knowledge, presented using technical programmer jargon. (Revised in 2014.)

CSS Stylesheet Switcher Widget

This snippet of code can be modified and used to change the stylesheet on your page. I set it up to work against a layout extracted from Salsa, but it should work on generic pages. It's good for demos, discussions about a layout, trying different colors, etc.

Inviting Pope Francis to Los Angeles

I'm working on this at work - using CSS to alter Salsa's rigid layouts. :/ Yeah, it's here because I wasn't in on the issue of building backlinks.

Inviting Pope Francis to Los Angeles

Syndicate content