search

nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 161 forks source link

Hide-on-desktop or hide-on-mobile hides permanently #85

Closed ItsJasonFell closed 8 years ago

ItsJasonFell commented 8 years ago

I can't find anywhere that says which css files to use so i'm using a bunch and i'm sure there is a lot of overlapping css issues but here are the files i'm using: base.css edit: I deleted this one since it appeared to do nothing. desktop.css mobile.css responsive.css bootstrap.css and my own personal style.css

I can't seem to get the mobile grids to work the way I want them to and whenever I use hide-on-desktop or hide-on-mobile it hides them permanently.

On my HTML I have spent the past 5 hours trying to get my 3 column grid-33's to be mobile-grid-100's so they take up the entire page when mobile but when I set more than 1 as 100 it breaks and won't go back into normal desktop 3-column layout.

nathansmith commented 8 years ago

If you don't need to support IE7, use this CSS file…

https://github.com/nathansmith/unsemantic/blob/master/assets/stylesheets/unsemantic-grid-responsive-tablet-no-ie7.css

If you do need to support IE7, use this CSS file…

https://github.com/nathansmith/unsemantic/blob/master/assets/stylesheets/unsemantic-grid-responsive-tablet.css

Though, if you're already using Bootstrap, you should probably just use the grid that is provided.

Unsemantic is geared more towards front-end developers who write most of their own UI code, so it might not be well suited to what you're trying to accomplish.

If you're going to use a prefabbed off-the-shelf framework like Bootstrap, you ought to just embrace it and use all of it (including its grid).

http://getbootstrap.com/css/#grid

Bootstrap also has helper classes to hide elements at various @media query widths.

http://getbootstrap.com/css/#responsive-utilities-classes

ItsJasonFell commented 8 years ago

Is that CSS file to replace all of my other CSS files? And I only use the Bootstrap for a carousel js plug-in. Without the Bootstrap css it just breaks.

nathansmith commented 8 years ago

Yes, that would replace any other Unsemantic related CSS files.

ItsJasonFell commented 8 years ago

Thats fantastic, I got it to work on a basic page but that css file has tablet breakpoints so I would also have to build in some tablet responsiveness, correct? Or is there an easy way to get tablets to show the same way as desktop would? (i'd like to apologize, i'm only a junior in college so I still have plenty to learn)

nathansmith commented 8 years ago

Oh, if you want the tablet to just work like desktop, then use this file…

https://github.com/nathansmith/unsemantic/blob/master/assets/stylesheets/unsemantic-grid-responsive-no-ie7.css

^ That contains only mobile and desktop, no tablet (anything "tablet" and above uses grid-*).

ItsJasonFell commented 8 years ago

Awesome, it works perfectly! I kept seeing stylesheets that appeared to do what they were titled but overlapping css stopped my html and css from working properly. My goal was to talk to somebody that has used Unsemantic before but the creator is just as good :D