bismillahcss/src/components/grid.css

The next-gen utility-first CSS framework for modern, futuristic web development.

/* ============================= */
/* 📐 BismillahCSS - Grid System */
/* ============================= */

.bismillah-grid {
display: grid;
    gap: 10px;
}
/* 🌐 Columns */
  .bismillah-grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
/* 📏 Rows */
  .bismillah-grid-rows-2 {
grid-template-rows: repeat(2, 1fr);
}
/* 🔄 Justify */
  .bismillah-justify-start {
justify-content: start;
}
/* 🧭 Alignment */
  .bismillah-align-start {
align-items: start;
}
.bismillah-align-center {
align-items: center;
}
.bismillah-align-end {
align-items: end;
}



/* ============================= */
/* 🌟 BismillahCSS - Advanced Utilities */
/* ============================= */

/* ===== Advanced Layout Utilities ===== */
.bismillah-grid-masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  grid-auto-flow: dense;
}

.bismillah-grid-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: 
    "a a b c"
    "a a d d"
    "e f g g"
    "h h h h";
}

.bismillah-grid-area-a { grid-area: a; }
.bismillah-grid-area-b { grid-area: b; }
.bismillah-grid-area-c { grid-area: c; }
.bismillah-grid-area-d { grid-area: d; }
.bismillah-grid-area-e { grid-area: e; }
.bismillah-grid-area-f { grid-area: f; }
.bismillah-grid-area-g { grid-area: g; }
.bismillah-grid-area-h { grid-area: h; }

.bismillah-aspect-16-9 { aspect-ratio: 16/9; }
.bismillah-aspect-4-3 { aspect-ratio: 4/3; }
.bismillah-aspect-1-1 { aspect-ratio: 1/1; }
.bismillah-aspect-2-3 { aspect-ratio: 2/3; }
.bismillah-aspect-9-16 { aspect-ratio: 9/16; }

/* ===== Advanced Typography ===== */
.bismillah-text-balance {
  text-wrap: balance;
}

.bismillah-text-pretty {
  text-wrap: pretty;
}

.bismillah-text-stroke-sm {
  -webkit-text-stroke: 1px currentColor;
}

.bismillah-text-stroke-md {
  -webkit-text-stroke: 2px currentColor;
}

.bismillah-text-stroke-lg {
  -webkit-text-stroke: 3px currentColor;
}

.bismillah-text-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bismillah-text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bismillah-text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Advanced Animations ===== */
@keyframes bismillah-float-wave {
  0%, 100% { transform: translateY(0) rotate(0); }
  25% { transform: translateY(-10px) rotate(-2deg); }
  75% { transform: translateY(10px) rotate(2deg); }
}

.bismillah-animate-float-wave {
  animation: bismillah-float-wave 5s ease-in-out infinite;
}

@keyframes bismillah-typing {
  from { width: 0; }
  to { width: 100%; }
}

.bismillah-animate-typing {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid;
  width: 0;
  animation: bismillah-typing 3.5s steps(40, end) forwards,
             bismillah-blink-caret 0.75s step-end infinite;
}

@keyframes bismillah-blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: currentColor; }
}

@keyframes bismillah-perspective-flip {
  0% { transform: perspective(800px) rotateY(0); }
  100% { transform: perspective(800px) rotateY(360deg); }
}

.bismillah-animate-perspective-flip {
  animation: bismillah-perspective-flip 2s ease-in-out;
  transform-style: preserve-3d;
}

/* ===== Advanced Filters ===== */
.bismillah-filter-duotone-blue-red {
  filter: brightness(0.5) sepia(1) hue-rotate(-30deg) saturate(5);
}

.bismillah-filter-duotone-purple-yellow {
  filter: brightness(0.5) sepia(1) hue-rotate(200deg) saturate(5);
}

.bismillah-filter-vintage {
  filter: sepia(0.3) contrast(1.1) brightness(1.1) saturate(1.5);
}

.bismillah-filter-cyberpunk {
  filter: hue-rotate(90deg) saturate(1.5) brightness(1.2);
}

.bismillah-filter-night-vision {
  filter: brightness(1.2) sepia(0.5) hue-rotate(90deg) saturate(2);
}

/* ===== Advanced Backgrounds ===== */
.bismillah-bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

.bismillah-bg-circuit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bismillah-bg-topography {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23404' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ===== Advanced Interaction Effects ===== */
.bismillah-hover-tilt {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.bismillah-hover-tilt:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(10deg);
}

.bismillah-hover-float-shadow {
  position: relative;
  transition: transform 0.3s ease;
}

.bismillah-hover-float-shadow::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 5%;
  width: 90%;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 80%);
  opacity: 0;
  transition: all 0.3s ease;
}

.bismillah-hover-float-shadow:hover {
  transform: translateY(-10px);
}

.bismillah-hover-float-shadow:hover::after {
  opacity: 1;
  bottom: -10px;
}

/* ===== Advanced Scroll Effects ===== */
.bismillah-scroll-snap-x {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

.bismillah-scroll-snap-y {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 100%;
}

.bismillah-scroll-snap-start {
  scroll-snap-align: start;
}

.bismillah-scroll-snap-center {
  scroll-snap-align: center;
}

.bismillah-scroll-snap-end {
  scroll-snap-align: end;
}

.bismillah-scroll-margin-top-1 { scroll-margin-top: 4px; }
.bismillah-scroll-margin-top-2 { scroll-margin-top: 8px; }
.bismillah-scroll-margin-top-3 { scroll-margin-top: 12px; }
.bismillah-scroll-margin-top-4 { scroll-margin-top: 16px; }
.bismillah-scroll-margin-top-5 { scroll-margin-top: 20px; }

/* ===== Advanced Blend Modes ===== */
.bismillah-blend-multiply { mix-blend-mode: multiply; }
.bismillah-blend-screen { mix-blend-mode: screen; }
.bismillah-blend-overlay { mix-blend-mode: overlay; }
.bismillah-blend-darken { mix-blend-mode: darken; }
.bismillah-blend-lighten { mix-blend-mode: lighten; }
.bismillah-blend-color-dodge { mix-blend-mode: color-dodge; }
.bismillah-blend-color-burn { mix-blend-mode: color-burn; }
.bismillah-blend-hard-light { mix-blend-mode: hard-light; }
.bismillah-blend-soft-light { mix-blend-mode: soft-light; }
.bismillah-blend-difference { mix-blend-mode: difference; }
.bismillah-blend-exclusion { mix-blend-mode: exclusion; }
.bismillah-blend-hue { mix-blend-mode: hue; }
.bismillah-blend-saturation { mix-blend-mode: saturation; }
.bismillah-blend-color { mix-blend-mode: color; }
.bismillah-blend-luminosity { mix-blend-mode: luminosity; }

/* ===== Advanced Backdrop Filters ===== */
.bismillah-backdrop-blur-xs { backdrop-filter: blur(2px); }
.bismillah-backdrop-blur-sm { backdrop-filter: blur(4px); }
.bismillah-backdrop-blur-md { backdrop-filter: blur(8px); }
.bismillah-backdrop-blur-lg { backdrop-filter: blur(12px); }
.bismillah-backdrop-blur-xl { backdrop-filter: blur(16px); }
.bismillah-backdrop-blur-2xl { backdrop-filter: blur(24px); }

.bismillah-backdrop-brightness-50 { backdrop-filter: brightness(0.5); }
.bismillah-backdrop-brightness-75 { backdrop-filter: brightness(0.75); }
.bismillah-backdrop-brightness-125 { backdrop-filter: brightness(1.25); }
.bismillah-backdrop-brightness-150 { backdrop-filter: brightness(1.5); }

.bismillah-backdrop-contrast-50 { backdrop-filter: contrast(0.5); }
.bismillah-backdrop-contrast-75 { backdrop-filter: contrast(0.75); }
.bismillah-backdrop-contrast-125 { backdrop-filter: contrast(1.25); }
.bismillah-backdrop-contrast-150 { backdrop-filter: contrast(1.5); }

.bismillah-backdrop-grayscale { backdrop-filter: grayscale(1); }
.bismillah-backdrop-sepia { backdrop-filter: sepia(1); }
.bismillah-backdrop-invert { backdrop-filter: invert(1); }

/* ===== Advanced Shapes ===== */
.bismillah-shape-blob-1 {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.bismillah-shape-blob-2 {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.bismillah-shape-blob-3 {
  border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
}

.bismillah-shape-diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.bismillah-shape-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.bismillah-shape-star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.bismillah-shape-message {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

/* ===== Advanced Gradients ===== */
.bismillah-gradient-conic {
  background: conic-gradient(from 0deg at 50% 50%, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
}

.bismillah-gradient-mesh {
  background: radial-gradient(circle at 0% 0%, #ff0000 0%, transparent 50%),
              radial-gradient(circle at 100% 0%, #00ff00 0%, transparent 50%),
              radial-gradient(circle at 100% 100%, #0000ff 0%, transparent 50%),
              radial-gradient(circle at 0% 100%, #ffff00 0%, transparent 50%);
}

.bismillah-gradient-rainbow-text {
  background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bismillah-gradient-aurora {
  background: linear-gradient(135deg, 
    rgba(76, 209, 55, 0.7),
    rgba(53, 235, 144, 0.7), 
    rgba(40, 175, 176, 0.7), 
    rgba(72, 126, 176, 0.7), 
    rgba(146, 82, 162, 0.7));
  background-size: 400% 400%;
  animation: bismillah-aurora 15s ease infinite;
}

@keyframes bismillah-aurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== Advanced Scrollbar Styling ===== */
.bismillah-scrollbar-thin {
  scrollbar-width: thin;
}

.bismillah-scrollbar-none {
  scrollbar-width: none;
}

.bismillah-scrollbar-none::-webkit-scrollbar {
  display: none;
}

.bismillah-scrollbar-fancy::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.bismillah-scrollbar-fancy::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.bismillah-scrollbar-fancy::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ff0080, #7928ca);
  border-radius: 4px;
}

.bismillah-scrollbar-fancy::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #7928ca, #ff0080);
}

/* ===== Advanced Print Styles ===== */
@media print {
  .bismillah-print-hide {
    display: none !important;
  }
  
  .bismillah-print-show {
    display: block !important;
  }
  
  .bismillah-print-break-before {
    page-break-before: always;
  }
  
  .bismillah-print-break-after {
    page-break-after: always;
  }
  
  .bismillah-print-break-inside-avoid {
    page-break-inside: avoid;
  }
}

/* ===== Advanced Container Queries ===== */
@container (min-width: 400px) {
  .bismillah-container-sm {
    font-size: 1rem;
  }
}

@container (min-width: 600px) {
  .bismillah-container-md {
    font-size: 1.25rem;
  }
}

@container (min-width: 800px) {
  .bismillah-container-lg {
    font-size: 1.5rem;
  }
}

/* ===== Advanced Accessibility ===== */
.bismillah-focus-visible:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.bismillah-reduced-motion {
  transition: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion) {
  .bismillah-respect-motion-preference {
    transition: none !important;
    animation: none !important;
  }
}

.bismillah-high-contrast {
  border: 3px solid currentColor;
  text-shadow: none;
}

@media (prefers-contrast: high) {
  .bismillah-respect-contrast-preference {
    border: 3px solid currentColor;
    text-shadow: none;
  }
}