quasar-based-breakpoints-grid-css

Lightweight CSS utility library with responsive grid classes based on Quasar Framework breakpoints.

No dependencies. No JavaScript. Just CSS.

Instalação

# bun
bun add quasar-based-breakpoints-grid-css

# npm
npm install quasar-based-breakpoints-grid-css

# pnpm
pnpm add quasar-based-breakpoints-grid-css

Uso rápido

Você pode importar de 2 formas:

1) Em arquivo CSS (ex.: app.css)

@import 'quasar-based-breakpoints-grid-css';

2) Em arquivo de entrada JS/TS (ex.: main.ts)

import 'quasar-based-breakpoints-grid-css';

CDN (HTML puro)

<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/index.css"
/>

Integração por framework

Svelte (SvelteKit ou Svelte + Vite)

Opção recomendada (app.css)

No arquivo src/app.css:

@import 'quasar-based-breakpoints-grid-css';

No arquivo de entrada (src/main.ts no Svelte + Vite) mantenha:

import './app.css';

Opção alternativa (main.ts)

import 'quasar-based-breakpoints-grid-css';
import './app.css';

Vue (vanilla com Vite)

Opção recomendada (app/style CSS)

No src/style.css (ou src/assets/main.css):

@import 'quasar-based-breakpoints-grid-css';

No src/main.ts:

import { createApp } from 'vue';
import App from './App.vue';
import './style.css';

createApp(App).mount('#app');

Opção alternativa (main.ts)

import 'quasar-based-breakpoints-grid-css';

React JS (Vite ou CRA)

Opção recomendada (app/index CSS)

No src/app.css ou src/index.css:

@import 'quasar-based-breakpoints-grid-css';

No src/main.jsx/src/main.tsx:

import './app.css';

Opção alternativa (main)

import 'quasar-based-breakpoints-grid-css';

Quasar Framework

Opção recomendada (app.scss/app.css)

No src/css/app.scss (ou src/css/app.css):

@import 'quasar-based-breakpoints-grid-css';

Esse arquivo já costuma ser carregado pelo Quasar automaticamente.

Opção alternativa (main.ts)

Se seu projeto tiver um arquivo de entrada src/main.ts:

import 'quasar-based-breakpoints-grid-css';

Nuxt JS (Nuxt 3)

Opção recomendada (nuxt.config + app.css)

No assets/css/app.css:

@import 'quasar-based-breakpoints-grid-css';

No nuxt.config.ts:

export default defineNuxtConfig({
  css: ['~/assets/css/app.css'],
});

Opção alternativa (direto no nuxt.config.ts)

export default defineNuxtConfig({
  css: ['quasar-based-breakpoints-grid-css'],
});

Breakpoints

| Sigla | Nome | Largura minima | | ----- | ----------- | -------------- | | xs | Extra Small | 0px | | sm | Small | 600px | | md | Medium | 1024px | | lg | Large | 1440px | | xl | Extra Large | 1920px |

Classes disponiveis

Container

| Classe | Descricao | | --------------- | ------------------------------------------ | | .appContainer | Define height: 100dvh no elemento | | .d-grid | Ativa grid de 12 colunas (display: grid) |

Colunas responsivas

O padrao das classes e: g-col-{breakpoint}-{tamanho}

• {breakpoint}: xs, sm, md, lg ou xl
• {tamanho}: de 1 a 12

Exemplos:

| Classe | Comportamento | | -------------- | ---------------------------------- | | .g-col-xs-12 | Ocupa 12 colunas a partir de 0px | | .g-col-sm-6 | Ocupa 6 colunas a partir de 600px | | .g-col-md-4 | Ocupa 4 colunas a partir de 1024px | | .g-col-lg-3 | Ocupa 3 colunas a partir de 1440px | | .g-col-xl-2 | Ocupa 2 colunas a partir de 1920px |

Exemplos

Layout basico responsivo

<div class="d-grid">
  <!-- Ocupa tela inteira no mobile, metade no tablet, 1/3 no desktop -->
  <div
    class="g-col-xs-12 g-col-sm-6 g-col-md-4 g-col-lg-2"
    style="background-color: blueviolet;"
  >
    Card 1
  </div>
  <div
    class="g-col-xs-12 g-col-sm-6 g-col-md-4 g-col-lg-8"
    style="background-color: crimson;"
  >
    Card 2
  </div>
  <div
    class="g-col-xs-12 g-col-sm-6 g-col-md-4 g-col-lg-2"
    style="background-color: brown;"
  >
    Card 3
  </div>
</div>

Sidebar + conteudo principal

<div class="d-grid">
  <aside class="g-col-xs-12 g-col-md-3">Sidebar</aside>
  <main class="g-col-xs-12 g-col-md-9">Conteudo principal</main>
</div>

Layout de pagina inteira

<div class="appContainer d-grid">
  <header class="g-col-xs-12">Header</header>
  <main class="g-col-xs-12 g-col-md-9">Main</main>
  <aside class="g-col-xs-12 g-col-md-3">Aside</aside>
</div>

Como funciona

As classes de coluna usam grid-column: span N, onde N e o numero de colunas que o elemento vai ocupar dentro de um grid de 12 colunas.

As classes sao cumulativas: uma classe g-col-sm-6 continua valendo em telas md, lg e xl, a menos que voce sobrescreva com outra classe de breakpoint maior.

License

MIT