Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

NC for Hire

With the mandatory migration to 3.0 looming and so much to learn about responsive design, it can be difficult for Ning Network creators to understand which CSS units to use where, and when, on their network pages. The instinct (i keep encountering with NCs who call me) is to use just one system for everything or to just copy your 2.0 CSS over and hope that it works, but that decision can severely limit the execution of your designs and have a negative impact on the ways your community engages with your network.

So, what follows is a list of suggestions, not absolute rules. If you have a differing opinion or working practice (and a rationale to back it up), please share in the comments below.

 

When to Use Pixels (px) in Advanced CSS:


Use for: hairline borders and general elements when creating fixed-width designs; values for CSS shadow displacement. Avoid using in @media breakpoints, as doing so breaks pages when they are zoomed: use rem or em instead.
Don’t use for: typography. (Exception: setting a base font-size in a CSS reset).

 

When to Use Percentage (%) in Advanced CSS:


Use for: making responsive images and containers; setting height on the body in some cases.
Don’t use for: typography. (Exception: font-size CSS reset.)

When to Use em ex in Advanced CSS:


Use for: typography, and elements related to typography (margins, for example), with the understanding that em and ex have a subtle “gotchas” when used in complex layouts. Consider using rem as an alternative.

Points and picas

Use for: print stylesheets.
Don’t use for: anything else.

rem


Used as: a more robust and predictable alternative to em and ex, and employed for the same purposes, including @media query breakpoints.
Don’t use: if you wish to support IE8 and earlier. (Or, use the unit but include a polyfill)

Viewport units (vh & vw)

Use for: responsive typography; “perfect” responsive containers.
What not to use the units for is difficult to determine, as vh & vw are very new and have yet to be fully exploited in web design. Do be aware of their lack of support in IE, and allow for fallbacks.

Inches (in) and Centimeters (cm)


Use with: print stylesheets, especially page margins
Don’t use for: anything else.

Character (ch)

Use when: sizing and adjusting monospaced fonts. Be aware of browser support limitations.

Grid (gd)


Use for: experimental layouts; the unit is only supported in IE10+ at this moment. Polyfills are beginning to appear, however.

Raw numbers


While almost every CSS property requires that the measurement system be specified in the declaration, a few are best used with plain integer or floating-point values. In particular, line-height and border-image should be used with raw numbers.

This post is simply mean to be a good bookmark to reference and I hope it helps with your CSS decisions while preparing your Ning 3.0 network for migration.  Have a great weekend NCs!  Let me know if you need help with your community design.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

This reply was deleted.

Announcements

 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Fabricio Giugni posted a discussion
Hi there,  Can we integrate the Builderall with Ning? The only thing I want from Ning is the abilit…
yesterday
Fabricio Giugni replied to Fabricio Giugni's discussion
How can I add video from Youtube on landing page?
"Hi,
    Thanks, it did work. But I will create this page in some other place. I spend a Thousand do…"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
TRICK: Host Your External CSS and JS Files using Dropbox
"I no longer use Dropbox for this...   I use Github....  ask me how if it is too complicated for you…"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Create a More Exciting "Featured" Email With Language Editor

still one of the most powerful tools and one of the first things I change when I start a new comm…"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How to Give Your Ning a Really Fake Voice
"These days I use Speakpage and it provides a great on the fly service, but it is limited to a singl…"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How to Create Search Feeds in Bing with a Simple Hack
"thank you brother"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
How-to Control Number of Member Profiles on Member Page Using CSS
"Wow... just look how active Creators used to be!"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
You May Not Know This About Facebook
"this tip worked well for me today again"
Thursday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Linkedin Tip: Export Your Contacts For Import Into Ning
"yes it most definitely does work on both"
Thursday
⚡JFarrow⌁ updated their profile
Thursday
⚡JFarrow⌁ replied to Fabricio Giugni's discussion
How can I add video from Youtube on landing page?
"Simply right click on the video and open HTML/CSS then find the line where the youtube video URL is…"
Thursday
J.Ayvar replied to Anastasia_Ning_Support's discussion
Join our webinar on SEO
"Thank you!  i am wating for the webinar. Just 5 minutes :)"
Thursday
More…

Meanwhile, you can check our social media channels