Advertisement:
A2Hosting

Author Topic: Great styles from SitePoint  (Read 1025 times)

Offline Joshua Dickerson

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,663
  • Gender: Male
    • joshuaadickerson on LinkedIn
Great styles from SitePoint
« on: December 08, 2011, 12:56:10 PM »
Hey, someone just sent me a cool ebook on jQuery. In it, it contains "Conventions used in this book".

Instead of trying to copy it, I've taken some screenshots and attached them.

The first two show some code styles. I'd really like to adopt something like this when we show code.

The last one is my favorite. I'd like to have some easily identifiable icons like these. As well, I'd like to have a place which explains what these icons mean. Maybe even use the same categories for the icons (not the same icons)?
Need help? See the wiki. Want to help SMF? See the wiki!

Did you know you can help develop SMF? See us on Github.

How have you bettered the world today?

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,349
  • Master of BBC Abuse
Re: Great styles from SitePoint
« Reply #1 on: December 08, 2011, 01:56:10 PM »
Those icons are megafugly. :P

What's so great abut the code styles? They're just basic blue boxes.
President for life - Righteous League of GitHub Haterz

 "Seems brilliantly designed to match the intuitions of demented ferrets"

Offline Joshua Dickerson

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 12,663
  • Gender: Male
    • joshuaadickerson on LinkedIn
Re: Great styles from SitePoint
« Reply #2 on: December 08, 2011, 03:20:15 PM »
You're megafugly :P Sorry, I had to.

I like how basic but understandable their style is.
Need help? See the wiki. Want to help SMF? See the wiki!

Did you know you can help develop SMF? See us on Github.

How have you bettered the world today?

Offline AngelinaBelle

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 7,130
Re: Great styles from SitePoint
« Reply #3 on: December 13, 2011, 08:56:03 AM »
Here's what code snippets look like in the wiki right now.
It has a link for selecting the contents of the code block, which can be pretty useful.
It has only a border before and after to set it off from the surrounding text.

One feature the wiki provides is "mbox", a series of general purpose templates for creating message boxes.  They come with a default set of icons to denote that the box is anything from "informational" to "clean-up notice"  We have not used this for code.
Generally, the use of icons interrupts the eye even more than changes in background formatting, so we have not used them for this purpose.

I think the argument can be made that if we continue to use the fixed-width font, and add a "bg2" style for the code block, we can drop the text "Code:". A header line, which could be used for file names, or for instructions like "find" and "replace" could certainly be implemented.
We would still need an anchor for the "Select" feature, and would need it to be available whether or not the code block was used with file names or find and replace instructions.

« Last Edit: December 13, 2011, 09:10:23 AM by AngelinaBelle »
If you do what you've always done, you'll get what you've always gotten. -- Anthony Robbins