Trinity is a less library for handling reponsive breakpoints of devices and frameworks painlessly.
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.
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';
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
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.
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
}
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)
)}
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
});
The following tables show the different built-in devices and breakpoints.
Device | min-width | max-width |
---|---|---|
mobile | mobile-min | mobile-max |
mobile-portrait | " | " |
mobile-landscape | " | " |
Breakpoint | Value |
---|---|
mobile-min | 320px |
mobile-max | 480px |
Device | min-width | max-width |
---|---|---|
tablet | tablet-min | tablet-max |
tablet-portrait | " | " |
tablet-landscape | " | " |
Breakpoint | Value |
---|---|
tablet-min | 768px |
tablet-max | 1024px |
Device | min-width | max-width |
---|---|---|
desktop | desktop-min | - |
Breakpoint | Value |
---|---|
desktop-min | 1025px |
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 |
- 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
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.
MIT