![]() grids within grids), but that's not ideal. We could apply display: grid to each of these too (i.e. What we want to do is lay out our s and s on this grid. It's not the, , or even the s we're concerned with though. This won't break anything if the browser doesn't support it (it will carry on using display:table). The first thing we do is apply display: grid to the to make it a grid. Go read Rachel Andrew's The New CSS Layout or A Complete Guide to Grid and when you're done wondering where Grid was all your life, come back to me. I'll skip giving an introduction to Grid in this article. It's extremely powerful and simple, allowing you to implement previously tricky layouts with minute amounts of code. Following that, how we leverage Grid to allow users to resize columns, which would be a lot more awkward with regular table-layout CSS. Next, I'll show you how we enhance it with CSS Grid. To begin with, we lay the table out as best we can using regular old-school table-layout CSS. Sorry the GIF is a bit janky, I provide some interactive examples below. As a result this table will be vertically and horizontally scrollable for a lot of salespeople. Date columns should take up less room than long text columns.Ĭolumns must have a minimum width and therefore only so many can fit into the viewport. short / long text, date, number, URL, etc. Column widths then should be determined by their content and the type of values they contain e.g. The table should fill the width of the screen (at least). There are no major layout changes beyond this point but we still want to display the columns as best as we can for the salesperson viewing it.Īssume there are a lot of columns (we'll look at how the user can configure the columns in more detail later). Once we have enough pixels in our canvas to play with, we switch to a more typical table layout such that the columns are. Consider what your users are trying to achieve and choose wisely. There are several existing patterns you could pick from. What a list view looks like on a narrow screen. #Grid control text overflow ellipsis full#We start with the most narrow / constrained variant first and tweak the layout based on content, design, use cases (we don't have device-orientated breakpoints).Īt its most minimal, the columns are stacked vertically within rows, spanning the full width of the screen. It's not like an Excel spreadsheet - we can do a better job at laying out the data, which there will be a lot of.Įverything we do is responsively designed. Primarily it allows salespeople to scan a list of items like their leads or contacts, and find anything important they need to take action on. Namely, how we lay out data-heavy tables, how we support resizing of columns, and more.įirst, I need to give some more context, starting with the purpose and design goals of these screens. I'll focus on how we added a lot of flexibility with a few lines of CSS (Grid). I could talk about it for days but I won't bore you. It's a powerful page component which exists seven times in the app - a table on steroids essentially. One interesting piece of the Teamwork CRM puzzle was the "list view". Now that we've launched, I can finally talk about the secret project I've been working on for the last two years. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |