October 2013 Meeting Report

After some internet access issues, which might have been related to the disruption in the Northeast, we started our meeting by looking an example of the use of the :first-child pseudo-class selector. We used an example that a member prepared after using this selector to fix a formatting problem with a webpage. The example is uploaded in the Sample Files section of this site.

The problem was that the first paragraph of each section did not line up at the top of the section because of the top margin. We noted that the problem could be solved by adding a class to each of the top paragraphs, but to have a template where the problem would be fixed any time new text or a new section was added, using p:first-child { margin-top:0; } would let you paste any new content and get the desired result without adding additional markup to the text.

In the process, we also looked at two CSS3 styles, column-count and column-gap. Use the example to see how changing the numbers changes the appearance. To learn how to use these styles, use the examples at W3 Schools.

The example also gave us the opportunity to discuss vendor prefixes, –webkit and –moz. You can see the effect in the sample file by commenting out the lines with those prefixes and opening in different browsers.

We then turned to flat design by looking at some examples of flat versus skeuomorphic design, such as this article Skeuomorphic Design: What it is, Who uses it, and Why You Need to Know. We will have more on this topic next month.


October 2013 Meeting Report — 2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *