Foundation-sites: Rounded buttons - Prototype Utilities

[RinatValiullov]

How to reproduce this bug:

1. Included last version *.min.css of framework in *.html file
2. Set class on buttons - _.rounded_
3. Nothing was changed...
4. Tried to find this class on official docs, but didn't find this one there...

What should happen:

Wanted to set buttons with rounded corners

What happened instead:

Couldn't set rounded corners on buttons with helper class: _.rounded_

Browser(s) and Device(s) tested on:

Chrome 61.0.3163.100 (64 bit) (Windows 7)

Foundation Version(s) you are using:

6.4.2

[IamManchanda]

Just to be clear he faced issue while making this => https://codepen.io/IamManchanda/pen/GMJxXN

[IamManchanda]

cc @kball prototype utilities are not well mentioned in the docs!

[RinatValiullov]

Ok, thanks

[Deckluhm]

This is the part of the docs you are looking for: https://foundation.zurb.com/sites/docs/prototyping-utilities.html#component-styling

But note that you also need to enable prototype mode if you want to use this (and any prototype utilities): https://foundation.zurb.com/sites/docs/prototyping-utilities.html#enabling-prototype-mode

I also recommend you to read the introduction part of the Prototyping Utilities section. It's pretty important to understand why these utilities exist but also why you shouldn't use them in production.

Happy coding!

[IamManchanda]

@Deckluhm But man the thing is that he was facing issue as didn't know how to replace
foundation-prototype.min.css file with foundation.css
We have to agree that we are not making things clear!

Secondly I would argue that,
Component Styling Section should be also in respective component section
( with an alert that this is part of prototype utility and disabled by default )

Thirdly, there is no video tutorial for this section unlike other sections!

[IamManchanda]

Plus the prototype introduction page is so long ( and I am sorry to say this @rafibomb ) that the demo get's hidden. I have to scroll through 5 pages to get to the first demo
Is the same thing happening with Flexbox Utilities?

{ I would suggest that introduction part should be moved to an article by zurb or at medium }
@kball Would love your thoughts on this!

[RinatValiullov]

it would be well, Iam!

[IamManchanda]

Awaiting reply @rafibomb ... I think we need a video tutorial for this page here!

[rafibomb]

I am open to moving the intro section somewhere else, for launch of a new major feature it helps to have it on the docs page for a few releases.

@IamManchanda Since you know the most about the feature, can you help with a small outline of what this page needs in terms of a tutorial video?

[rafibomb]

Also - I don't see any foundation-prototype.min.css, where does this come from?

As far as I know, the custom download allows you to include in the prototype classes into the main foundation.min.css

[IamManchanda]

Also - I don't see any foundation-prototype.min.css, where does this come from?

@rafibomb This is coming from here
https://github.com/zurb/foundation-sites/tree/develop/dist/css

[IamManchanda]

@IamManchanda Since you know the most about the feature, can you help with a small outline of what this page needs in terms of a tutorial video?
@rafibomb

For Classes,

1. Button ( Radius/Rounded, Bordered, Shadow )
2. Switches ( Rounded ) - Coming in v6.4
3. Cards ( Radius, Bordered, Shadow )
4. Tables ( Radius, Bordered, Shadow )
5. Images ( Radius )
6. Arrow Utility ( Top, Right, Bottom, Left )
7. Separator ( Left, Center, Right )
8. Font Styling - here
9. List Styling - here
10. Text Helpers - here
11. Margin & Padding Helpers
12. Sizing
13. Border None ( Callout )
14. Display, Positioning & Overflow

For Mixins,

1. Box Mixin - here
2. Rotate Mixin - here
3. Relational Mixins - here

[IamManchanda]

Also when you do @rafibomb ... Please would be greatfull if you add the codepen's too as this page is missing that too :D

( Component Styling should surely have the codepen's )

I am open to moving the intro section somewhere else

Would it be ohk if I move Introduction, and Enabling Prototype Mode section to medium articles and start with just 1 scroll for the demo?