npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

scss-mediaq

v1.0.19

Published

A tiny package with some media queries mixins writen in scss for you to use easier and faster.

Downloads

6

Readme

Hello, internet! 👋

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

This readme contains the following info:

What is this 💡

Installation 🌱(with or without a js framework)

Usage and examples 📖

Sizes 💻

Set custom breakpoints 🎨

Contact 📩

License ©


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

  1. Install SASS/SCSS in your computer/project. Globally if possible. Use npm install -g sass.

  2. Install this package using npm install scss-mediaq in your command line, inside the root folder of your project.

  3. In the root folder of your project or a specific folder for css, create a main.scss and main.css files.

  4. In your main.scss file, import the scss-mediaq mixins with the following line: @import "node_modules/scss-mediaq/index.scss";.

  5. Don't forget to add the following: <link rel="stylesheet" href="main.css"> to your index.html file.

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

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

  1. Install SASS/SCSS in your computer/project. Globally if possible. Use npm install -g sass.

  2. Install this package using npm install scss-mediaq in your command line, inside the root folder of your project.

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

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

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

  6. 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 [email protected] .

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.