/ Gists

Gists

On gists

My demo component

Web components

index.html #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

	<!--
	https://jsbin.com/tupofihode/1/edit?html,css,js,output
	-->
	       <pan-kokot name="Ondrej Stanček" skills="Umí to tavit s HTP stejně jako s V6, odborník na CMS modul parametry">
	       Kdo nemá plyn na podlaze nikdy nejedl Vindalo
	       </pan-kokot>

	
</body>
</html>
On gists

Has (:has selector)

•
CSS Web components CSS trick

hover-group.css #

/*

https://www.matuzo.at/blog/2022/100daysof-day50/

*/

table:has(input:focus) tr:not(:focus-within) {
	opacity: 0.1;
}

/* siblings but not me */
.gallery:has(img:hover) > img:not(:hover) {
  /* rule */
}


/* has both, video + h2 */
post:has(h2):has(video) {
	
}


/* has video or h2 or both*/
post:has(h2, video) {
	
}


/* has only video */
post:has(video) {
	
}

/* has not video
do not use!!!  post:has(:not(video)  # post that has any element that is not a video
*/
post:not(:has(video)) {

}


/* previous element */
span:has(+ post) {
	color: red;
}

/* more or equals 4 children = quantity query */
post:has(> *:nth-child(4n)) {

}


/*
https://jsbin.com/mafuhoquka/edit?html,css,output

<article>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
		<div>9</div>
		<div>10</div>
</div>

/* prev */
article div:has(+ :hover) {
	background: pink;
}

/* next */
article div:hover + div {
	background: lime;
}


/* prev all */
article div:has(~ :hover) {
	background: pink;
}

/* next all */
article div:hover ~ div {
	background: lime;
}

/* https://bejamas.io/blog/learn-css-has-selector-by-examples-top-use-cases/ */
/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
	outline: 1px solid red;
}

/* At most 3 (3 or less, including 0) children */
ul:not(:has(> :nth-child(3))) {
	outline: 1px solid red;
}

/* Exactly 5 children */
ul:has(> :nth-child(5):last-child) {
	outline: 1px solid blue;
}

/* At least 10 (10 or more) children */
ul:has(> :nth-child(10)) {
	outline: 1px solid green;
}

/* Between 7 and 9 children (boundaries inclusive) */
ul:has(> :nth-child(7)):has(> :nth-child(-n+9):last-child) {
	outline: 1px solid yellow;
}



/* ranges */
/*
<div>
  <h2>Start Title (First line green, last line red)</h2>
  <p>First line between h2</p>
  <h4>Second line between h2</h4>
  <h5>Last line between h2</h5>
  <h2>End Title</h2>
</div>
*/

/* Select the first line between h2 */
h2 + :has(~ h2) {
  color: green;
}

/* Select the last line between h2 */
h2 ~ :has(+ h2) {
  color: red;
}
/* Select all lines between h2 */
h2 ~ :has(~ h2) {
  font-style: italic;
}



/* 'And' operation: selects <p> elements containing both class 'a' and 'b' children */
p:has(.a):has(.b) {
  font-weight: bold;
}

/* 'Or' operation: selects <p> elements containing either class 'a' or 'b' children */
p:has(.a, .b) {
  font-style: italic;
}


/* Select all parent elements containing a <p> element */
:has(p) {
  background-color: lightblue;
}

/* Select parent elements with a direct child <p> element */
:has(> p) {
  border: 1px solid red;
}
/* Select <div> elements with a direct child <p> element */
div:has(> p) {
  padding: 10px;
}
/* Select the adjacent previous <div> sibling of a <p> element */
div:has(+ p) {
  margin-bottom: 20px;
}
/* Select all previous <div> siblings of a <p> element */
div:has(~ p) {
  color: green;
}
On gists

hover-g

hover-g #

table:has(input:focus) tr:not(:focus-within) {
	opacity: 0.1;
}

.gallery:has(img:hover) > img:not(:hover) {

}
On gists

JS OOP Design Patterns

JavaScript-OOP JavaScript JS Patterns

patterns.js #

/*

https://blog.carlosrojas.dev/quick-reference-guide-to-design-patterns-in-js-1ebeb1e1c605

*/


/* Singleton */
class Animal {
  constructor() {
    if (typeof Animal.instance === 'object') {
      return Animal.instance;
    }

    Animal.instance = this;

    return this;
  }
}
export default Animal;


/* Prototype */
class Fruit {
  constructor(name, weight) {
    this.name = name;
    this.weight = weight;
  }

  clone() {
    return new Fruit(this.name, this.weight);
  }
}
export default Fruit;

const apple = new Fruit('Apple', 150);
const clonedApple = apple.clone();
console.log(apple);        // Originální ovoce
console.log(clonedApple);  // Klonované ovoce


/* Factory */
class MovieFactory {
  create(genre) {
    if (genre === 'Adventure') return new Movie(genre, 10000);
    if (genre === 'Action') return new Movie(genre, 11000);
  }
}

class Movie {
  constructor(type, price) {
    this.type = type;
    this.price = price;
  }
}
export default MovieFactory;


/* Abstract Factory */
function foodProducer(kind) {
  if (kind === 'protein') return proteinPattern;
  if (kind === 'fat') return fatPattern;
  return carbohydratesPattern;
}

function proteinPattern() {
  return new Protein();
}

function fatPattern() {
  return new Fat();
}

function carbohydratesPattern() {
  return new Carbohydrates();
}

class Protein {
  info() {
    return 'I am Protein.';
  }
}

class Fat {
  info() {
    return 'I am Fat.';
  }
}

class Carbohydrates {
  info() {
    return 'I am carbohydrates.';
  }
}
export default foodProducer;


/* Adapter */
class Soldier {
  constructor(level) {
    this.level = level;
  }

  attack() {
    return this.level * 1;
  }
}

class SuperSoldier {
  constructor(level) {
    this.level = level;
  }

  attackWithShield() {
    return this.level * 10;
  }
}

class SoldierAdapter {
  constructor(superSoldier) {
    this.superSoldier = superSoldier;
  }

  attack() {
    return this.superSoldier.attackWithShield();
  }
}
export { Soldier, SuperSoldier, SoldierAdapter };

// Vytvoření instance SuperSoldier
const superSoldier = new SuperSoldier(5);

// Vytvoření instance SoldierAdapter, který přijímá SuperSoldier jako argument
const soldierAdapter = new SoldierAdapter(superSoldier);

// Volání metody attack() na SoldierAdapteru, která skutečně volá attackWithShield() u SuperSoldiera
const result = soldierAdapter.attack();

console.log(result);  // Vypíše: 50 (5 * 10)



/* Bridge */


class Soldier {
  constructor(weapon) {
    this.weapon = weapon;
  }
}

class SuperSoldier extends Soldier {
  constructor(weapon) {
    super(weapon);
  }

  attack() {
    return 'SuperSoldier, Weapon: ' + this.weapon.get();
  }
}

class IronMan extends Soldier {
  constructor(weapon) {
    super(weapon);
  }

  attack() {
    return 'Ironman, Weapon: ' + this.ink.get();
  }
}

class Weapon {
  constructor(type) {
    this.type = type;
  }

  get() {
    return this.type;
  }
}

class Shield extends Weapon {
  constructor() {
    super('shield');
  }
}

class Rocket extends Weapon {
  constructor() {
    super('rocket');
  }
}
export { SuperSoldier, IronMan, Shield, Rocket };

// Vytvoření instancí zbraní
const shield = new Shield();
const rocket = new Rocket();

// Vytvoření instancí vojáků s různými zbraněmi
const superSoldier = new SuperSoldier(shield);
const ironMan = new IronMan(rocket);

// Útoky vojáků
console.log(superSoldier.attack());  // Vypíše: SuperSoldier, Weapon: shield
console.log(ironMan.attack());       // Vypíše: Ironman, Weapon: rocket


/* Composite */
//Equipment
class Equipment {
  getPrice() {
    return this.price || 0;
  }

  getName() {
    return this.name;
  }

  setName(name) {
    this.name = name;
  }
}

class Pattern extends Equipment {
  constructor() {
    super();
    this.equipments = [];
  }

  add(equipment) {
    this.equipments.push(equipment);
  }

  getPrice() {
    return this.equipments
      .map(equipment => {
        return equipment.getPrice();
      })
      .reduce((a, b) => {
        return a + b;
      });
  }
}

class Cabbinet extends Pattern {
  constructor() {
    super();
    this.setName('cabbinet');
  }
}

// --- leafs ---
class FloppyDisk extends Equipment {
  constructor() {
    super();
    this.setName('Floppy Disk');
    this.price = 70;
  }
}

class HardDrive extends Equipment {
  constructor() {
    super();
    this.setName('Hard Drive');
    this.price = 250;
  }
}

class Memory extends Equipment {
  constructor() {
    super();
    this.setName('Memory');
    this.price = 280;
  }
}

export { Cabbinet, FloppyDisk, HardDrive, Memory };

// Vytvoření jednotlivých listových tříd (FloppyDisk, HardDrive, Memory)
const floppyDisk = new FloppyDisk();
const hardDrive = new HardDrive();
const memory = new Memory();

// Vytvoření skříně a přidání jednotlivých listových tříd do skříně
const cabbinet = new Cabbinet();
cabbinet.add(floppyDisk);
cabbinet.add(hardDrive);
cabbinet.add(memory);

// Získání celkové ceny skříně
const totalPrice = cabbinet.getPrice();
console.log(`Total Price: ${totalPrice}`);  // Vypíše: Total Price: 600


/* Decorator */
class Notification {
  constructor(kind) {
    this.kind = kind || "Generic";
  }
  
  getInfo() {
    return `I'm a ${this.kind} Notification`;
  }
}

class FacebookNotification extends Notification {
  constructor() {
    super("Facebook");
  }
  
  setNotification(msg) {
    this.message = msg;
  }
  
  getInfo() {
    return `${super.getInfo()} with the message: ${this.message}`;
  }
}

class SMSNotification extends Notification {
  constructor() {
    super("SMS");
  }
  
  getInfo() {
    return super.getInfo();
  }
}
export { FacebookNotification, SMSNotification };

// Vytvoření instance SMSNotification
const smsNotification = new SMSNotification();
// Dekorace SMSNotification pomocí FacebookNotificationDecorator
const decoratedNotification = new FacebookNotificationDecorator(smsNotification);
// Získání informací o dekorované notifikaci
console.log(decoratedNotification.getInfo());
// Vypíše: I'm a SMS Notification decorated with Facebook feature


/* Facade */
class Cart {
  constructor() {
    this.discount = new Discount();
    this.shipping = new Shipping();
    this.fees = new Fees();
  }

  calc(price) {
    price = this.discount.calc(price);
    price = this.fees.calc(price);
    price += this.shipping.calc();

    return price;
  }
}

class Discount {
  calc(value) {
    return value * 0.85;
  }
}

class Shipping {
  calc() {
    return 500;
  }
}

class Fees {
  calc(value) {
    return value * 1.1;
  }
}

export default Cart;


/* FlyWeight */
class Ingredient {
  constructor(name) {
    this.name = name;
  }
  
  getInfo() {
    return `I'm a ${this.name}`
  }
}

class Ingredients {
  constructor() {
    this.ingredients = {};
  }

  create(name) {
    let ingredient = this.ingredients[name];
    if (ingredient) return ingredient;

    this.ingredients[name] = new Ingredient(name);

    return this.ingredients[name];
  }
}
export { Ingredients };


/* Proxy */
class Plane {
  fly() {
    return 'flying';
  }
}

class PilotProxy {
  constructor(pilot) {
    this.pilot = pilot;
  }

  fly() {
    return this.pilot.age < 18 ? `too young to fly` : new Plane().fly();
  }
}

class Pilot {
  constructor(age) {
    this.age = age;
  }
}

export { Plane, PilotProxy, Pilot };


/* Iterator */
class Iterator {
  constructor(el) {
    this.index = 0;
    this.elements = el;
  }

  next() {
    return this.elements[this.index++];
  }

  hasNext() {
    return this.index < this.elements.length;
  }
}

export default Iterator;

// Importujte váš Iterator
import Iterator from './Iterator';

// Vytvořte nějakou kolekci dat (v tomto případě pole).
const collection = ['Prvek 1', 'Prvek 2', 'Prvek 3'];

// Vytvořte instanci Iteratoru, předávejte kolekci jako argument konstruktoru.
const iterator = new Iterator(collection);

// Projděte kolekci pomocí Iteratoru.
while (iterator.hasNext()) {
  const element = iterator.next();
  console.log(element);
}



/* Mediator */

class TrafficTower {
  constructor() {
    this.airplanes = [];
  }

  getPositions() {
    return this.airplanes.map(airplane => {
      return airplane.position.showPosition();
    });
  }
}

class Airplane {
  constructor(position, trafficTower) {
    this.position = position;
    this.trafficTower = trafficTower;
    this.trafficTower.airplanes.push(this);
  }

  getPositions() {
    return this.trafficTower.getPositions();
  }
}

class Position {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }
  
  showPosition() {
    return `My Position is ${x} and ${y}`;
  }
}

export { TrafficTower, Airplane, Position };

const trafficTower = new TrafficTower();

const airplane1 = new Airplane(new Position(10, 20), trafficTower);
const airplane2 = new Airplane(new Position(30, 40), trafficTower);

// Informovat TrafficTower o pozici letadla.
airplane1.getPositions();

// Získat informace o pozicích ostatních letadel pomocí TrafficTower.
airplane2.getPositions();



/* State */
class OrderStatus {
  constructor(name, nextStatus) {
    this.name = name;
    this.nextStatus = nextStatus;
  }

  next() {
    return new this.nextStatus();
  }
}

class WaitingForPayment extends OrderStatus {
  constructor() {
    super('waitingForPayment', Shipping);
  }
}

class Shipping extends OrderStatus {
  constructor() {
    super('shipping', Delivered);
  }
}

class Delivered extends OrderStatus {
  constructor() {
    super('delivered', Delivered);
  }
}

class Order {
  constructor() {
    this.state = new WaitingForPayment();
  }

  nextPattern() {
    this.state = this.state.next();
  }
}

export default Order;


// Vytvořte instanci objednávky
const order = new Order();

// Zjistěte aktuální stav
console.log(order.state.name); // Výstup: 'waitingForPayment'

// Přejděte na další stav
order.nextPattern();

// Zjistěte nový stav
console.log(order.state.name); // Výstup: 'shipping'

// Přejděte na další stav
order.nextPattern();

// Zjistěte nový stav
console.log(order.state.name); // Výstup: 'delivered'



/* Strategy */
class ShoppingCart {
  constructor(discount) {
    this.discount = discount;
    this.amount = 0;
  }

  checkout() {
    return this.discount(this.amount);
  }

  setAmount(amount) {
    this.amount = amount;
  }
}

function guest(amount) {
  return amount;
}

function regular(amount) {
  return amount * 0.9;
}

function premium(amount) {
  return amount * 0.8;
}

export { ShoppingCart, guest, regular, premium };

// Importujte třídu ShoppingCart a slevové strategie
import { ShoppingCart, guest, regular, premium } from './ShoppingCart';

// Vytvořte instanci nákupního košíku s různými slevovými strategiemi
const cartGuest = new ShoppingCart(guest);
const cartRegular = new ShoppingCart(regular);
const cartPremium = new ShoppingCart(premium);

// Nastavte množství v košíku
cartGuest.setAmount(100);
cartRegular.setAmount(100);
cartPremium.setAmount(100);

// Proveďte platbu s různými slevovými strategiemi
console.log(cartGuest.checkout()); // Výstup: 100 (žádná sleva)
console.log(cartRegular.checkout()); // Výstup: 90 (10% sleva pro běžného zákazníka)
console.log(cartPremium.checkout()); // Výstup: 80 (20% sleva pro prémiového zákazníka)



/* Template */
class Tax {
  calc(value) {
    if (value >= 1000) value = this.overThousand(value);

    return this.complementaryFee(value);
  }

  complementaryFee(value) {
    return value + 10;
  }
}

class VAT extends Tax {
  constructor() {
    super();
  }

  overThousand(value) {
    return value * 1.1;
  }
}

class GST extends Tax {
  constructor() {
    super();
  }

  overThousand(value) {
    return value * 1.2;
  }
}

export { VAT, GST };


// Importujte třídy VAT a GST
import { VAT, GST } from './Tax';

// Vytvořte instanci třídy VAT a provedte výpočet daně
const vatTax = new VAT();
console.log(vatTax.calc(1200)); // Výstup: 1320 (včetně přirážky pro hodnoty nad 1000)

// Vytvořte instanci třídy GST a provedte výpočet daně
const gstTax = new GST();
console.log(gstTax.calc(1200)); // Výstup: 1440 (včetně přirážky pro hodnoty nad 1000)
On gists

Closure (Counter)

JavaScript

closure.js #

function counter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

const increment = counter();
increment(); // Output: 1
increment(); // Output: 2

// OR
function createCounter() {
  let count = 0;

  return {
    increment: function() {
      count++;
    },
    decrement: function() {
      count--;
    },
    getCount: function() {
      return count;
    }
  };
}

const counter = createCounter();
counter.increment();
console.log(counter.getCount()); // Output: 1
On gists

5 ways to create an Object in JavaScript

JavaScript

app.js #

// https://levelup.gitconnected.com/5-ways-to-create-an-object-in-javascript-55d556193ee8

// 1 . Object Literals
const car = {
  make: 'Toyota',
  model: 'Corolla',
  year: 2021
};

console.log(car);


// 2. The new Object() Syntax
const person = new Object();
person.name = 'John';
person.age = 30;
person.isEmployed = true;

console.log(person);


// 3. Constructor Functions
function Smartphone(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;
}

const myPhone = new Smartphone('Apple', 'iPhone 13', 2021);
console.log(myPhone);


// 4 The Object.create() Method
const animal = {
  type: 'Animal',
  displayType: function() {
    console.log(this.type);
  }
};

const dog = Object.create(animal);
dog.type = 'Dog';
dog.displayType(); // Output: Dog


//  ES6 Class Syntax
class Book {
  constructor(title, author, year) {
    this.title = title;
    this.author = author;
    this.year = year;
  }

  getSummary() {
    return `${this.title} was written by ${this.author} in ${this.year}`;
  }
}

const myBook = new Book('1984', 'George Orwell', 1949);
console.log(myBook.getSummary());
On gists

Normalizace dat

PHP AW

normalizace.php #

<?php 

// 1) single fns ..

$data = [
    '400,22 je super cislo a neobsahuje ani @',
    'Symbol @ je bezvič',
    '@@@ nebo XXX?',
    'Tady nic',
];

$NaNicToNeplati = function() {
    return null;
};

$NumberDashToDot = function($value) {
    if (preg_match('~\d+,\d+~', $value)) {
        return str_replace(',', '.', $value);
    }

    return null;
};

$RemoveZavinac = function($value) {
    if (preg_match('~@~', $value)) {
        return str_replace('@', '', $value);
    }

    return null;
};

$RemoveXXX = function($value) {
    if (preg_match('~X~', $value)) {
        return str_replace('X', 'maleX', $value);
    }

    return null;
};

$filters = [
    'NumberDashToDot' => $NumberDashToDot,
    'NaNicToNeplati' => $NaNicToNeplati,
    'RemoveZavinac' => $RemoveZavinac,
    'RemoveXXX' => $RemoveXXX,
];


 $evaluate = function($data, $filters) {
    $results = [];
    foreach ($data as $value) {
        $origValue = $value;
        $result = [
            'met' => [],
            'notMet' => [],
            'transformations' => [],
            'origValue' => $value,
            'finalValue' => null,
        ];

        foreach ($filters as $fnName => $fnClosure) {
            if ($valueNormalized = $fnClosure($value)) {
                $value = $valueNormalized;
                
                $result['met'][] = $fnName;
                $result['transformations'][$fnName] = $valueNormalized;
            } else {
                $result['notMet'][] = $fnName;
            }
        }

        
        $result['finalValue'] = $value;

        $results[] = $result;
    }

    return $results;

};

$results = $evaluate($data, $filters);

echo "<pre>";
print_r($results);
echo "</pre>";



// OOP
class DataTransformer
{
    private $filters;

    public function __construct(array $filters)
    {
        $this->filters = $filters;
    }

    public function transform(array $data): array
    {
        return array_map(function ($value) {
            $result = [
                'met' => [],
                'notMet' => [],
                'transformations' => [],
                'origValue' => $value,
                'finalValue' => null,
            ];

            foreach ($this->filters as $filter) {
                if ($filter->apply($value)) {
                    $result['met'][] = $filter->getName();
                    $result['transformations'][$filter->getName()] = $value;
                } else {
                    $result['notMet'][] = $filter->getName();
                }
            }

            $result['finalValue'] = $value;

            return $result;
        }, $data);
    }
}

interface FilterInterface
{
    public function apply(string &$value): bool;
    public function getName(): string;
}

class NumberDashToDotFilter implements FilterInterface
{
    public function apply(string &$value): bool
    {
        if (preg_match('~\d+,\d+~', $value)) {
            $value = str_replace(',', '.', $value);
            return true;
        }

        return false;
    }

    public function getName(): string
    {
        return 'NumberDashToDot';
    }
}

class RemoveZavinacFilter implements FilterInterface
{
    public function apply(string &$value): bool
    {
        if (strpos($value, '@') !== false) {
            $value = str_replace('@', '', $value);
            return true;
        }

        return false;
    }

    public function getName(): string
    {
        return 'RemoveZavinac';
    }
}

// Přidat další filtry podle potřeby

$data = [
    '400,22 je super cislo a neobsahuje ani @',
    'Symbol @ je bezvič',
    '@@@ nebo XXX?',
    'Tady nic',
];

$filters = [
    new NumberDashToDotFilter(),
    new RemoveZavinacFilter(),
    // Přidat další filtry podle potřeby
];

$transformer = new DataTransformer($filters);
$results = $transformer->transform($data);

echo "<pre>";
print_r($results);
On gists

OOP JS Class - static properties

JavaScript-OOP JavaScript

static.js #

class Item {
	
  static count = 0
  static count2 = 0
	
  constructor(name) {
    this.name = name
    this.constructor.count++
	Item.count2++
	
	console.log(this)
	console.log('-----------------------------------------')
	console.log(this.constructor)
  }

  
  static getCount() {
    return Item.count
  }

  static getCount2() {
    return Item.count2
  }
}


let A = new Item("A");
let B = new Item("B");

/*
console.log(A.getCount()) // nelze
console.log(B.getCount2()) // nelze
*/

console.log(Item.getCount()) // 2
console.log(Item.getCount2()) // 2



/*


[object Object] {
  name: "A"
}

"-----------------------------------------"

class Item {
  
static count = 0
static count2 = 0
  
constructor(name) {
  this.name = name
  this.constructor.count++
  Item.count2++
  
  window.runnerWindow.proxyConsole.log(this)
  window.runnerWindow.proxyConsole.log('-----------------------------------------')
  window.runnerWindow.proxyConsole.log(this.constructor)
}


*/
On gists

JS Mixins (Traits)

•
JavaScript-OOP JavaScript

Js-mixins.js #

let sayHiMixin = {
  sayHi() {
    alert(`Hello ${this.name}`);
  }
}


let sayByeMixin = {
  sayBye() {
    alert(`Bye ${this.name}`);
  }
}


class User {
  constructor(name) {
    this.name = name;
  }
}

// copy the methods
Object.assign(User.prototype, sayHiMixin);
Object.assign(User.prototype, sayByeMixin);


const user = new User("Dude")

user.sayHi()
user.sayBye()
On gists

Fake slide pure css

CSS CSS trick

index.html #

<!-- DEMO: https://jsbin.com/goyapuworo/edit?html,css,output -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Fake slide by me</title>
	<style>
	.grid {
	
	display: flex;
	translate: 0;
	transition: 300ms;
}

.grid > div {
	width: calc(100% - 4rem);
	flex-shrink: 0;
	padding: 2rem;
}

.grid > div:first-child {
	background: pink;
}

.grid > div:first-child + *{
	background: lime;
}

article 
{
	border: 2px solid green;
	overflow: hidden;
}

input {
	margin-bottom: 20px;
}

input:checked + article .grid {
	translate: -100%;
}
	</style>
</head>
<body>
	
	<input type="checkbox">

	<article>
	<div class="grid">
		<div class="col">AA</div>
		<div class="col">BB</div>
	</div>
	</article>
	
</body>
</html>