They do NOT appear on your grid they’re found when people click your profile pic. They can have music and gifs and animations and - crucially - links, added to them, natively in Instagram. because they’re only really intended to be viewed on phones. They’re orientated as portrait rather than landscape or square. Stories are 15 second videos (or a longer video broken into 15s chunks) or a 7 second-long still. Shots of objects from Special Collections often get engagement, like this one from the BL. It’s worth noting that not all your posts have to be about your library: images of the geographic location you’re in are often popular, as in this Liverpool Uni Library example. Remember: pictures of Words do not work! Shots of library interiors seem to do really well, as to shots of library exteriors… Archive photography is always popular. A perfect shot of a book, taken on an expensive camera, will reach fewer people than a nice picture of your library’s interior taken on your phone. ![]() In the library world, it’s photos of interesting things that do well here, rather than incredible photography per se. You might post a few times a week to the Grid, even if you post more often to Stories. It’s what people see when they click on your profile. The Grid is the bread-and-butter, the ‘main’ posts you put on your Instagram account. At small screens, rather than reducing the number of columns, the content is told to span all twelve columns, giving the impression of being a single full-width column.So, what do you post, and where should it go? At the time of writing, there are four ways to post Instagram content. Imagine a current CSS grid framework with a 12 column grid. Let’s instead leave it set to stretch and turn our grid item into a flex id Using negative line numbers can be really helpful The default for align-items is stretch - as soon as you set it to any other value, it no longer fills the space. We can use the align-items property with a value of center but now the background doesn’t fill the whole area of the item. We want to vertically center the text inside a grid item but we want the background (whether a color, a gradient or an image) to cover the items entire grid area. You can turn a grid item into a flex container. Grid is for layout of items in two dimensions – rows AND columns. CSS grid is for two dimensional layout.įlexbox is essentially for laying out items in a single dimension – in a row OR a column.Flexbox is for one dimensional layout (row or column).It’s worth reading Jake Archibald’s blog post Don’t use flexbox for overall page layout. You may have seen people using flexbox to construct grid systems but that’s not what flexbox was designed for. Grid and flexbox can act in similar ways. Grid is designed to be used with flexbox, not instead of it Your grid areas can only be rectangles (like the left), not arbitrary polygons (like the right). You’ll work this out pretty quickly for yourself. IE and Edge have old implementations different from the current spec, and are therefore not recommended for experimenting with grid at this point in time. ![]() In Chrome enter `chrome://flags` into your address bar, find ‘Enable experimental Web Platform features’ and click enable. It is currently the only browser to have such a tool. Meanwhile, Firefox has an invaluable add-on called CSS Grid Inspector, which can display the lines of your grid. Chrome Canary currently has the best implementation. Until then you will need to enable grid for it to work (except in Firefox Nightly where it is enabled by default). That makes learning the whole thing a bit less intimidating.ĬSS grid looks set to land in browsers in early 2017. I like this idea of learning little bite-sized chunks about grid layout, through isolated examples where possible. In this article he’s going to hop around to different concepts that he’s learned on that journey. ![]() Oliver has been working with CSS grid layout and has learned quite a bit along the way. The following is a guest post by Oliver Williams.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |