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>