Glyph Set

Preview
HTML
View
Context
Assets
Info


        
        
        <div class="glyph-set  " data-font="" data-slug="">

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                A
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                B
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                C
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                D
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                E
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                F
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                G
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                H
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                I
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                J
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                K
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                L
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                M
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                N
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                O
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                P
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                Q
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                R
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                S
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                T
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                U
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                V
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                W
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                X
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                Y
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                Z
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                a
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                b
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                c
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                d
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                e
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                f
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                g
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                h
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                i
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                j
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                k
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                l
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                m
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                n
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                o
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                p
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                q
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                r
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                s
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                t
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                u
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                v
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                w
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                x
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                y
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                z
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                1
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                2
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                3
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                4
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                5
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                6
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                7
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                8
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                9
            </div>
        </div>
    </div>

    <div class="item-cell item-cell--ratio item-cell--glyph glyph-set__cell" data-font="" data-id="">
        <div class="item-cell__content">
            <div class="item-cell__main-text">
                0
            </div>
        </div>
    </div>
</div>


        <div class="glyph-set {{ class }} {{ modifier }}" data-font="{{ data.font.path }}" data-slug="{{ data.font.slug }}">
    {% for glyph in data.glyphs|split('') %}
        {% include '@item-cell' with {class: "glyph-set__cell", modifier: "item-cell--ratio item-cell--glyph", data: {mainText: glyph|e}} %}
    {% endfor %}
</div>


        {
  "language": "en-US",
  "data": {
    "glyphs": "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890",
    "font": {
      "label": "",
      "slug": "",
      "path": ""
    }
  }
}

File:

Content:


                                .glyph-set {
    display: grid;
    gap: 1px;
    background-color: var(--color-brand);
    transition: $transition-duration $transition-easing;
    transition-property: background-color;
    grid-template-columns: repeat(8, 1fr); /* stylelint-disable-line plugin/no-unsupported-browser-features */
    grid-template-rows: 0;

    @include bp(sm-min) {
        grid-template-columns: repeat(12, 1fr); /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }

    @include bp(md-min) {
        grid-template-columns: repeat(16, 1fr); /* stylelint-disable-line plugin/no-unsupported-browser-features */
    }
}

.glyph-set__cell--empty {
    background-color: var(--color-background);
    box-shadow: 0 0 0 1px var(--color-brand) inset;
    transition: $transition-duration $transition-easing;
    transition-property: box-shadow, background-color;
    margin: -1px;
    padding: 1px;
}

.item-cell__content {
    .glyph-set__cell:nth-child(-n+8) & {
        transform-origin: top;
    }

    .glyph-set__cell:nth-child(-n+12) & {
        @include bp(sm-min) {
            transform-origin: top;
        }
    }

    .glyph-set__cell:nth-child(-n+16) & {
        @include bp(md-min) {
            transform-origin: top;
        }
    }

    .glyph-set__cell:nth-last-child(-n+8) & {
        transform-origin: bottom;
    }

    .glyph-set__cell:nth-last-child(-n+12) & {
        @include bp(sm-min) {
            transform-origin: bottom;
        }
    }

    .glyph-set__cell:nth-last-child(-n+16) & {
        @include bp(md-min) {
            transform-origin: bottom;
        }
    }
}

URL: /components/raw/glyph-set/glyph-set.scss
Filesystem Path: src/patterns/components/glyph-set/glyph-set.scss
Size: 1.6 KB

Content:


                                import './glyph-set.scss';
import Helpers from '@helpers';
import Component from '@component';
import htmlString = JQuery.htmlString;

interface IGlyphSetSettings {
    columns: number;
    columnsSm: number;
    columnsMd: number;
    itemCellClass: string;
    emptyCellClass: string;
}

export default class GlyphSet extends Component {
    public static initSelector: string = '.glyph-set';

    private settings: IGlyphSetSettings;

    constructor(element: HTMLElement) {
        super(element);

        this.settings = {
            columns: 8,
            columnsMd: 16,
            columnsSm: 12,
            emptyCellClass: 'glyph-set__cell--empty',
            itemCellClass: 'glyph-set__cell',
        };
        this.applyFontFace();

        this.init();
    }

    init(): void {
        $(window).on('resize', this.resizeHandler.bind(this));
        this.resizeHandler();
    }

    applyFontFace(): void {
        const fontPath: string = this.element.data('font');
        const fontSlug: string = this.element.data('slug');

        this.element.css('font-family', Helpers.addFontFace(fontPath, fontSlug));
    }

    fillWithEmptyCells(columns: number): void {
        const emptyCell: htmlString = `<div class="${this.settings.itemCellClass + ' ' + this.settings.emptyCellClass}"></div>`;

        this.element.append($(emptyCell.repeat(columns - this.element[0].childElementCount % columns)));
    }

    clearEmptyCells(): void {
        this.element.find('.' + this.settings.emptyCellClass).remove();
    }

    adjustRows(columns: number): void {
        this.element.css('grid-template-rows', 'repeat('+ Math.ceil(this.element[0].childElementCount / columns) +', 1fr)');
    }

    resizeHandler(): void {
        if (window.matchMedia('only screen and (min-width: 1024px)').matches) {
            this.clearEmptyCells();
            this.fillWithEmptyCells(this.settings.columnsMd);
            this.adjustRows(this.settings.columnsMd);
        } else if (window.matchMedia('only screen and (min-width: 768px)').matches) {
            this.clearEmptyCells();
            this.fillWithEmptyCells(this.settings.columnsSm);
            this.adjustRows(this.settings.columnsSm);
        } else {
            this.clearEmptyCells();
            this.fillWithEmptyCells(this.settings.columns);
            this.adjustRows(this.settings.columns);
        }

        this.element.css('height', '');
        requestAnimationFrame(() => {
            this.element.css('height', Math.round(this.element.innerHeight()) + 'px');
        });
    }
}

URL: /components/raw/glyph-set/glyph-set.ts
Filesystem Path: src/patterns/components/glyph-set/glyph-set.ts
Size: 2.6 KB

Handle: @glyph-set--default
Filesystem Path: src/patterns/components/glyph-set/glyph-set.twig
References (1): @item-cell
Referenced by (1): @glyph-module

Glyph Set

Forms

Notifications

Copy environment

Glyph Set