@shopmacher/trinity

Trinity

Trinity is a less library for handling reponsive breakpoints of devices and frameworks painlessly.

Table of contents

• Installation
  • webpack
  • Other build engines
• Usage
  • General
  • Min-width breakpoints
  • Custom breakpoints
• Devices and breakpoints
  • Mobile
  • Tablet
  • Desktop
  • Bootstrap
• Todo
• Contributing
• License

Installation

Trinity can be installed via npm. Simply type:

npm i -S @shopmacher/trinity

After installing trinity, you can integrate it in your project depending on what build engine you use.

webpack

If you use webpack as your build engine, make sure you have a less-loader set up. Then you can include trinity either in your less file using

@import '~@shopmacher/trinity/lib/trinity.less';

Other build engines

For any other build engine besides webpack, make sure to include the following file in your less bundle:

node_modules/@shopmacher/trinity/lib/trinity.less

Usage

Trinity provides a set of breakpoints and mixins for different screen sizes and UI frameworks. This section shows, how to use the trinity mixins for the different devices.

General

All mixins are used in a similar way, which is:

.device({
    // Styles for the device here
});

Simply replace device with a device from one of the devices-sections below, as in this example for a mobile device in landscape orientation:

.mobile-landscape({
    // Mobile landscape styles here
});

If you do not want to use the mixins, you always have the option to use the @media keyword in conjunction with the breakpoints.

@media @mobile {
    // Mobile styles here
}

Min-width mixins

In some cases, you want to provide style for a specific screen size and all above that one. For example: mobile and above. For this, trinity allows you to add the -up suffix, to every mixin available including orientations.

.mobile-up({
    // This styles mobile and larger devices (tablet, desktop)
)}

Custom breakpoints

If the built-in breakpoints are not sufficient for you, there is a mixin to use custom breakpoints.

@min: 300px;
@max: 500px;

.responsive(@min, @max, {
    // This styles devices from @min to @max width
});

.reponsive(@min, {
    // This styles devices from @min width and up
});

Devices and breakpoints

The following tables show the different built-in devices and breakpoints.

Mobile

Device	min-width	max-width
mobile	mobile-min	mobile-max
mobile-portrait	"	"
mobile-landscape	"	"

Breakpoint	Value
mobile-min	320px
mobile-max	480px

Tablet

Device	min-width	max-width
tablet	tablet-min	tablet-max
tablet-portrait	"	"
tablet-landscape	"	"

Breakpoint	Value
tablet-min	768px
tablet-max	1024px

Desktop

Device	min-width	max-width
desktop	desktop-min	-

Breakpoint	Value
desktop-min	1025px

Bootstrap

If you use the bootstrap framework, you can use the following breakpoints as they reflect the ones bootstrap uses.

Mixin	min-width	max-width
xs	0	xs-max
sm	sm-min	sm-max
md	md-min	md-max
lg	lg-min	-

Breakpoint	Value
xs-max	768px
sm-min	769px
sm-max	991px
md-min	992px
md-max	1199px
lg-min	1200px

Todo

• Implement generic mobile, tablet and desktop devices
• Implement bootstrap breakpoints
• Document usage
• Provide examples
• Add specific devices, like iPhones
• Add support for em media queries

Contributing

In order to make contributions to the project, fork the project and create a feature/hotfix branch with the contribution you want to make.

When you finished developing, document the changes and submit a pull request.

Of course, you can always submit issues for bugs or feature-requests.

License

MIT