Jss: [jss-responsive] based on bootstrap responsive utilities

[umidbekk]

Inspired by bootstrap responsive tools

import jss from 'jss';
import jssResponsive from 'jss-responsive';

jss.use(jssResponsive({
    // default values
    lg: 1200,
    md: 992,
    sm: 768,
    // custom values
    iPhone5: {
        max: 320
    },

    iPhone6: {
        min: 321,
        max: 375
    },

    'media': 512 // will throw `Reserved "@media" property name exception`
    'keyframes': 1024 // will throw `Reserved  "@keyframes" property name exception`
}));

jss.createStyleSheet({
    col: {
        '@ only screen and @lg': {
            width: '25%'
        },

        '@md': {
            width: '33%'
        },

        '@sm': {
            width: '50%'
        },

        '@sm and (orientation: landscape)': {
            width: '33%'
        },

        '@xs and (orientation: portrait)': {
            width: '100%'
        },

        '@xs': {
            width: '50%'
        },

        '@iPhone5': {
            color: 'gray'
        },

        '@iPhone6': {
            color: 'bluegray'
        }
    }
});

jss.createStyleSheet({
    '@media only screen and (min-width: 1200)': {
        col: {
            width: '25%'
        }
    },

    '@media (min-width: 992) and (max-width: 1199)': {
        col: {
            width: '33%'
        }
    },

    '@media (min-width: 768) and (max-width: 991)': {
        col: {
            width: '50%'
        }
    },

    '@media (min-width: 768) and (max-width: 991) and (orientation: landscape)': {
        col: {
            width: '33%'
        }
    },

    '@media (max-width: 767)  and (orientation: portrait)': {
        col: {
            width: '100%'
        }
    },

    '@media (max-width: 767)': {
        col: {
            width: '50%'
        }
    },

    '@media (max-width: 320)': {
        col: {
            color: 'gray'
        }
    },

    '@media (min-width: 321) and (max-width: 375)': {
        col: {
            color: 'bluegray'
        }
    }
});

[kof]

Wow this looks interesting!

[kof]

Is there any code behind it?

[kof]

One particular thing which is in general an unsolved problem in jss is variables inside of props in a way which is efficient, clear and js like. See discussion in #214, maybe you have good ideas for both things.

[umidbekk]

@kof

Is there any code behind it?

I am currently implementing it to my production project to make some optimizations, so when I will finish I think I can publish it. But as I am really out of time (every week deadlines) it can be without test cases

[kof]

Thats totally fine, we just need to see the problems in code to figure out whether we can make it to an official plugin.

[kof]

Currently my fav approach is https://github.com/jsstyles/jss/issues/214#issuecomment-225204603

Which can be translated to @media, we just need to rethink how we use @media right now, because the initial philosophy was to stay as close as possible to css, however this leads to string parsing for such things and this is not want you ideally want to do in js.

If we create a new nice format for @media where everything can be a separate property, we can have a nice dsl, which is also very fast.

[kof]

Just an example of the direction I am thinking in:

{
  '@media': {
    type: 'screen',
    minWidth: 1024,
    orientation: 'landscape',
    col: {
     color: 'grey'
    }
  }
}

[umidbekk]

Just an example of the direction I am thinking in

I really like this approach 👍, but why can't we put @media inside of col ?

[umidbekk]

@kof
ok, i think 0.0.1 version is ready for testings jss-responsive

[umidbekk]

Also I add or functionality there

jss.createStyleSheet({
    col: {
        '@xs and @sm': { // "@media  (min-width: 768px) and (min-width: 992px) and (max-width: 1199px)" will never trigger
            display: 'none'
        },

        '@xs or @sm': { // will create two media queries "@media  (min-width: 768px)" and "@media (min-width: 992px) and (max-width: 1199px)"
            display: 'none'
        }
    }
});

This problem can be solved by smart merging all media queries, but in this stage I think it's not so necessary

[kof]

I really like this approach 👍, but why can't we put @media inside of col ?

It's based on the initial idea to stay close to CSS, however I think it makes sense to have both possibilities: @media as a container rule and inside of a rule.

[umidbekk]

@kof

Oh, it's maybe because of me, because even in css (not really css - less or sass) I tried to encapsulate all styles that belong to selector inside of selector

Like this:

.container {
   $smallScreenWidth: 300px; // local variable

   max-width: 1200px;  

   @media (max-width: $smallScreenWidth): {}
}

Instead of

$smallScreenWidthForContainer: 300px; // now it's global variable and must be unique

.container {
   max-width: 1200px;  
}

@media (max-width: $smallScreenWidthForContainer): {
    .container {
        max-width: 1200px;  
    }
}

[kof]

You will either duplicate media query over in over in every rule or you will duplicate the rule selector you want to overwrite by media. If you have one media and lots of rules css way makes sense, if you have lots of media queries for different rules, in-rule @media query might make sense.

[umidbekk]

@kof yep, so

however I think it makes sense to have both possibilities: @media as a container rule and inside of a rule.

This will make jss more flexible for developers 👍, we need this, lib like jss-nested can do this i think (like jss-nested-media)

[kof]

Another thought on this: it doesn't need to be a jss plugin, it can be pure functions.

const getStyles = responsive({
  // default values
  lg: 1200,
  md: 992,
  sm: 768,
  // custom values
  iPhone5: {
      max: 320
  },

  iPhone6: {
      min: 321,
      max: 375
  },

  media: 512 // will throw `Reserved "@media" property name exception`
  keyframes: 1024 // will throw `Reserved  "@keyframes" property name exception`
})

const styles = getStyles({
  col: {
      '@ only screen and @lg': {
          width: '25%'
      },

      '@md': {
          width: '33%'
      },

      '@sm': {
          width: '50%'
      },

      '@sm and (orientation: landscape)': {
          width: '33%'
      },

      '@xs and (orientation: portrait)': {
          width: '100%'
      },

      '@xs': {
          width: '50%'
      },

      '@iPhone5': {
          color: 'gray'
      },

      '@iPhone6': {
          color: 'bluegray'
      }
  }
})
jss.createStyleSheet(styles)

[kof]

any updates here?

[umidbekk]

any updates here?

Oh, totally forgot about this issue

Another thought on this: it doesn't need to be a jss plugin, it can be pure functions.

Good idea, I think it can be done in both ways, e.g.:

import { plugin as jssResponsive, responsive } from 'jss-responsive'

---

I'm using this plugin in production currently and didn't have any problems so far, but it should be tested with other plugins

Here plugin ordering that I use:

jss.use(jssExtend())
jss.use(jssNested())
jss.use(jssCamelCase())
jss.use(jssPropsSort())
jss.use(jssDefaultUnit())
jss.use(jssVendorPrefixer())

jss.use(jssImportant())
jss.use(jssResponsive())

[kof]

I think if it can be implemented without plugin api, we should do so (avoid overheads), feel free to create a package. I think it is a great idea for a community package.

[kof]

Note that jss-something is a plugin naming convention, if you decide to do a pure functional package, call it "responsive-jss"