Scss-mediaq NPM

Hello, internet! 👋

Thank you for downloading and/or being interested in scss-mediaq.

This readme contains the following info:

Installation 🌱(with or without a js framework)

📌What is this?

This is a really tiny npm package developed by @helleworld_.

The point of this package was to avoid copying/pasting the same responsive mediaqueries I usually use in SCSS.

I created this npm package so I can just import my responsive mediaqueries mixins in SCSS into my projects easier and faster. These mixins cover the usual types of screens (mobile, tablet, laptop and PC).

💡 This package can be used with the default breakpoints or your own breakpoints.

📌Installation

Without any js framework

This method is only for those who aren't using any js framework such as Vue, Angular or React.

I'm assuming you installed npm and Node in your machine.

Install SASS/SCSS in your computer/project. Globally if possible. Use npm install -g sass.
Install this package using npm install scss-mediaq in your command line, inside the root folder of your project.
In the root folder of your project or a specific folder for css, create a main.scss and main.css files.
In your main.scss file, import the scss-mediaq mixins with the following line: @import "node_modules/scss-mediaq/index.scss";.
Don't forget to add the following: <link rel="stylesheet" href="main.css"> to your index.html file.
Finally, to start translating your scss to css while you're working in your project, open your console in your root folder or css folder, wherever the main.css and main.scss are located, and type sass --watch main.scss main.css.
Ready to go. Once you've finished your project or styles, you're free to delete the package. This was only meant to help you create your responsive layout easier and faster.

With a js framework

This method is only for those using a js framework such as Vue, Angular or React.I'm assuming you installed npm and Node in your machine.

Install SASS/SCSS in your computer/project. Globally if possible. Use npm install -g sass.
Install this package using npm install scss-mediaq in your command line, inside the root folder of your project.
In js frameworks such as Vue, you can choose to use a pre-processor when creating a new App. If this is not the case for you, you must install the sass loader inside your project folder with the following command: npm install node-sass -S.
Import scss-mediaq mixins into the scss file where you're creating your responsive structure, with the following: @import "node_modules/scss-mediaq/index.scss";. Make sure the path is correct in your project.
If you're using the media queries mixins in multiple files you must import this package as @import "node_modules/scss-mediaq/index.scss"; in every file to make it available.
Ready to go.

📌Usage and examples

The mixins are named as follow: xs-screen (mobile), s-screen (ipad-tablet), m-screen (large tablets, laptops), l-screen (computers). You must use them inside your styling with the @include theMixinName { yourResponsiveStyles } directive.

Usage example:

.example_css_class {
    background: red;
    @include xs-screen {
        background: blue;
    }
}

The above example uses the mixin 'xs-screen' to make the background of the .example_css_class element turn blue in mobile screens. That would result in the following CSS when compiled:

.example_css_class {
  background: red;
}
@media only screen and (max-width: 480px) {
  .example_css_class {
    background: blue;
  }
}

📌Sizes

The mixins default breakpoint sizes:

xs-screen: 480px;
s-screen: 768px;
m-screen: 992px;
l-screen: 1200px;

These can be overrided by your custom breakpoints if needed.

📌Set custom breakpoints

You can set your custom breakpoints.

Individually:

.example_css_class {
    background: red;
    @include xs-screen (222px) {
        background: blue;
    }
}

This will result in the next CSS when compiled:

.example_css_class {
  background: red;
}
@media only screen and (max-width: 222px) {
  .example_css_class {
    background: blue;
  }
}

Or globally, creating a sass/scss variable for each resolution:

$my-breakpoint: 222px;

.example_css_class {
    background: red;
    @include xs-screen ($my-breakpoint) {
        background: blue;
    }
}

This will result in the next CSS when compiled:

.example_css_class {
  background: red;
}
@media only screen and (max-width: 222px) {
  .example_css_class {
    background: blue;
  }
}

This example sets a mobile screen of 222px.

Customize your own breakpoints if needed, to get a better experiencie out of this package.

📌Contact

If you have any trouble or doubt, don't hesitate and contact me via Twitter or email to work@desiremcarmona.com .

Thank you 🙌

📌License

This project is under license CC-BY-ND-1.0:

This license lets others reuse my work for any purpose, including commercially; however it is not permited to share with others in adapted form and credit must be given to me.

TL;DR: Commercially friendly, mandatory credit, you can't modify or remix it.