Are you planning on for 1.0 making this awesome framework mobile first like Bootstrap & Foundation. Right now I'm having to use the grid system from foundation and combining it with Semantic UI.
dragonfire1119
All 10 comments
"Mobile first" is a buzz phrase. It actually refers to an implementation detail, rather than the performance/appearance /usage of css.
Currently you can add the "stackable" class to a grid, and it'll stack into full width columns on mobile. It's planned to allow different mobile/tablet/computer styles for columns, or the grid in general. See this discusion
brigand
on 22 Dec 2013
@brigand I've just heard that phrase that bootstrap and foundation throws around allot thanks for the insight on what it means. Ok so the 1.0 will have the same kind of functionality that Bootstrap & Foundation will have then. Or did he already add it? Thanks for the response.
dragonfire1119
on 22 Dec 2013
It's currently under development in another branch. There's a link in the discussion I mentioned.
brigand
on 22 Dec 2013
Elements have specific responsive definitions for mobile. Not all elements automatically use responsive behavior in their neutral base form as all things in semantic are implemented on an case-by-case level per element.
Responsiveness is typically included as several different variations allowing you to describe how the element changes with screen size.
For instance with ui grid you can use mobile only row/column or stackable grid/row or doubling grid/row , to achieve responsiveness for mobile. This is not prescriptive and doesn't happen automatically, you would have to decide whether this is useful on a case by case basis.
Tables are responsive in their standard form without any variations (check them out at a small browser window).
Menus will have responsive variations which will automatically switch them from horizontal to vertical, but this is not completed yet.
I'm not sure about responsiveness requirements of any other elements.
jlukic
on 22 Dec 2013
Ok the only thing right now that I'm trying to make work in your framework is as example lets just use bootstrap gird. I want a menu column on the left for my menu col-lg-4 and then I want the rest on the right col-lg-8 ok that works in bootstrap but in ui I have column width on the website well that doesn't stack so it want work on mobile.
The stackable stuff doesn't seem that flexible. I've read the website I just can't find anything thing that works like bootstrap or foundation in it for version 0.10.3. Maybe I'm all wrong and you have something I just can't find in the framework or I'm not thinking right?
I completely understand the responsiveness on the ui elements and right now that looks good but I'm trying to accomplish is stacking the ui elements when the browser goes down in width? Thanks for the support.
dragonfire1119
on 22 Dec 2013
I have one more query adding to this topic, is it possible to use stackable ui grid inside page grid? The UI is getting distorted doing so. Since we can have two column for desktop and tablet view and stacked column in a mobile. I could not find any documentation related to this approach.
indvinoth
on 25 Dec 2013
A lot of the documentation uses stackable page grids. Can you show an example of it not working in jsfiddle?
jlukic
on 25 Dec 2013
@jlukic Yeah sorry I was wrong :) Looked the documentation code, I didnt wrap the stackable grid under a column in page grid. Thanks for your reply and support.
indvinoth
on 25 Dec 2013
While "Mobile first" may be considered a buzz phrase, it means that the developer doesn't have to fiddle with complex coding, like with switching of menu types between screen sizes. Something I, as a Semantic-UI beginner, am really struggling with, but that was a relative breeze with Bootstrap.
Let me give you an example. I want my site's navigation to be a header-row of menu buttons on the desktop, but switch to a hidden sidebar menu on mobile. I don't want to have two sets of menus and a visibility toggle based on screen size. The menus are complex, and nested. This has proven to be impossible with vanilla Semantic-UI (but was relatively easy with Bootstrap), so yes, "mobile first" may be a buzz phrase, but it does also mean that common problems have been thought thru by the designers.
I think Semantic-UI will benefit immensely from a few more starter templates that resolves these initial navigation headaches, and you'll see a lot more people switching over to use the otherwise feature rich platform.
dearsina
on 5 Jul 2016
I have found the same frustration with Semantic UI. At first I loved Semantic-UI but after fighting with it only to learn you have to create two different menus to get mobile and desktop ui support out of the box I am now thinking of going to foundation.
Firegarden
on 20 Jan 2017
Related issues
iPaoo
路
3Comments
rdzidziguri
路
3Comments
Morrolan
路
3Comments
davialexandre
路
3Comments
kntmrkm
路
3Comments
Most helpful comment
While "Mobile first" may be considered a buzz phrase, it means that the developer doesn't have to fiddle with complex coding, like with switching of menu types between screen sizes. Something I, as a Semantic-UI beginner, am really struggling with, but that was a relative breeze with Bootstrap.
Let me give you an example. I want my site's navigation to be a header-row of menu buttons on the desktop, but switch to a hidden sidebar menu on mobile. I don't want to have two sets of menus and a visibility toggle based on screen size. The menus are complex, and nested. This has proven to be impossible with vanilla Semantic-UI (but was relatively easy with Bootstrap), so yes, "mobile first" may be a buzz phrase, but it does also mean that common problems have been thought thru by the designers.
I think Semantic-UI will benefit immensely from a few more starter templates that resolves these initial navigation headaches, and you'll see a lot more people switching over to use the otherwise feature rich platform.