![]() The following code shows what needs to be changed in the cutegrids.css to change the max width of the row. The row max width has been set to 75rem(1200px) but of course this can be changed to what you like. You can of course set your own amount of padding as you wish. Or add to your custom css the following to remove top and bottom padding to the columns. Padding: 0.65rem /* To remove top and bottom padding change to padding: 0 0.65rem */ If you don't want the automatic top and bottom padding on each column then just overide or even change the cutegrids.css if you are comfortable as shown below. Of course the desicion is up to you and there are occasions where this would not be suitable. This descision was made in the end as it seems in most cases to help with the design flow of the page without having to think about giving spacing between each column especially when columns are stacked on mobile devices. It was decided to give each column a top and bottom padding of 0.65rem(10px) which adds to 20px between columns. uncenter-desktop Column top & bottom Padding cute-3-phone, it will not stretch to 100 percent but keep the designated 3 cute columns intact all down the lower device widths. ![]() If the -phone class is set for example to. When the device width is under 48em(768px) the columns will each span out 100 percent.Ĭute-3changes to cute-6-tabletwhen under 800pxīehaviour of columns under class device width.Īll div columns stretch to 100% width and stack when the device has a width lower than the designated class device width except when using the -phone class. ![]() cute-3-laptop class settings device width will inherit the cute column class setting. Each class setting takes affect when the device width is within range. If you reduce the width of your browser you will notice the columns change from 3 cute column state to 6 cute columns which changes the width of the columns. The other wider device widths will inherit this class unless you assign another class with a higher device width setting as in the example below where. cute-3-tablet which spans 3 cute columns each which will apply to device width 48em (768px) and up. To explain in a little more detail the example below has a row containing 4 columns with the class. The example below has 2 columns each spanning 6 cute columns.īelow is an example of all the column widths and class prefixed names without the device name to keep things simple.Īll cute columns classes have a padding of 0.65em(10 px) each side. Then inside that div you need to create more divs with the class of cute followed by the specified column width and a device name. First off you need to create a div with a class of row. Cute grids is based on a 12 column grid which contains rows and columns with each column represented as a cute container to hold your content. Lets get warmed up with cute grids by first explaining how it all works. At the bare minimum make sure you include cutegrids.css file in your head of your page as shown below. normalize.css is also included with cute grids for css reset but if you like please feel free to use your own reset or none if that is the way you hang. This is just a basic example to get started. Let me know how you get on or if you have any questions.įirst check out the index.html file that is included. But who knows maybe a sass version added in the future. It has been built with most features that are seen fit to make your grid work the way you need it to.īy the way this is just clean css. But don't make the mistake of thinking this is a minimum grid system. The idea of cute grids is to clean out all the dirty stuff and leave you with a clean base to let you get on with designing your responsive site the way you like. With too many underused features and over bloated code in many frameworks Of the designer with too many inbuilt design features that can make even the most creative person lazy. Cute grids was made from the frustration of today's world full of large overbuilt frameworks that can be overkill for most projects and restrict the creativity
0 Comments
Leave a Reply. |