Jump to content
Sign in to follow this  
slingr

Listing and Map of Framework ID and Class Selectors

Recommended Posts

slingr

For my own purposes I created a list of 34 ID and 156 Class Selectors found in the Framework style.css. I've sorted them in alpha order as well as in the order they appear in the stylesheet. I've also created a map of how the standard page is partitioned by 12 ID and 14 Class Selectors, as well as the 3 Pagelines settings (body, page, and content). I make no claims of accuracy or completeness, but some might find this to be a helpful resource. I'll be happy to update it as errors and omissions are identified. Below is a small jpeg of the map. The full size image and pdf of the map, as well as the listing of the selectors and the Excel file I used for sorting can be downloaded at http://ndividuate.com/pagelines-framework/ Moderators, if there's a better way to post a larger version of the listing pdf or map on this forum, let me know. Or, you can download and put them wherever you think appropriate. PLF-id-classes-map-580.jpg

Share this post


Link to post
Share on other sites
slingr
I should've mentioned: To interpret the map, the four corners of each selector's boundary is depicted by the name of the selector (class selector starting with a .period, ID selectors starting with a #hashtag). Note that some areas of the page are defined by up to 4 or 5 different selectors. The list of selectors includes both descendant and child selectors because of the way I sorted based on the . periods and # hashtags. So it's not perfect, but I think the list at least serves as a starting point that might save some time.

Share this post


Link to post
Share on other sites
slingr
[b]Update:[/b] the original listing I posted on Dec 14 included only those selectors identified in the stylesheet (style.css) for Pageslines Framework 2.0. I've just posted Rev1 to the list that adds 10 IDs and 23 Class Selectors from the Page Templates for Banner, Box, Carousel, Feature, and Highlight. These are now listed at the bottom of the Excel and PDF files you can download at [url="http://ndividuate.com/pagelines-framework/"]http://ndividuate.com/pagelines-framework/[/url]. The partitioning map (shown above in my original comment) wasn't affected, although some of the selector-defined areas shown on the map were not included in the original list. Don't know how I let that happen. If you want to create a list like this for yourself for another theme, stylesheet, or template, here's the process I used. It looks complicated, but if you know your way around Word and Excel it's not that difficult. (It actually took longer to write up the process than to do it.) 1. Copy the contents of the style.css file into a Word document. (You could use any text editor as long as you can easily insert line breaks or carriage returns.) 2. In Firefox, open a sample page from each of the Page Template pages (Banner, Box, etc.). Using Firebug, inspect each page and copy the contents of the HTML source. (I suppose viewing Page Source with "CTRL/CMD U" would do the same thing as using Firebug Inspect.) 3. Paste the source HTML content from each Page Template to the bottom of the Word document. 4. With the contents of all the Page Templates now added to the Word document, perform two Find/Replace searches to: A1) FIND:# A2) REPLACE WITH:^p# [don't forget the #] B1) FIND:. B2) REPLACE WITH:^p. [don't forget the .] These Find/Replace actions find each of the ID Selectors (prefaced with the # hashtag or pound symbol) and Class Selectors (prefaced with a . period) and inserts a line break or carriage return in front of each selector, which puts the selector on a separate line. 5. Copy the contents of the Word doc and paste into an Excel spreadsheet at cell B2. 6. Manually type in the first few row numbers in the cells in column A, then fill the contents down the entire column. This preserves the original order if for some reason you need to sort by the original order later. 7. Sort alphabetically on the column that contains the data (should be column B). 8. Delete all the rows that don't begin with either an ID or Class selector (# or .). 9. Identify duplicates by adding the following formula in the column immediately to the right of the data column (should be column C) beginning in the SECOND row of data (this assumes column A contains the row number and column B contains the data): [b]=IF(B2=B1,"xxx","")[/b] [The logic is: [i]If the contents of cell B2 equal the contents of cell B1, insert xxx into the contents of this cell. Otherwise leave this cell empty.[/i]] This formula needs to be copied down to every row of data, except the first. Duplicates are then identified by "xxx" in the cells in column C. 10. Since the values in column C are actually the result of a formula, you can't sort on column C. Instead, you need to first copy the entire column and PASTE SPECIAL as VALUES in the column to the right (column D). After you verify that the two columns appear to be identical you can delete the column C cells that contain the formula. 11. Now you can sort on the column with the "xxx" contents, then delete all the duplicated rows that contain the "xxx" cells. 12. You're then left with a list of the ID and Class Selectors. This isn't a clean list in that it will contain child or descendant selectors in addition to just the selectors themselves. But you may want to study these better understand how the selectors are specified within the stylesheet or templates.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×