![]() ![]() ![]() After you’ve created your grid, it’s ok to break it! But at least you’re doing it intentionally and there are reasons for your design decisions. New designers might feel confined by the idea of using a grid but you shouldn’t. Don’t be afraid to break the grid when needed Before you start designing, think about the grid first, rather than leaving it to the end and trying to make your design fit into a grid. It’s one simple step, once you’ve created it, you won’t have to think about it again for all subsequent landing pages. Now that you know what a grid is, different types of grids, and create your own, let’s get into some tips for how best to use them in web design.Īfter you have done your research, maybe even explored some low-fidelity wireframing on paper, create a grid for your landing page. You can adjust how many columns, the gutter width, the column width, and even choose if you want this to be your default grid for future web design projects. This allows for developers to specify selectors that can’t be deleted from the settings page, and for programmaticly building selectors based on dynamic data.From there you can customize your grid however you like. This filter operates on the array of data that gets passed to the JS right before it is passed. You can trigger the event like this: jQuery( window ).trigger( 'equalheights' ) Īnother option for controlling which elements get equalized is the equal_height_columns_elements filter. This is useful if you have added new items to the page after it loads via AJAX. When entering a selector on the settings page or using the initEqualHeights() method this plugin also adds an event ‘equalheights’ to the window, allowing you to easily trigger the equalizing manually. So an example might look like this: jQuery( '.selector' ).initEqualHeights( 200, 500, 768 ) The difference between these two functions is simply that initEqualHeights() will set up all the events for recalculating the heights when the window is resized or the global equalheights event is triggered, but equalizeTheHeights() will simply equalize the heights without involving any events.īoth functions take three optional arguments, the minimum height (number of pixels), maximum height, and the breakpoint (below which the heights will revert to their original size): jQuery( '.selector' ).initEqualHeights( minHeight, maxHeight, breakPoint ) JQuery( '.selector' ).equalizeTheHeights() You can skip entering a selector on the settings page and call the jQuery script yourself using one of two functions: jQuery( '.selector' ).initEqualHeights() Want to trigger the equalizing of the heights manually? No problem. Add/remove column groups by clicking the “+ Add More” and “Remove” buttons.Enter a selector and breakpoint for the first column group. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |