Using media queries in Thermage
Thermage 0.16.0 brings media queries for terminal.
Media queries in Thermage allow you to set specific styles for specific screen sizes.
Thermage has these predefined media queries:
'media' => [
'xs' => ['min' => 0, 'max' => 81], // 577px
'sm' => ['min' => 82, 'max' => 90], // 640px
'md' => ['min' => 91, 'max' => 108], // 766px
'lg' => ['min' => 109, 'max' => 145], // 1025px
'xl' => ['min' => 146, 'max' => 181], // 1280px
],
Let's create a simple CLI APP with a simple styles for specific media queries.
Create cliapp
directory for your demo project and app.php
file.
$ mkdir cliapp
$ cd cliapp
$ touch app.php
Install Thermage with Composer.
$ composer require thermage/thermage
Open app.php
with nano
editor or any other you like.
<?php
use function Thermage\render;
use function Thermage\div;
require_once __DIR__ . '/vendor/autoload.php';
render (
div('Stay RAD!', 'text-align-center p-4 bg-red sm:bg-yellow md:bg-green lg:bg-blue')
);
Save the app.php
file and execute it in the console.
$ php app.php
The example above will render a div
element with a yellow background for small screen sizes, green background for medium screen sizes, and a blue background for large screen sizes; for all others, you will see a div
element with a red background.
Also, you may set these magic classes for specific media queries using a fluent interface.
render (
div('Stay RAD!', 'text-align-center p-4 bg-red')
->media('sm', 'bg-yellow')
->media('md', 'bg-green')
->media('lg', 'bg-blue')
);