Skip to main content

styles module

in neo-jquery now adds core styles module inspired dorian designs videos

using​

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/neo-jquery/css/pin-layout.css" />

layout class​

<section class="layout">
  <header class="header">...</header>
  <article class="content">hello world</article>
  <footer class="footer">..</footer>
</section>

pinterest layout​

<section class="pin-layout">
  <img 
      src="https://images.unsplash.com/photo-1638823646453-8981014119de?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc0NzQyMA&ixlib=rb-1.2.1&q=85" 
      alt="example1" 
      class="pin-layout-img"
  >
  <img 
      src="https://images.unsplash.com/photo-1639075302466-4164e99fe0f7?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc0NzQyMA&ixlib=rb-1.2.1&q=85" 
      alt="example2" 
      class="pin-layout-img"
  >
  <img 
      src="https://images.unsplash.com/photo-1639384420204-d2a739dd6e92?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc0NzQyMA&ixlib=rb-1.2.1&q=85" 
      alt="example3" 
      class="pin-layout-img"
  >
  <img 
      src="https://images.unsplash.com/photo-1639577171043-0836b682c65f?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc0NzQyMA&ixlib=rb-1.2.1&q=85" 
      alt="example4" 
      class="pin-layout-img"
  >
  <img 
      src="https://images.unsplash.com/photo-1638857730240-d3d3f28794a9?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc0NzUwNw&ixlib=rb-1.2.1&q=85" 
      alt="example5" 
      class="pin-layout-img"
  >
  <img 
      src="https://images.unsplash.com/photo-1640044395260-780aaca29e2f?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc0NzQyMA&ixlib=rb-1.2.1&q=85" 
      alt="example6" 
      class="pin-layout-img"
  >
  <img 
      src="https://images.unsplash.com/photo-1640333560852-ea96893a871d?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc0NzQyMA&ixlib=rb-1.2.1&q=85" 
      alt="example7" 
      class="pin-layout-img"
  >
  <img 
      src="https://images.unsplash.com/photo-1639233021917-3eda2d224b67?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc0NzUwNw&ixlib=rb-1.2.1&q=85" 
      alt="example8" 
      class="pin-layout-img"
  >
  <img 
      src="https://images.unsplash.com/photo-1639422839168-ba0bd0d21d8b?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc0NzUwNw&ixlib=rb-1.2.1&q=85" 
      alt="example8" 
      class="pin-layout-img"
  >
  <img 
      src="https://images.unsplash.com/photo-1639858293169-7be9aa3215aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDc0NzUwNw&ixlib=rb-1.2.1&q=85" 
      alt="example" 
      class="pin-layout-img"
  >
</section>