Skip to content

Instantly share code, notes, and snippets.

@georgechang

georgechang/grid.css

Last active May 1, 2024 00:53
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save georgechang/773b9a1fa95d06c927f259a18c636b35 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save georgechang/773b9a1fa95d06c927f259a18c636b35 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. georgechang revised this gist May 1, 2024. No changes.
  2. georgechang revised this gist May 1, 2024. 1 changed file with 299 additions and 0 deletions.
    299 changes: 299 additions & 0 deletions grid.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,299 @@
    @tailwind utilities;

    .offset-0 {
    margin-left: 0;
    }

    .offset-1 {
    margin-left: 8.33333%;
    }

    .offset-2 {
    margin-left: 16.66667%;
    }

    .offset-3 {
    margin-left: 25%;
    }

    .offset-4 {
    margin-left: 33.33333%;
    }

    .offset-5 {
    margin-left: 41.66667%;
    }

    .offset-6 {
    margin-left: 50%;
    }

    .offset-7 {
    margin-left: 58.33333%;
    }

    .offset-8 {
    margin-left: 66.66667%;
    }

    .offset-9 {
    margin-left: 75%;
    }

    .offset-10 {
    margin-left: 83.33333%;
    }

    .offset-11 {
    margin-left: 91.66667%;
    }

    @media (width >= 640px) {
    .sm\:offset-0 {
    margin-left: 0;
    }

    .sm\:offset-1 {
    margin-left: 8.33333%;
    }

    .sm\:offset-2 {
    margin-left: 16.66667%;
    }

    .sm\:offset-3 {
    margin-left: 25%;
    }

    .sm\:offset-4 {
    margin-left: 33.33333%;
    }

    .sm\:offset-5 {
    margin-left: 41.66667%;
    }

    .sm\:offset-6 {
    margin-left: 50%;
    }

    .sm\:offset-7 {
    margin-left: 58.33333%;
    }

    .sm\:offset-8 {
    margin-left: 66.66667%;
    }

    .sm\:offset-9 {
    margin-left: 75%;
    }

    .sm\:offset-10 {
    margin-left: 83.33333%;
    }

    .sm\:offset-11 {
    margin-left: 91.66667%;
    }
    }

    @media (width >= 768px) {
    .md\:offset-0 {
    margin-left: 0;
    }

    .md\:offset-1 {
    margin-left: 8.33333%;
    }

    .md\:offset-2 {
    margin-left: 16.66667%;
    }

    .md\:offset-3 {
    margin-left: 25%;
    }

    .md\:offset-4 {
    margin-left: 33.33333%;
    }

    .md\:offset-5 {
    margin-left: 41.66667%;
    }

    .md\:offset-6 {
    margin-left: 50%;
    }

    .md\:offset-7 {
    margin-left: 58.33333%;
    }

    .md\:offset-8 {
    margin-left: 66.66667%;
    }

    .md\:offset-9 {
    margin-left: 75%;
    }

    .md\:offset-10 {
    margin-left: 83.33333%;
    }

    .md\:offset-11 {
    margin-left: 91.66667%;
    }
    }

    @media (width >= 1024px) {
    .lg\:offset-0 {
    margin-left: 0;
    }

    .lg\:offset-1 {
    margin-left: 8.33333%;
    }

    .lg\:offset-2 {
    margin-left: 16.66667%;
    }

    .lg\:offset-3 {
    margin-left: 25%;
    }

    .lg\:offset-4 {
    margin-left: 33.33333%;
    }

    .lg\:offset-5 {
    margin-left: 41.66667%;
    }

    .lg\:offset-6 {
    margin-left: 50%;
    }

    .lg\:offset-7 {
    margin-left: 58.33333%;
    }

    .lg\:offset-8 {
    margin-left: 66.66667%;
    }

    .lg\:offset-9 {
    margin-left: 75%;
    }

    .lg\:offset-10 {
    margin-left: 83.33333%;
    }

    .lg\:offset-11 {
    margin-left: 91.66667%;
    }
    }

    @media (width >= 1280px) {
    .xl\:offset-0 {
    margin-left: 0;
    }

    .xl\:offset-1 {
    margin-left: 8.33333%;
    }

    .xl\:offset-2 {
    margin-left: 16.66667%;
    }

    .xl\:offset-3 {
    margin-left: 25%;
    }

    .xl\:offset-4 {
    margin-left: 33.33333%;
    }

    .xl\:offset-5 {
    margin-left: 41.66667%;
    }

    .xl\:offset-6 {
    margin-left: 50%;
    }

    .xl\:offset-7 {
    margin-left: 58.33333%;
    }

    .xl\:offset-8 {
    margin-left: 66.66667%;
    }

    .xl\:offset-9 {
    margin-left: 75%;
    }

    .xl\:offset-10 {
    margin-left: 83.33333%;
    }

    .xl\:offset-11 {
    margin-left: 91.66667%;
    }
    }

    @media (width >= 1536px) {
    .\32xl\:offset-0 {
    margin-left: 0;
    }

    .\32xl\:offset-1 {
    margin-left: 8.33333%;
    }

    .\32xl\:offset-2 {
    margin-left: 16.66667%;
    }

    .\32xl\:offset-3 {
    margin-left: 25%;
    }

    .\32xl\:offset-4 {
    margin-left: 33.33333%;
    }

    .\32xl\:offset-5 {
    margin-left: 41.66667%;
    }

    .\32xl\:offset-6 {
    margin-left: 50%;
    }

    .\32xl\:offset-7 {
    margin-left: 58.33333%;
    }

    .\32xl\:offset-8 {
    margin-left: 66.66667%;
    }

    .\32xl\:offset-9 {
    margin-left: 75%;
    }

    .\32xl\:offset-10 {
    margin-left: 83.33333%;
    }

    .\32xl\:offset-11 {
    margin-left: 91.66667%;
    }
    }
  3. georgechang created this gist Apr 30, 2024.
    46 changes: 46 additions & 0 deletions tailwind.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    module.exports = {
    content: ['./null'], // fake directory to suppress warning of no content paths defined
    // only safelist the classes needed for Sitecore grid usage
    safelist: [
    {
    pattern: /^basis-./,
    variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
    pattern: /^grow$/,
    variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
    pattern: /^order-./,
    variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
    pattern: /^(hidden|inline|inline-block|block)$/,
    variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
    pattern: /^(table|table-row|table-cell)$/,
    variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
    pattern: /^(flex|inline-flex)$/,
    variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
    pattern: /^(ml|mr)-0$/,
    variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
    pattern: /^(ml|mr|mx)-auto$/,
    variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    {
    pattern: /^self-(center|end|start)$/,
    variants: ['sm', 'md', 'lg', 'xl', '2xl'],
    },
    ],
    theme: {
    extend: {},
    },
    plugins: [],
    };