https://github.com/aliencreations/responsiveless

Responsive media queries for LESS
https://github.com/aliencreations/responsiveless

lesscss media-queries mixins orientation

Last synced: about 1 month ago
JSON representation

Responsive media queries for LESS

• Host: GitHub
• URL: https://github.com/aliencreations/responsiveless
• Owner: AlienCreations
• License: mit
• Created: 2015-09-13T16:05:35.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-09-14T06:02:54.000Z (over 9 years ago)
• Last Synced: 2025-04-07T05:04:23.494Z (about 1 month ago)
• Topics: lesscss, media-queries, mixins, orientation
• Language: CSS
• Size: 148 KB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# responsiveLESS

Media query mixins for common devices.

---

Credit and special thanks goes to [CSS-Tricks.com](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) for 

providing the actual media queries, which we simply converted to mixins for rule and orientation pass-through.

## Usage

All mixins will take one `@rules` argument and an optional `@orientation` argument. Omitting the 

`@orientation` argument will enforce the rule on both orientations.

Example contract: 

    .tablets(@rules)

    .tablets(@rules, @orientation)

    

This allows targeting all tablets in either orientation like so: 

    .tablets({ margin : 20px; });

    

Or, specifying unique rules respectively:

    .tablets({ margin : 20px; }, portrait);

    .tablets({ margin : 40px; }, landscape);

    

*Example:*

    @import '/bower_components/responsiveless/index'

    

    .some-element-class {

      font-size        : 1.5rem;

      background-color : #EFEFEF;

      color            : #000;

            

      .phones({

        color : red;

      }, portrait);

      

      .tablets({

        color : blue;

      }, portrait);

    }

## Mixins Included

The mixins are inclusively hierarchical, meaning `.phones()` will leverage rules from `.iPhones()`, which will 

leverage rules from `.iPhone4()`, `.iPhone5()`, `.iPhone6()`, and `.iPhone6Plus()`, for example. Due to the way the 

rules were written, some targeting overlap will occur. 

*All mixins invoked with `(@rules, [@orientation])`:* 

    .laptops

        .retina

        .nonRetina

    .phones

        .galaxyPhones

            .galaxyS3

            .galaxyS4

            .galaxyS5

        .htcPhones

            .htcOne

        .iPhones

            .iPhone4

            .iPhone5

            .iPhone6

            .iPhone6Plus

    .tablets

        .galaxyTablets

            .galaxyTab10

        .iPads

            .iPad1stGen

                .iPad1

                .iPad2

            .iPad2ndGen

                .iPad3

                .iPad4

            .iPadMini

        .kindleFireTablets

            .kindleFire7Inch

            .kindleFire8Point9Inch

        .nexusTablets

            .asusNexus7

    .wearables

        .appleWearables

            .appleWatch

        .motoWearables

            .moto360