Stacked icons

[Anachron]

I've just setup this fiddle to demonstrate how that could work out: http://jsfiddle.net/kuajqc0d/6/

This would allow to easily mix icons together.

I've already suggested it here:
FortAwesome/Font-Awesome#1181

[cazzoo]

Wow, really smart implementation. I think It can be easily improved with LESS with main and laternative color for icon and sub/stacked-icon.

[Anachron]

It's just a quick&dirty proof-of-concept, just want to collect some feedback. 👍

[Anachron]

@cazzoo I'm getting crazy, help me! 💃

http://jsfiddle.net/kuajqc0d/9/

[jlukic]

No reason not to include this. Its extremely easy to code and useful. I'll sneak in 2.0

[Anachron]

Thanks @jlukic!

[jlukic]

Although these are nice, they probably wont work in a variety of circumstances where icons inherit sizing from other elements like labeled icon menu, icon header etc. I'm not sure how viable that makes them.

[Anachron]

You may want to play around with it. You could make it 30% of the "parent icon" and push it to bottom right. This code is just quick&dirty.

[jlukic]

Yeah for relative sizing to work, the icon would have to be a child element inside another icon, so we have two scenarios. Sibling stacked icons , which would have similar grouped html as other groups, and sub icons which would be an icon nested inside another icon.

I still need to test some things out.

[Anachron]

@jlukic do you mind posting a jsfiddle example of your implementation?
I want to mess around with it and give you some feedback. (Also test on mobile)

[jlukic]

Yeah on mobile now, will do when back at office.

You can find html examples before then in the docs repo under branch next.

[Anachron]

@jlukic is there a preview of next somewhere to watch online? Or do I have to build it myself?
(Semantic-Org/Semantic-UI-Docs@b28b48e)

[jlukic]

No, but ill make a jsfiddle sorry its been a busy week.

[Anachron]

@jlukic how is it going here? :)

[MrFusion42]

@Anachron you can take the raw build files from the next branch and use them through rawgit.com. With that, you can create a jsfiddle or codepen.io to experiment.

Here's the CDN links to the latest builds in the branch next:

Minified
https://cdn.rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.css
https://cdn.rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.js

Non-Minified
https://cdn.rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.css
https://cdn.rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js

Kitchen Sink test page
Unfortunately, the kitchensink test page has been moved in the repo so the relative path to semantic.css needs to be edited (easily done through the browser's inspector, just prepend ../).

Here's a patched version of the kitchensink (I just modified the CSS/JS/image paths).

[jlukic]

I haven't spent too much time on this, but you can see some examples here
http://beta.semantic-ui.com/elements/icon.html#icon-group

I'm still updating some of the examples so they have moved around temporarily.

But there will be some new examples

[jlukic]

I'm happy enough with the current state of grouped icons

@Anachron If you see any easily correctable issues for launch related to icon groups feel free to let me know.

[Anachron]

@jlukic was giving it a go, however, the navigation seems to be broken in next:
http://beta.semantic-ui.com/elements/icon.html#/definition

Clicking on item groups on the sidebar (Groups > icons) actually throws me back to the list of icons (wrong link).

Edit: Other than that, it seems good to go!

[jlukic]

yeah, the anchor links dont check to see if they are uniquely named. since they both have the same title its linking back to the first one.

I'll need to have fix it to generate the link as #icon2 or something.. I'll put it on the list.