With many people using the existing design systems codebase we need to create a new grid system that is as easy or easier to use than the existing one. I would like to move the layout logic to CSS as much as is possible, potentially creating some utility classes or additional ‘layout classes’ for the components. Although the existing system can be quite clear as to what each element is doing, it can also become a little laborious in working out what each grid row or block is doing where. Ideally we want to end up writing less HTML to layout the page. ![]() We want the option to have a full-width element as part of the new grid system, not something that needs CSS to fight against. We have, in the past, written some CSS that would allow for a full-width component, but his had always felt like a hack. Allow full-width componentsĬurrently the grid system is a 14 column grid that becomes centred on the page when viewport is wide enough. ![]() We are not ripping up the existing grid system, it would be too much work, for now, to retrofit all of the existing components to work in a grid that has a different amount of columns, and spacing at various viewport widths. Moving forward I set myself some goals for what I’d like to have achieved in this new grid system: It needs to behave like the existing grid systems It abstracts the layout of the page to its own code, its own system, so the components can ‘fit’ where needed. It could fill the HTML full of divs that may become complex to understand and difficult to edit.Īlthough there is this reliance on several s to lay out the components on a page it does allow a tidy way to place the component code within that page. Using a grid system similar to this can easily create quite the tag soup. To make use of the grid system on a page for a component that would take the full width of the row you would have to write something like this: It was built separating the grid system from the components that would be laid out on the page with a container, a row, an optional column, and a block. ![]() When the site was rebuilt in 2015 the team decided to make use of Sass and Susy, a “lightweight grid-layout engine using Sass”. Looking at the first couple of sketch files I felt this would be a great opportunity to use CSS Grid, to me the newer components need to be laid out on that page and grid would help with this perfectly.Īs well as this layout of the new components and the text within it, imagery would be used that breaks out of the grid and pushes itself into the spaces where the text is aligned. As well as making use of existing components within the design systems component library there are a couple of new components. To start with we are creating a couple of new marketing pages. They currently have a design system in place but they’re looking to push this forward into 2018 with some small and possibly some larger changes. Recently, my client has been looking at creating a few new marketing pages for their website.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |