We're growing into something new. Read More

Chris Michel

Critique My Icon Set

### Update 2 ### Thanks to some feedback from the amazing @asenderzon, I pushed the icons a bit further by going down to 2 colors only and simplifying some of the diagonal patterns. Overall, I think it improves the icon consistency and makes them feel even more like a family. Looking forward to hearing what everyone thinks of the update!


Foundation 4 Docs: Feedback Requested

We'd hinted at a few features and sneak peeks pre-launch, but now Foundation 4 is live! People have been using it for a couple weeks and we've seen good feedback floating around. But there is always differing opinions with things like documentation. So, we wanted to share a link to the docs on here and ask for you guys to click through them and come back with feedback. Here's the type of feedback we want: • **Does the navigation make sense?** How would you change it, what would you leave? • Are the __explanations and examples clear?__ • __Does the structure of each page make sense?__ Can you find everything you need?

Foundation 4 Component: Switches

Hello fellow people of Forrst! Today, I want to show you a bit of code that was recently merged into Foundation 4 from a very helpful contributor, named ghinda. He's also a member of Forrst, so give him some props if you get a chance: http://forrst.com/people/ghinda. One of the new UI elements we're adding into Foundation 4 is Radio Switches. These are used commonly on iOS and other sites across the web and literally just represent a radio input element. The neat thing about this code is that it is written completely mobile-first, meaning devices that don't support media queries will get normal radio elements. I included the Scss snippet and a sample HTML page that you can use to test this out quickly. **Here's the feedback I'm looking for:** * Is the code as efficient as it could be from an Scss point of view? * Are there any options you think are missing from this UI element? * What do you think of using button styles to help style these? * Should we have unique style just for these elements instead?


// Button Variables
$mainColor: #2ba6cb !default;
$primaryColor: $mainColor !default;
$secondaryColor: #e9e9e9 !default;
$alertColor: #c60f13 !default;
$successColor: #5da423 !default;
$shinyEdge: rgba(#fff, .5) !default;
$darkEdge: rgba(#000, .2) !default;
$btnBase: 10px !default;
$btnTinyBase: 5px !default;
$btnSmallBase: 7px !default;
$btnLargeBase: 15px !default;
$btnFontColor: #fff !default;
$btnFontSize: 14px !default;
$btnTinyFontSize: 10px !default;
$btnSmallFontSize: 11px !default;
$btnLargeFontSize: 17px !default;
$btnTransitionSpeed: .15s !default;
$btnTransitionEase: ease-in-out !default;
$btnRadius: 3px !default;
$btnShinyEdge: 0 1px 0 $shinyEdge inset !default;
$btnDarkEdge: 0 1px 0 $darkEdge inset !default;
$btnBorderWidth: 1px !default;
$btnBorderStyle: solid !default;
$btnAlignIndention: 12px !default;
$btnDisabledOpacity: 0.6 !default;

// Button Functions
@function btnSidePad($btnSize) {
  @return $btnSize * 2;
@function btnBtmPad($btnSize) {
  @return $btnSize + 1;

Foundation 4 Scss Button Mixin

Hello fellow Forrsters! We're in the midst of writing Foundation 4 here at ZURB and I'd like to share our new button mixin with you guys. The code I'm sharing with you will work if you paste it into any Scss project that uses Compass so feel free to try it out. What you're seeing is the existing Foundation button styles turned into an Scss mixin that gives you just enough control to create awesome buttons without being overly complex. You can see the existing code on line 1-53 here: