Skip to main content

neo-jquery css

this is a first css modules for the library this stylesheet is a universal using for browser and js frameworks

css using​

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neo-jquery/css/modules/neo-jquery.module.css" />
// import css
import styles from 'neo-jquery/css/modules/neo-jquery.module.css'

square grid​

<section class="square-grid">
  <img class="img-2x2" src='https://images.unsplash.com/photo-1604145195376-e2c8195adf29?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img class="img-1x1" src='https://images.unsplash.com/photo-1714329781250-64b9125f689c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img class="img-1x1" src='https://images.unsplash.com/photo-1714357779320-235515316e22?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img class="img-2x2" src='https://images.unsplash.com/photo-1714997219788-660af304f464?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img class="img-1x1" src='https://images.unsplash.com/photo-1715089908179-46e5bfa8a44a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img class="1x1" src='https://images.unsplash.com/photo-1715257742105-b4f626ce3c2d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDY5OTl8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img class="img-2x1" src='https://images.unsplash.com/photo-1714818282987-7d61de55302e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDkwNTN8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img class="img-1x1" src='https://images.unsplash.com/photo-1715276611450-c4f735a0f7e6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDkwNTN8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img class="img-1x1" src='https://images.unsplash.com/photo-1716500158551-2832edbe6eb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NDkwNTN8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
</section>

carrousel​

<section class="carousel">
  <img src='https://images.unsplash.com/photo-1714572877812-7b416fbd4314?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExMTJ8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1531603845872-e4a07041f521?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExMzR8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1552452380-4137214f33b6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExMzR8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1597071622990-3a4ed91035b0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExMzR8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1508325732378-00eafff6c504?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExODh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1578995296899-f5e717c934b0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTExODh8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
</section>
/* if using custom vars*/
.carrousel {
  --carousel-height: ;
  --carousel-width: ;
  --carousel-radius: ;
	
  & img {
    --img-height: ;
  }
}

grid-auto-columns​

<section class="grid-auto-columns">
  <img src='https://images.unsplash.com/photo-1714394692179-022d20b92995?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTIzNjB8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1714428203754-7d5fbfc5f6c0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTIzNjB8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1714573807782-d1ecd741a9fc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTIzNjB8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1716316858979-1bd9fd9da3a5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTIzNjB8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1714733710303-14d96608272a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTI5OTV8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
  <img src='https://images.unsplash.com/photo-1715412406617-e76cd73e644d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTY5NTI5OTV8&ixlib=rb-4.0.3&q=80&w=400' alt=''>
</section>