CSS Workshop Combining with the Web Design SIG

After several years running, the CSS Workshop is going to end and be folded into the Web Design SIG. At our recent meetings, we have been moving back and forth from pure CSS topics to more general web design, so it makes sense now to bring the subject matter under one group. Web Design will meet at 9-10, the former CSS hour.

The Web Design SIG has a site at webdes.pacsnet.org. Follow the group's news there starting with the September meeting.

In place of Web Design in the afternoon, we have a new SIG devoted to WordPress, the amazing blogging and content management system. This SIG will give members an opportunity to start from the beginning and move through the steps of using this platform.

Finally, the Javascript SIG, which was so successful, has come to its end. In its place will be the revived HTML SIG at 11-12. This group will concentrate on the foundations of a website. If you have attended the CSS Workshop and maybe not have quite grasped the concepts, this SIG will provide a better understanding of the underlying structure of a webpage and give you a better idea of how pages are then styled.

PHP and Social Media will continue at the same times as last year.

All of the SIG's have individual websites which can be accessed at http://pacsnet.org/groups.php.

June 2013 Meeting Report

At our June meeting, we finished up our look at styling tables to be responsive. We took four examples and applied their techniques to a sample table. Two of the examples just used CSS, while the other two also employed Javascript. The examples required some editing of the sample HTML in order to work, and the results varied in quality. But these samples showed how data in a table can be reconfigured in ways that make the information accessible on a small screen.

The samples we used were:

• Responsive Data Tables by Chris Coyer
• Responsive HTML Tables by Jared Cunha
• Build a Responsive Table Using Only CSS by Michael Musgrove
• jquery.webks-responsive-table by Julian Pustkuchen

Give these a try by copying and pasting the CSS and scripts into a simple table, then check their HTML to see what has to be modified in your sample table. Then try adjusting for different screen sizes. And do a search for other solutions.

We will continue this group in September as the Web Design SIG. The afternoon session will be the new WordPress SIG. See you then.

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.