Sunday, April 28, 2013

Structure of the _s theme stylesheet

This is the structure I'm using for the stylesheet for the memepls wordpress theme which works off of _s theme from themeshaper.  The title of a section looks like this:
/* =Title Here 
----------------------------------------------- */

There's also a couple sub-sections that look like this:
/* Sub Section */

Now that that's established I'm going to post all of these and go through all of them and what should be posted under them.

/* =Global
----------------------------------------------- */
The css under here goes throughout the entire theme and doesn't change no matter the page.  So not very many ID or classes get styled in here unless they are in every page like .site for example.  Mainly fonts, borders, margins, and colors are styled for elements in this section.

/* Headings */
In the global section and is where the css for hr, h1, h2 or any other type of global header can be found.

/* Text elements */
In the global section and is where the css for paragraphs, unordered and ordered lists, textareas, code tags, and inputs are set.

/* Links */
In the global section and the area where links and all of the links actions (a:hover, a:focus, etc.) are styled.

/* Alignment */
In the global section and where .alignleft, .alignright and aligncenter are given their display, float, margin, and clear properties according to their name.

/* Text meant only for screen readers */
.assistive-text {
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}

I have no clue as to what this css does.  I might look it up later if I finish everything else quickly but as for now I'm just gunna leave this in hopes that some reader will do the research for me ;)

/* =Menu
----------------------------------------------- */
As you may guess, the menu (navbar) is styled in this section.  You'll find the .main-navigation tag a lot.  There's a bunch of empty css blocks in here like this:
.main-navigation ul ul li {
}
.main-navigation li:hover > a {
}
.main-navigation ul ul :hover > a {
}
.main-navigation ul ul a:hover {
}

Which I guess are supposed to be filled in by me once I add child menus and stuff.  It might be a smart idea to start from scratch with all of this so I understand more of what the fuck is going on (I get confused easily).

/* Small menu */
In the menu section and for the mobile menu.  This is set to none because the page is originally too big but as the page gets smaller to say the size of a phone screen, @media only screen and (max-width: 480px){}, I can display the menu.  All the styling work still needs to be done on my part.

/* =Content
----------------------------------------------- */
This is where all the css concerning the content of the page belongs.  .hentry would be a post, .entry-content is where the post's paragraph can be found inside, .entry-meta contains the post date, etc.,  .byline is used on span that wraps around the line of text that says who made the post, and the others can't be found on the page at the moment.

/* =Asides
----------------------------------------------- */
Not sure what the .format-aside is for but any .entry-title underneath it on the blog and archive page don't get displayed.  The aside tag is used in the sidebar though so css for the sidebar should go in here.

/* =Media
----------------------------------------------- */
The section where any images, videos or any other type of media should be styled.

/* Make sure embeds and iframes fit their containers */
Under the media section and where the css for embed, iframe and objects goes.

/* =Navigation
----------------------------------------------- */
Where the css for the next and previous buttons in the content section goes.

/* =Comments
----------------------------------------------- */
Any css having to do with the comments area goes in here.

/* =Widgets
----------------------------------------------- */
Section for styling widgets.

/* Search widget */
Under widgets section for styling the search button.  Currently it's just not displaying the submit button for the search box with:
#searchsubmit {
    display: none;
}


/* =Structure
----------------------------------------------- */
Imo the most important css, which gives us a two column layout when displayed on a full size computer screen (will turn different if browser is shrunk a lot).

/* =Mobile
----------------------------------------------- */
Added this in myself and is where the css for when the browser shrinks goes:
@media only screen and (max-width: 480px) {
#secondary, #tertiary, .site-footer{
clear: both;
width: 100%;
}
}

@media only screen and (max-width: 959px) {
#secondary, #tertiary, .site-footer{
clear: both;
width: 100%;
}
}

So when it shrinks the #secondary (sidebar), #tertiary (underneath), and .site-footer will drop underneath the content and have their own row.

And that's it for an explanation.  Here's the complete current css so anyone reading might kind of understand: http://pastebin.com/ASG6rJTZ

Now that I've gone over everything I feel much more confident about finally styling the theme and putting everything in the proper section/sub-section.  I should probably create new ones as needed too.  Well that's it for this post.

No comments:

Post a Comment