Semantic-ui-react: Basic semantic-ui examples

[bali182]

It would be very nice to have the basic sui examples ( http://semantic-ui.com/usage/layout.html ) using these components. It would be a really big help (even without any business logic).

[levithomason]

Indeed, let's leave this one open. I'd like to add some examples. We get a lot of questions about CSS especially. I also think it would be good to add some minimal Webpack examples.

• [x] Port SUI Core layout examples
• [x] Basic Webpack project example
• [x] CDN CSS example
• [x] semantic-ui-css example

[bali182]

I'm actively trying to recreate some of the samples, if I have some completely recreated, I'll make a PR

[iamcaleberic]

@levithomason @bali182 would like to help with this

[levithomason]

Awesome, PRs very much welcomed. I'd like to have the SUI core layout examples in the /docs app with a link in the docs sidebar. The rest of the examples are really full project examples, I'd like to add these to a new directory, /examples, with a sub directory for each.

[bali182]

Sorry, I kinda forgot about this... I started recreating the login example, component names are spot on, everything was easy to find. However it doesn't really look like the original example:

https://gist.github.com/bali182/c05da546c2b16e74e5c8e9ca1ec3b613

I get the background, but the positioning is weird.

[iamcaleberic]

@levithomason thanks for clarifying I'll keep working on it

[levithomason]

@bali182 there is sometimes a small amount of override CSS applied to those examples. I'd inspect the elements and check their styling. It is likely that the original examples include some CSS that is not coming from the CSS framework.

[iamcaleberic]

@levithomason is the menu item for layouts correctly placed

https://github.com/iamcaleberic/Semantic-UI-React/tree/layout_examples

[levithomason]

👍 Looks great

[iamcaleberic]

@levithomason Do you want to add the layouts page after all the layouts are complete or i can make a pr for it thought it has placeholder links?

[levithomason]

I'm a fan of rapid small steps. If you have even one layout working and the link, we can get that merged.

[iamcaleberic]

@levithomason Alright no problem thanks

[levithomason]

@iamcaleberic would you like to open a PR with what you have so far and we can get it merged?

[bobbyz-dk]

Would be very, very nice with an example of using semantic-ui-css. If someone could get me started I would love to help with it.

[iamcaleberic]

@bobbyz-dk to start you off you can checkout my page in the iamcaleberic.github.io/app/src/App.js folder check the import of semantic css. Alternatively you can the add the cdn for semantic-ui-css in your root index file

[iamcaleberic]

@levithomason having a bit of an issue with the view source