Masonry
astro
Masonry | astro | |
---|---|---|
42 | 510 | |
16,260 | 43,498 | |
- | 2.7% | |
0.0 | 10.0 | |
7 days ago | 2 days ago | |
HTML | TypeScript | |
MIT License | GNU General Public License v3.0 or later |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Masonry
-
Frontend resources! 🚀
Masonry Grid: Create dynamic grid layouts with ease
- Implementing Masonry Grid with HTML, CSS, and JS
-
Help us invent CSS Grid Level 3, a.k.a. "Masonry" layout – WebKit
Probably influenced by the most popular JavaScript library for achieving this type of layout, Masonry[0]. The author notes at the end of the article:
> But do expect the name of this value to change in the future. And perhaps prepare for a future where we call this “columnar grid” or “Grid Level 3” instead of “Masonry”.
[0] https://masonry.desandro.com/
-
JavaScript Libraries That You Should Know
13. Masonry
-
How do I display a list of divs with different sizes like the picture below. I found a component that can do this with images but I want the elements to be divs.
To learn more about the Masonry library and explore its documentation and examples, you can visit the official website: Masonry.
-
Optimised for mobile & tablet but desktop looks off – any ideas / proposals?
Masonry is just what you need. There are libraries like this that you can utilize for this purpose.
-
Was playing the Titanfall campaign last night and thought it might be fun to fold spacetime
Thank you! I purchased a Masonry (https://masonry.desandro.com/) license and built off of one of the layouts. Site runs on a Lucee server and content is populated from MySQL tables. I am using various open source jquery plug-ins for pop-ups and what not.
- Creating this dynamic grid layout
-
How the heck does this work?
It’s called a masonry layout. It is a pain in the ass to implement but there are javascript libraries like Masonry.
-
Creating CSS masonry-style layouts
With no native CSS grid support for masonry layouts, developers relied on using libraries such as Masonry.js or Brick.js to replicate this visual design. These libraries can accomplish masonry-style layouts without CSS by using JavaScript to manipulate the DOM, then placing each element within the appropriate spaces.
astro
-
One does not simply delete cookies
I'm currently building a project using Astro, to which I've added basic authentication via Twitch so users can log in to view their inventory for my new stream game by calling an API on the back end (my Twitch bot). I'm using Astro in SSR mode, and authentication is provided by Auth.js via auth-astro. When using Auth.js to authenticate, it saves three cookies in the browser to remember that you've logged in to this website via Twitch.
-
Ask HN: If you are starting in 2024, what is the most productive solo dev stack?
I rebuilt my personal website[1] (static site) using Astro[2], and it was a pleasant experience.
[1]: https://ivylee.github.io/
[2]: https://astro.build/
-
How to deploy your own website on AWS
or Astro; if you’d like to integrate React, VueJS etc. code as well. use their themes page here to get a starting point.
-
Astro vs Visual Studio 2022 as Static Site Generators
I have spent today learning the new Astro SSG. You can read about it at https://astro.build/ or better yet you can get started with it at https://docs.astro.build/en/install/auto/. While Visual Studio isn't exactly a SSG, they way you code with it can make static web pages. VS has so much more power than that.
-
Website Optimization Using Strapi, Astro.js and OpenAI
We'll use several interesting technologies to achieve this: Strapi CMS to take care of the content management and backend, Astro which is a great new technology for quickly creating blazing fast frontend apps, and ChatGPT to provide the article summaries.
-
Composable architecture example: Go headless (best practices)
Astro
-
Building static websites
Case study 4: Astro
-
Setting up Doom Emacs for Astro Development
Astro is the new hot new web framework on the block. All the cool kids are using it. I've recently given up, drank the Kool-Aid, and gone all in on it.
-
Building a self-creating website with Supabase and AI
Built with Supabase, Astro, Unreal Speech, Stable Diffusion, Replicate, Metropolitan Museum of Art
-
The Subtle Case For and Against React
Astro to use every framework at once instead of just react? https://astro.build/
What are some alternatives?
DataTables - Tables plug-in for jQuery
qwik - Instant-loading web apps, without effort
Tabulator - Interactive Tables and Data Grids for JavaScript
vite - Next generation frontend tooling. It's fast!
Isotope - :revolving_hearts: Filter & sort magical layouts
eleventy 🕚⚡️ - A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
Packery - :bento: Gapless, draggable grid layouts
Hugo - The world’s fastest framework for building websites.
Freewall - Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
SvelteKit - web development, streamlined
gridjs - Advanced table plugin
fresh - The next-gen web framework.