June 2013 Meeting Announcement -- Responsive Tables - Putting It All Together

For the past few meetings, we have been looking at some new CSS3 selectors and at styling tables. At the June meeting, we will put everything together to style tables that will be re-sized for the device being used. We will look at three or four different solutions and apply them to our own sample table. It should be fun and informative.

And if there are any questions left after this meeting, be sure to join us in the afternoon at the Web Design SIG where we will conduct our second annual Fix Your Website On The Fly meeting. Bring your problem sites, and we will crowd-source a solution among the members. 

May 2013 Meeting Report

We started the May meeting with a look at two websites illustrating opposite ends of the styling spectrum.

First was CERN’s restoration of the original website. They are putting back the files in their original versions as they were first uploaded. There is an entire site about this restoration that will tell you more. 

At the other end is CSS Zen Garden. This site recently celebrated its tenth anniversary and is now being converted to HTML5 and to current CSS standards. CSS Zen Garden is an inspiring collection of examples of imaginative webpage styling.

We spent the bulk of the meeting looking at the structure of HTML tables and their proper use. We then worked with the pseudo-classes that we have been discussing and styled tables with stripes, multiple stripes, and even a checker board. Some of the examples we used are available here at the Samples section.

We will put all of this together next month to style responsive tables.

May 2013 Meeting Announcement -- Better Tables ... and an Epiphany

We will continue at the May meeting with learning how to style tables to be responsive. This month, we will get into some more complex table structures and styling, touching on accessibility as well as responsiveness. You could argue that responsiveness is a subset of accessibility, but regardless, the topics will mesh.

And as I have been working on this subject, I have had a chance to examine my own use of tables – and I don’t always like what I see. We will explore this month.

CSS Zen Garden is 10 years old today.

We have talked abut CSS Zen Garden in past sessions of our workshop. News today is that CSS Zen Garden is amazingly now ten years old. This site has been one of the great showcases of what can be done with cascading style sheets over good clean HTML.

In celebration, founder Dave Shea has re-opened the site for new submissions. There are new requirements, as pointed out in the blog post, and of course the possibilities are wider than ever with HTML5 and CSS3.

Give it a try.

April 2013 Meeting Report

We started the April meeting by looking at a site called The Internet Explorer 6 Countdown. By its own description, the site “is dedicated to watching Internet Explorer 6 usage drop to less than 1% worldwide, so more websites can choose to drop support for Internet Explorer 6, saving hours of work for web developers.”

We then wrapped up our look at the new CSS3 pseudo-element selectors with a brief review and then a video from SitePoint and Russ Weakley about CSS :NTH Selector.

We looked at some pages at w3schools.com with examples of these selectors. Each page has a “Try it yourself” page with easy interactive test examples. Try these four pages and experiment with different calculations:

• :nth-child() Selector
• :nth-of-type() Selector
• :nth-last-child() Selector
• :nth-last-of-type() Selector

We then began using :nth-of-type() to style a table. We will continue with this topic next month, using more advanced styling, and then getting to responsive tables.

April 2013 Meeting Announcement -- Stylish Tables

The next meeting of the PACS CSS Workshop will be Saturday, April 20, at our usual 9-10 hour. The main topic this month will be "Stylish Tables."

This month, we will finish up with the details of using :nth-child and its related pseudo-classes. We will tie up some loose ends from the last meeting, and then show how to apply :nth-child to tables. That will lead us to our ultimate destination, styling tables so that they are responsive.

CSS will also be the topic at the Web Design SIG that afternoon. Don't miss that meeting’s presentation on SASS. And be sure to check the Groups page on the PACS website at http://pacsnet.org/groups.php for more information on all the other sessions scheduled this month.

March 2013 Meeting Report

At the March meeting of the CSS Workshop, we continued working with the structural pseudo-classes introduced in CSS3. We started by using :nth-child combined with tags and descendant selectors so as to target specific items to be styled. We introduced the formula an+b as a way to calculate the pattern of selectors to be styled. The numbers can get a little confusing, but there are websites with examples to follow, such as CSS-Tricks.

We touched on another pseudo-class called :nth-last-child which works in the reverse of :nth-child.

We then started working with :nth-of-type, a pseudo-class that allows more specificity in the selectors to be styled. CSS-Tricks again has a helpful article called The Difference Between :nth-child and :nth-of-type that compares the two very nicely.

We will work with :nth-of-type at the next meeting as it will be the foundation of our next step in styling tables to be responsive.

March 2013 Meeting Announcement -- Styling the Right Children

The next meeting of the PACS CSS Workshop will be Saturday, March 16, at our usual 9-10 hour. The main topic this month will be "Styling the Right Children."

Last month we started looking at the :nth-child pseudo-class selector that is new to CSS3. We began with some examples that were not practical but were intended to get an idea of how the selector works. This month, we will get into some more specific examples of usage, with the aim of learning how to use this selector and others like it to style responsive tables. In the process, we will answer one or two questions that came up at our last meeting.

February 2013 Meeting Report

At the February meeting of the PACS CSS Workshop, we started with a general discussion about pseudo-classes. We previously worked with this topic when we were styling links and used pseudo-classes like :hover and :visited. Those are referred to as "interaction" pseudo-classes. With the table styling we are working on now, we will be using "structural" pseudo-classes.

We spent the meeting going through variations of styling a simple page with the :nth-child pseudo-class, going from the very general to slightly more specific. Next month, we will look at more details about using :nth-child, get into more specificity, and then consider whether there is a better option for our purposes.

February 2013 Meeting Announcement – Styling Children

The next meeting of the PACS CSS Workshop will be Saturday, February 16, at our usual 9-10 hour. The main topic this month will be "Styling Children."

We are working on responsive design, and our first example is tables. We are starting with "zebra striping" for tables, a way to make them more readable. Last month we looked at how we have implemented striping in the past. This month, we will work with CSS3 pseudo-selectors that make the process more efficient. With that behind us, we can then understand the techniques that some designers are using to make tables responsive.

Kids are welcome, but the children we will be styling are found in the DOM.