Improving CSS

[cdukes]

Hi,

I'm going to be working on the styling for a client's project, based off of Telescope. We'd like to submit a pull request once we've developed (what we hope will be) a modified theme, with broader cross-browser compatibility and fluid design.

Do you have any preferences/suggestions on how to go about tinkering with the styling files, to optimize upstream compatibility?

Thanks,
~Cooper

[SachaG]

Sounds great! I don't have any rigid guidelines about how to manage the CSS, but if you're going to use SASS/Compass I generally stick to these rules:

• Separate styles in many files
• Try not to nest CSS declarations too deep
• Make good use of mixins and other SASS/Compass features to make code easier to maintain
• Prefix CSS classes with the element they apply to (i.e. post-comment, post-title, post-share, etc.)
• Use Twitter Bootstrap class names and markup whenever possible even if I'm not actually using Bootstrap myself, to keep things standard and make it easier to use it if you want to.
• Never use IDs in CSS
• Try to keep structural and visual CSS code separate (although in practice that's really hard to do)

I think you can either build on my CSS or start from scratch. Telescope uses a lot of repeating elements so it's not as big a task as it might seem.

In any case, you can ping me on skype (username: SachaGreif) or contact me through my site if you want to discuss this more.

[SachaG]

On a related note, I'm planning to make colors easily customizable through the settings panel later on. Maybe something to keep in mind for your redesign.

[cdukes]

Hi,

We've tweaked the styling and display in this fork: https://github.com/Inneo/Telescope

There are a bunch of structural and styling changes throughout the clients/ folder, with an overall goal of writing more modular CSS. For instance, we:

• moved everything to fluid width and got rid of most @media queries
• started moving all colors to the variables.scss file (which should help with making colors an admin option)
• tried to move to relative and percentage-based spacing where possible
• implemented a more consistent layout of header > section > section > section > footer, each with a centered wrap
• tried to cleanup the header menus, to prevent overlaps

Please look our fork over, and let me know if you'd like me to commit any of it upstream.

Thanks,
~Cooper

[SachaG]

Wow, that sounds great! I'll take a look as soon as I can and get back to you. I'm not sure about having everything be fluid width, but other than that those all sound like things I should've done myself a long time ago. So thanks!

[SachaG]

I don't know if I'll have time to look at the changes one by one, but it would be great if you could submit a pull request with all the changes that are purely functional (i.e. moving all colors to variables.scss) and not cosmetic (i.e. getting rid of the mobile version and media queries). Basically, I would prefer keeping the site the same visually, at least for now.

But if that's too much work, maybe you can just keep working on your fork and I'll reintegrate your best ideas manually in the master branch later on.

[SachaG]

I'm going to do a better job of managing the Telescope community in 2013.
For starters, I've just created a new instance of Telescope where the
community can discuss features and ask questions:

http://meta.telesc.pe/

Of course you can keep using GitHub as well, especially for bug reports.

On Fri, Dec 21, 2012 at 4:09 PM, Cooper Dukes notifications@github.comwrote:

Hi,

We've tweaked the styling and display in this fork:
https://github.com/Inneo/Telescope

There are a bunch of structural and styling changes throughout the
clients/ folder, with an overall goal of writing more modular CSS. For
instance, we:

• moved everything to fluid width and got rid of most @mediahttps://github.com/mediaqueries
• started moving all colors to the variables.scss file (which should
  help with making colors an admin option)
• tried to move to relative and percentage-based spacing where possible
• implemented a more consistent layout of header > section > section >
  section > footer, each with a centered wrap
• tried to cleanup the header menus, to prevent overlaps

Please look our fork over, and let me know if you'd like me to commit any
of it upstream.

Thanks,
~Cooper

—
Reply to this email directly or view it on GitHubhttps://github.com/SachaG/Telescope/issues/59#issuecomment-11604507.