vinzcelavi

XBlock “utility-first” helpers (Tailwind-ish)

These utilities are scoped under .xblock-student_view-html (see src/_xblock-article.scss).

You compose layout by stacking classes (like Tailwind). Responsive variants use the sm: prefix and kick in at < 500px.

Layout

• flex: display:flex
• flex-wrap: flex-wrap: wrap

vinzcelavi

.background {
  width: 100%;
  height: 100vh;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1543.8 1017.8' style='enable-background:new 0 0 1543.8 1017.8' xml:space='preserve' fill='none'%3E%3Cpath fill='%23FBF3E5' d='M995.9 552.5c.7-2 1.3-4 2.2-5.9 13-26.5 22.3-54.3 30.5-82.6 5.3-18.1 7.9-36.6 7.9-55.4 0-23.2-10.8-40.8-27.7-55.6-16.9-14.8-36.9-22.8-58.1-28.5-20.1-5.4-40.1-10.9-60.3-15.7-22.2-5.3-44.6-4.5-66.8.3-25 5.4-50.1 10.9-75 16.6-22.2 5.1-38.6 17.7-49.6 37.7-7 12.7-14.9 24.8-21.8 37.5-5.7 10.4-10 21.4-10.2 33.5-.1 7.3 2.7 13.1 8.9 17.8 39 30 83.1 50.4 129 66.9 13.4 4.8 27.9 6.2 41.6 10.3 9.9 3 20.1 6.5 28.8 12 19.9 12.4 24.9 36.7 11.7 57.3-5.4 8.4-12.3 16.5-20.2 22.4-24.8 18.3-46 40.5-68.7 60.9-19.9 17.8-36.8 38.1-51.4 60.2-10.2 15.3-19 31.6-28 47.7-7.7 13.8-17.6 25.8-27.8 37.7-14.6 17.1-29.7 33.8-42.6 52.1-8.5 12-14.4 26.2-19.8 40-5.6 14.5-10 29.6-13.4 44.7-2.3 10.4-2.3 21.4-2.9 32.2-.5 7.9-.2 15.9-.3 23.9h-1c-2.6-26.4-1-52.5 6.9-77.9 6.6-21 12.9-4

vinzcelavi

Axept.io TCF CMP client-side JS library

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

vinzcelavi

import { useState, useEffect } from 'react';
import styled, { keyframes } from 'styled-components';

const Root = styled.div`
  position: relative;
  min-height: 100vh;
`;

const LoaderAnim = keyframes`
  to {

vinzcelavi

import { useEffect } from 'react';
import { NextSeo } from 'next-seo';
import { PrismicRichText } from '@prismicio/react';

import Container from 'components/Container/Container';
import Toptitle from 'components/Toptitle/Toptitle';
import Headings from 'components/Headings/Headings';
import Spacer from 'components/Spacer/Spacer';
import Button from 'components/Button/Button';
import PageHeader from 'components/PageHeader/PageHeader';

vinzcelavi

if(
  and(
    prop("Nombre de familles de cookies connu") == ">=4", 
    prop("Connaissances en protection de la donnée personnelle") == ">3"
  ),
  "Datainstructor",
  if(
    prop("Nombre de familles de cookies connu") == ">=4",
    if(
      prop("Connaissances en protection de la donnée personnelle") == "<=3",

vinzcelavi

useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    window._axcb = window._axcb || [];
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    window._axcb.push(axeptio => {
      const element = document.querySelectorAll(
        '[name*="axeptio_processings_axeptio"]'
      );

vinzcelavi

import React, { createElement, useState } from 'react';
import { storiesOf } from '@storybook/react';
import Checkbox from './Checkbox';
import Grid from '../Grid/Grid';
import { StoryWrapper, Wrap } from '../Mixins';

storiesOf('Forms/Checkbox', module).add('Default', () =>
  createElement(() => {
    const [isChecked, setIsChecked] = useState([0, 0, 0, 0]);

vinzcelavi

.container {
  outline: 1px solid hotpink;

  &::before {
    z-index: 1000;
    content: 'container';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;

vinzcelavi

<div class="content">
  <h1><img src="http://res.cloudinary.com/hb395gw1l/image/upload/v1530110596/web-assets/logo-lunchr.svg" alt="Lunchr" /></h1>

  <h2>Se connecter</h2>

  <form class="form">
    <div class="form__input">
      <label>Email</label>
      <input type="email" placeholder="Entrez votre courriel" />
    </div>