0

I have the below lines in the info file for a Drupal 7 theme.

stylesheets[all and (min-width: 980px)][] = css/960.css
stylesheets[all and (min-width: 760px) and (max-width: 980px)][] = css/720.css
stylesheets[all and (max-width: 760px)][] = css/mobile.css
stylesheets[all][] = style.css
stylesheets[all][] = color/colors.css

How do I map these in Drupal 8?

2 Answers 2

1

Your D7 declarations have the effect of placing the media query in the markup, and I think you want to replicate that method. You can do this in the library declarations, e.g.

stylesheets[all and (max-width: 760px)][] = css/mobile.css

Becomes:

mobile:
  version: 8.x-1.0
  css:
    layout:
      css/mobile.css: { media: all and (max-width: 760px) }

Note I am assuming this is for layout, hence my use of the "layout" SMACCS category for this library.

Personally I don't really bother with such things and write the media queries in the CSS, if you have many media queries you're going to have a lot of extra http requests if you're always splitting files based solely on breakpoint.

0

In Drupal 8 create theme-name.libraries.yml file inside that you can add your CSS and js files.

global-styling:
  version: VERSION
  css:
   theme:
    css/bootstrap.min.css: {}
    css/style.css: {}
    css/animate.css: {}

    css/font-awesome.min.css: {}

    css/slick.css: {}
    css/owl-carousel.css: {}
    #~ css/theme-red.css: {}
    #~ css/theme.css: {}
  js:
    js/bootstrap.min.js: {}
    js/wow.min.js: {}
    js/custom.js: {}
    js/slick.min.js: {}

You can refer this https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme

I think you can achieve it using breakpoints. To create new Breakpoints, you need to add a [theme-name] or [module-name] .breakpoints.yml in the root folder of your theme or module

We’ll take the classy.breakpoints.yml to show you an example of the content of the breakpoint file.

  classy.mobile:
    label: mobile
    mediaQuery: '(min-width: 0px)'
    weight: 0
    multipliers:
    - 1x
  classy.narrow:
    label: narrow
    mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
    weight: 1
    multipliers:
    - 1x
  classy.wide:
    label: wide
    mediaQuery: 'all and (min-width: 851px)'
    weight: 2
    multipliers:
    - 1x
1
  • Yes, You are right. But what about media queries? How do I map those in Drupal 8? Commented Sep 27, 2016 at 5:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.