By chicmovement on

I've read the book 'responsive web design' by Ethan Marcotte over the week & gone through the documentation on Adaptive Theme website, however, I'm confused about how to take responsive theming forward in Adaptive Theme when I have multiple web pages with their own CSS files.

From the documentation on Adaptive Theming, we have to split the CSS for each layout into its individual file (responsive.smartphone.landscape.css; responsive.desktop.css). Does that mean, we would have the full site CSS in one file for responsive.desktop.css? (! surely thats not right).

The way we have done thus far (in its current form, website is not responsive) is that there are small CSS files for each different regions/ areas of the page. In addition to this, we have custom modules with their own CSS files. How would we go about taking this mass of CSS files & distributing the code into responsive files in Adaptive Theme?

⋅ Categories: Drupal 7.x

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Ha, per chance for the first time in ages I decided to look in the forum and see this first, classic. I can explain, pretty good I think, I know a thing or two about this theme ;)

Bottom line (love to start there) do what you want, whatever makes sense, do it. OK, now for the official line...

Global styles, those that apply to all devices regardless of screen size etc go in global.styles.css OR global.base.css, the latter for the most part is normalize with a few tweaks and a couple of other declarations specific to AT and improving Drupal core.

Recap:
global.styles.css = the place to put all global styles.

Now, the responsive stuff. You can use the various responsive style sheets, and that is OK if that's what you want to do - its an option. These are good because the media queries are the ones you set in theme settings - they are automatically used for each of the responsive stylesheets.

Clearly this is not enough though for serious responsive design - mainly because you might be using stacked media queries for layout, but want SOME styles to cascade, in this case use the responsive.custom.css file. This is enabled by default in AT 7.x-3.x and includes a few examples etc. This is the file I use most of all.

Recap:
responsive.custom.css = real good for cascading media queries, and all round custom stuff
responsive.[device].[orientation].css files = good if you want to target that exact device/breakpoint

Finally, this is all just options, you can of course create as many stylesheets as you like, for example if global.styles.css scares the crap out of you and you want to use more modular stylesheets, such as you describe, feel free, there is nothing holding you back.

Feel free to hit the AT issue queue or drop by IRC #drupal-adaptivetheme

Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
Codenext’s picture

Codenext commented

Hi Jeff, Good information. I am also using the Adaptive theme and same question raised. Common people who do not have much familiarity generally goes with whatever provided by default.

Its css file has following file,

global.base.css
global.styles.css
responsive.custom.css

responsive.desktop.css
responsive.smalltouch.landscape.css
responsive.smalltouch.portrait.css
responsive.tablet.landscape.css
responsive.tablet.portrait.css

1. So, if we see that five different screen size listed in adaptive theme as above, Do we have to use response.desktop.css for desktop/laptop design or just global.style.css?

2. Another thing when we see the adaptive theme setting at admin/apperance/ATthem(sub)/setting.....we see three option Standard Layout, Tablet Layout and smalltouch layout....So Tablet and Smalltouch are understable, they have their own css which means last 4 files, but for standard it is responsive.desktop.css?