Update div class="header heading-tile

to have

For some reason the Active state isn't working on the List items anymore.

We should go about creating the active gray color with this:

background-color: rgba(0, 0, 0, 0.15);

The reason we should do this is because some for some List items (like Thumbnail photos), the active state actually displays on top. If we use the method above, then items will be darkened the same ammount as the rest of the List, instead of being covered by a solid gray color.

http://ionicframework.com/docs/components/#sidemenu

Need to update the colors to their base color, not the active state color which is darker. But, leave Light and Stable the way they are, as they would be too light if they used the regular base color.

Needs to show current examples that will be there

Similar to Issue #36 with text size changes and "news" area. Here are some specific updates:

• Update the "news" section to read, "First time using Ionic? We recommend reading our Guide, which covers all the basics of setting up an Ionic mobile app." linking to the Guide's page.
• Add "Guide" as one of the side menu links.
• Update the pre-footer options to "Components" and "Examples"
• Remove "Getting Started" from the footer links, and replace with "Components."

Here's a mockup for reference:

Please can you add some sort of RSS feed to your blog so we can subscribe to updates - it's pretty trivial in Jekyll.

Thanks 😄

Not hovering:

Hovering:

Placeholder for WIP of a theme generator

The Left Icon Tab Bar text could go up to 12px, which looks a little nicer visually, and is perfectly half the size of the icon next to it (24px).

The link can still stay full white (no transparency). Just the regular text will need a slight transparency added. Try opacity: .7;

some of the Outline Buttons don't display right

Needs some padding between each example

http://ionicframework.com/docs/components/#view-controllers

Keep scrolling down, everything is still faded out.

I think the “active”

text could even go to #333 for better contrast

add-

"margin-bottom: 10px;" to the ".docs-section .sub-links"

I also think each section should become "active" earlier than it is now. At the moment it only really gives you a couple seconds before the main Heading (along with its sub-links) is out of sight.

Maybe they should just list all the things that have advanced docs

We've talked about this before. If it's not too difficult/time consuming, I think it would greatly improve the experience for the user and help let them better know where they are. I'm starting to believe that in the not-so-distant-future, the best sites (and Docs) will be defined by great animations and experiences.

http://uxdesign.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/

This is my first pass at redesigning our current Examples page. Thoughts?

Add some top-margin the Content example text in the Docs so it’s not resting underneath the Header

Has @mlynch's stamp of approval. Here are the changes:

• Top nav font-size is now 13px
• The old "random links" section in the main page's Header area is now a "news" section that we can update to whatever we want, whenever we want to. Right now it reads, "Need icons? Check out Ionicons, our custom-built icon font made specifically for Ionic." and links to ionicons.com. The white bar behind it has these properties- background: rgba(255, 255, 255, 0.25); The whole area should be roughly 50px in height.
• New side nav items now have mini Headings like "Components" and "API" which are set to font-color: #aaaaaa; and letter-spacing: 1px; All of the text in the sidebar is also smaller now, and set to size: 12px; and line-height: 28px;
• Pull in the pre-footer design and change the links to "Read the Guide" and Community Forum"

Take a look at the mockup below for a clearer picture:

Can we update the Docs Grid preview to this:

border: 1px solid #DDD;
border-radius: 2px;

GUI has the border color for the Light swatch sett to #DDD

Should go back to the white, blurred background header we used to have...

• cut down on text
• fix scroll spy
• rethink grayed out text... ?

Update the “Start listening” text and music icon to the Assertive (red) default color

The link icon should be added to all the different section headings

Very descriptive I know.

When I'm reading a chapter of the guide, it would be nice to know where I'm at, and have the current chapter I'm in be displayed in blue on the left sidebar links. Currently all the chapter links look the same, no matter which chapter you're in:

Clicking 'Components' doesn't take you to http://ionicframework.com/docs/components/, same for 'AngularJS Ext' and 'Tutorials'

Add more Range examples and colors, ala the mockup: https://www.google.com/url?q=https%3A%2F%2Fs3.amazonaws.com%2Fuploads.hipchat.com%2F34259%2F234237%2FWkXGDAdsIXBc9gm%2Frange.jpg&sa=D&sntz=1&usg=AFQjCNGJk0TT9LFzMPMOz_XjF_iDu9MfpA

Light - white
Stable - gray
Positive - blue
Calm - turquoise
Balanced - green
Energized - yellow
Assertive - red
Royal - purple
Dark - black

We should use this Ionicon arrow: ion-arrow-right-c ( \f10b )

instead of the current ones being used:

Going through the Button section in the Docs and noticed that in all the examples (in the iPhone frame) some buttons don't have an active state or allow you to click them.

When you click a button that's in a List item, it displayed the active state for the Button and the List, but it should only be displaying it for the Button

Do we really need to use an image for the white strip on the heading tile for the docs, and why is it set as a background image on the body instead of just its own element?

It looks like the List items, when clicked, display some sort of box-shadow instead of just a plain color of #D9D9D9

See reference photo:

Add more Button bar examples other than the current Header one. Maybe also show a button bar outline example there too. COLORS

"* For a more extensive overview on Side Menu Controllers, read the Side Menu Controller Docs"

Feel free to close this if it's a work in progress, but the extensive overview link at http://ionicframework.com/docs/components/#sidemenu is broken (it's http://ionicframework.com/docs/controllers/side-menu/).

In the Tab Bar example, when you click "Edit" it should change to say "Done" to get out of edit mode.

@adamdbradley @mlynch

Okay, I'm really confused by the flow of the site. I had some time to step away and come back to something new, and was lost for a while. That said, I think it's moving in the right direction- it's just going to be a process. Here are some of my initial notes:

• "Forum" does not warrant a top level navigation spot. We will refer and link to it elsewhere (footer, homepage, within our docs, new CSS-created white bar area, etc.), just like we will do for the blog.
• Let's pull some things out.. New top navigation should be: Getting Started, Components, API, Guide
• I really love the animated scrolling in the Components section, as well as the new "active" trigger location. I know @mlynch disagrees, but I think we should lean on consistency and make API work this way. It's confusing going from one page to the next. It's still possible to link to specific API sections even if they're all in one scrollable page. To me, it was jarring and felt disconnected to the rest of the site.
• I think the Guide page can be the one exception to the rule, simply because it's more like a book. Each Chapter listed in the left sidebar should be active when you are reading it. I will design a nice "Next Chapter" box to sit at the bottom of each Chapter's page.
• These changes will unify the site experience. People will know what to expect, and feel confident navigating between the main pages (Getting Started, Components, AP, Guide).

They are a bit cramped and it's not obvious that the sublinks are clickable. Maybe make the font size bigger as well?