Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode 🚀 ☄️.

  • By Meraki UI
  • Last update: Jan 7, 2023
  • Comments: 11

Meraki UI logo

Meraki UI

🎉 🚀 Beautiful Tailwindcss components that support RTL languages & fully responsive based on Flexbox & CSS Grid 🏗 .

Resources

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run generate

Credits

License

The MIT License (MIT). Please see License File for more information.

Github

https://github.com/merakiui/merakiui

Comments(11)

  • 1

    Prettier as git hook

    Hey @Miaababikir any specific reason for this workflow: https://github.com/merakiui/merakiui/blob/master/.github/workflows/format_prettier.yml ?

    As far as I understood it is there to format the code only, right? If so, how about using git hooks to do so and the workflow just to actually check if the code has been formatted (could be useful for tests as well)?

    This way, every time you commit it will fire Prettier and every time a PR is opened the lint check will be fired.

  • 2

    Missing closing Tags for Sidebars

    Description

    I haven't actually cloned locally and tested but when I tried to copy the tailwind component it wasn't working due to the missing closing tags.

    Not sure if it's allowed in Vue though

  • 3

    Bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 4

    Bump parse-url from 6.0.0 to 6.0.2

    Bumps parse-url from 6.0.0 to 6.0.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 5

    Resizable frame

    Resizing Component Windows work, but are is slow to load because I am using iframe. There is no other possible way I can think of. There are two components Resizer and Frame. Frame takes a prop code, that is the html code for the component and computes a html document and uses it as srcdoc for iframe, so if we resize the window, the component shows responsive behavior. Resizer wraps the Frame component providing it with a handle to resize it using mouse.

    I have used yarn, so changes in files because of it can be eliminated by simply running "npm install" command.

    It took ages to figure out how to make it work, implement it, integrate and debug it. So even if you don't use this code, I still will like your suggestions/reviews.

  • 6

    Why dont't we filter the row code from vue component ?

    RFC

    Instead of declaring repetitively, why dont't we filter the row code from vue component ?

    Remove the repetitive code

    SuccessPop.vue #L27

    <script>
    export default {
        data() {
            return {
                name: 'Success Pop',
-                code: `
-        <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
-            <div class="flex justify-center items-center w-12 bg-green-500">
-                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
-               </svg>
-            </div>
            
-            <div class="-mx-3 py-2 px-4">
-               <div class="mx-3">
-                    <span class="text-green-500 font-semibold">Success</span>
-                    <p class="text-gray-600 text-sm">Your account was registered!</p>
-               </div>
-            </div>
-        </div>
-            `,
            }
        }
    }
</script>

    Filter code from component file

    Inspired by Turkyden/image-hover

    const requireEffect = require.context('../effects', false, /\.vue$/);
const effectList = requireEffect.keys();

const effects = {};
const components = {};

for (const filename of effectList) {
  const name = filename.replace('./', '').replace('.vue', '');
  const type = name.substring(0, name.indexOf('-'));
  const raw = require(`[email protected]/effects/${name}`).default;
  const component = requireEffect(filename).default;

  const html = /<template>(.*?)<\/template>/g // find html between template tags
    .exec(JSON.stringify(raw))[0]
    .replace(/<\/?template>/g, '') // remove template tags
    .replace(/^\\n/, '') // remove leading linebreak
    .replace(/\\n/g, '\n') // replace escape characters
    .replace(/\\"/g, '"')
    .replace(/^\\r/, '')
    .replace(/\\r/g, '\r');

  const css = /<style scoped>(.*?)<\/style>/g // find css between style tags
    .exec(JSON.stringify(raw))[0]
    .replace(/<\/?style(?: scoped)?>/g, '') // remove style tags
    .replace(/^\\n/, '') // remove leading linebreak
    .replace(/\\n/g, '\n') // replace escape characters
    .replace(/\\"/g, '"')
    .replace(/^\\r/, '')
    .replace(/\\r/g, '\r');

  effects[name] = { name, type, html, css };
  components[name] = component;
}

export { effects, components };

    Usage

    import { components, effects } from "@/assets/effects.js";

    devDependencies

    "raw-loader": "^4.0.1",
  • 7

    All application buttons with transition

    Following up https://github.com/merakiui/merakiui/pull/21

    I've added the same transition to all application buttons (not the ui components). In order to do so I abstracted everything into an AppButton component instead of adding the same classes everywhere. I can also setup a utility class for that if you think it is better.

    By the end I added some hover effect into the scroll-top button and used AppButton. I can also remove it if that is too much.

  • 8

    Apply transition (color) to category buttons

    Hello,

    I really loved the project and would like to suggest this as a minor enhancement. I'm not sure if you're not using transition because you don't want or you just left it as a minor. Nonetheless I decided to open this PR and see what you think.

    I've setup the variant in the tailwind config to allow reduced-motion check.

    The app.css gzip went from 6.32 KiB to 6.40 KiB.

    If you like the approach/idea I can extend it to the other buttons.

  • 9

    Are you familiar with the 0BSD license?

    Not long ago I worked with GitHub to add a new license which is perfect for projects where others are encouraged to copy-paste code—it's called the BSD Zero Clause. If you haven't yet, please consider it as it contains no requirement to carry the license when the code is copied whereas the MIT license does.

    Keep up the great work!

  • 10

    Bump node-fetch from 2.6.6 to 2.6.7

    Bumps node-fetch from 2.6.6 to 2.6.7.

    Release notes

    Sourced from node-fetch's releases.

    v2.6.7

    Security patch release

    Recommended to upgrade, to not leak sensitive cookie and authentication header information to 3th party host while a redirect occurred

    What's Changed

    Full Changelog: https://github.com/node-fetch/node-fetch/compare/v2.6.6...v2.6.7

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 11

    Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

Popular Tag

Related