All without requiring me to do code gymnastics to get the design working across multiple devices.Īdditionally, a smaller framework has a much more forgiving learning curve. In fact, Tailwind CSS's uncompressed bundle size is 3.5Mb! The main advantages of lightweight frameworksĪpart from direct improvements in performance, what are some other reasons to use smaller CSS frameworks? Personally, I love the idea of using a framework that gives me quick access to pre-defined layouts and additional style components. But, out of the box, a framework like Tailwind CSS or Bootstrap is not intended to be minimal or lightweight by default. It is typically possible to reduce the size of the bigger frameworks to something much more modest. This bundle size example is relevant in the context of fetching the framework directly through a CDN. I don't need to get caught up with rules and design options that I will never use in practice.Īnd as I said earlier, bundle size for modern frameworks can be absurdly high. Update: The new Almanac report shows that this number has kept rising from 2021 to 2022.įor me, a lightweight CSS framework gives me the tools to create my main containers, assign a few elements to them, and then I can focus on custom styling if I need it. The average size for a webpage today is around 2.5Mb once all the JavaScript has finished rendering. I think one of the trends happening in modern web dev right now is that developers simply don't care about the page size of their final designs. For a simple project - portfolio, blog, resume pages - a framework that has a bundle size of 50kb+ seems a bit overkill. They are all incredible frameworks for building complex and in-depth layout structures.īut, generally speaking, such frameworks are intended for projects where the design transpires across multiple pages. When someone mentions the phrase CSS frameworks, for a lot of people, the first thing that comes to mind is Bootstrap, Tailwind CSS, or Semantic UI. The main advantages of lightweight frameworks.Now comes the most fun and important part, i.e. I’ve used some sample data too in the demo page for a practically-better demonstration. masonry division acts as the masonry container and each. Lorem ipsum dolor sit amet, consectetur adipisicing elit.Īs you can see above, the. It’s nothing but a box with a bunch of objects or items thrown inside. What about spacing between the grid items? The column-gap property solved the gutter problem. The child elements inside the block get aligned as per the specified number of columns.Īnd this gives an effect of a masonry layout, without any involvement of JavaScript. ![]() The column-count propertyĬSS column-count allows you to add a specific number of adjacent columns to any block element. If you are okay with HTML and CSS, this tutorial is going to be easy for you. ![]() ![]() Note: Gutter is the space between the masonry items. Multi-column properties column and column-count collectively lay down the foundation of our masonry.Īfter that, we will also be adding gutter to our masonry with column-gap, its another property. This module allows us to present blocks as part of virtual columns. ![]() I also contributed the outcome of this experiment to a WordPress plugin later on, which was a hit back then.īreaking cover, I’m talking about the CSS multi-column layout module. Before going further, I would like to show you with a demo of what we are going to create:Ībout the secret, I discovered this technique while experimenting with CSS column properties. Not a secret actually, some people have already written about it. Later on, I got success with it using some rarely-used CSS properties. All I got was equal-height columns, which is definitely not a masonry. Not exactly tables, but the table display properties. This is what a masonry pattern looks like I started off by using CSS floats, then tried inline-blocks, ended up in a messed up layout with tables. How about doing pure CSS masonry layouts?īefore moving any further, I have some updates for you about my experiments with CSS masonry:Īfter the launch of Pinterest in 2011, I myself tried creating its lookalike with plain CSS. We already have some solid JavaScript alternatives out there to create masonry layouts. Pinterest has inspired many to do masonry-based layouts on their sites. Published on Maby Rahul Simple yet beautiful pure CSS Masonry layouts Creating a Responsive Pure CSS Masonry Layout
0 Comments
Leave a Reply. |