How do I give the following responsive information in the .info file?

Question

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?

Answer 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.

Answer 2

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