In this post, we’ll look at how some of these new properties can be employed on Shopify themes to create dynamic new structures for your clients. Pages using Grid generally tend to have “cleaner” HTML too, since many of the more convoluted methods for positioning (looking at you, clearfix) are avoided.ĬSS Grid introduces a range of new styling properties, which can be used to determine cell sizes, item placement, alignment control, and more. Grid’s component-based model for grouping and laying out page elements allows for full page responsiveness without using complex CSS, which is especially important in a world that is increasingly mobile-first and performance-aware. At its most basic, Grid allows developers to define columns and rows on a page, as well as place elements within cells, or groups of cells. Now that all modern browsers support CSS Grid, developers have the perfect opportunity to experiment with Grid on Shopify themes.įor those new to CSS Grid, it is a relatively recent addition to web development that makes working with page layouts more intuitive and dynamic. One of the hot topics in front end development this past year has been the addition of a new layout system called CSS Grid. To learn more about how to build with Online Store 2.0, visit our updated documentation. While the information in the following article is still correct, it doesn't account for Online Store 2.0 best practices, and may not include references to recent features or functionality. P.S.Online Store 2.0 is an end-to-end overhaul of how themes are built at Shopify, launched June 2021. Thanks for reading the article, if you have any thoughts, suggestions or ideas, please share them in the comments below! Reference to CSS Grid Layout in MDN web docs.I would like to share a couple of resources that I find to be very useful: “Stay true to yourself, yet always be open to learn.” - Phillip Sweet There is no such thing as a perfect tool, every tool has its advantages and disadvantages, so you should go with one that you feel comfortable with and solve the problem in the best possible way!Īnd as Phillip Sweet says, always be open to learn! I will not enter into details or discussions why you should choose Grid over Flexbox or Tables, I just chose to use the Grid simply because I found it very easy to work with, uses less code than the Tables, it’s less complicated than the Flexbox and finally it has a lot of functionalities out of the box, we just need to know how to take the most out of it! Like I usually say: In short, I found CSS Grid very useful and easy to work with and in my opinion, it does have a future and is something that will be very well adopted by the community! Bellow, we have a table built with some fictitious user data. I made sure to choose something smaller so we could have the chance to rollback or change to something else in a way that wouldn’t have a huge impact on the development process and the progress of the application.įor visual purposes let me show a small example how easy it is to use CSS Grid. In one of the projects that I worked at Evodeck, I saw a shot to implement data tables using Grid Layout and decided to give it a try. I have become a fan of CSS Grid since I saw this awesome course by Wes Bos! Grid Layout is a new CSS feature that allows the creation of beautiful and simple layouts with a system of columns and rows to make the design of web pages hassle free! It has support from all major browsers since October 2017. This article aims to give an insight over CSS Grid and provide some examples how I’m making use of it in my daily work.ĭisclaimer: The names used in the article are entirely fictional and any resemblance to reality is purely coincidental.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |