Sizing
How to apply responsive sizing to parts.
Last updated
Was this helpful?
How to apply responsive sizing to parts.
Last updated
Was this helpful?
Appeggio's parts and templates are already sized to be responsive across all device sizes. However, it's important to know how to review your pages for responsiveness and make any changes necessary.
The size selector is in the middle of the top toolbar and shows what your app will look like across a range of screen sizes:
mobile with an extra small screen (XS size 1),
mobile with a small screen (Sm size 2),
tablet with a medium screen (Md size 3),
web with a large screen (Lg size 4),
web with an extra-large screen (Xl size 5),
web with a huge screen (2Xl size 6),
and to fit the screen (size 7).
When you select any of the screen sizes, you'll see what your app will look like for that particular size. That is when you may notice that you need to resize some parts to be suitable for a particular screen size.
Appeggio has made it as easy as possible for you to do just that, and all of our parts can be adjusted to best suit the various screen sizes.
All parts within Appeggio can be sized, and many can be sized specifically for device size to ensure responsiveness.
Select the part you want to size. The Size Editor will be activated in the right menu, and you can toggle between width and height:
It's important to note that setting a width and a height means that the width and height chosen are fixed for each device size they are entered for.
If, for example, you set the width of a part to 100px for x-small and up, then all of the device sizes will show that part at the width of 100px. If you then set a width of 200px at medium size and up, the 100px will remain for the x-small and small devices; and at medium size and up the part will reflect the 200px size.
Both the width and the height fields can be set to "full". In these cases, the parts will take up as much space as their container will let them. In the case of images, setting the width to "full" will usually place the image vertically into the center of its container.
Minimum width and height provide the minimum width or height the part will be for the device, and the same goes for maximum width and height.
In the example below, there is an image in between some columns. The image is very large, and you'll see that when the width is set to "full", the image increases in size and is centered in its column. Then the image has a maximum height set at 500px. Because the original image is larger than 500px in height, the size of 500 remains constant at all screen sizes.
Many of the parts created in Appeggio are built in rows and columns. Columns have an additional sizing property known as 'span'.
Columns are an awesome way to lay out content and are easy to make responsive.
Appeggio assumes that the span of any screen is twelve cells. Setting a column to a span of twelve therefore means that the column takes the full width of the screen. Likewise, a column with a span of six takes up half of the screen; a column with a span of four takes up a third of the screen; and a column with a span of three takes up a quarter.
Below is an example of a row containing six columns. You'll see that on the XL screen size, there are six columns each with a span of two, filling the width of the screen. In the LG screen size, the columns each span four (resulting in three columns fitting across the screen, and stacking the next three columns underneath), the SM size columns each span six (resulting in two columns fitting across the screen, and stacking the rest underneath), and the XS columns each span twelve (resulting in only one column fitting across the screen, all stacked on top of each other).
Setting a column's span to "auto" means that the column will take up as much space as the content that exists within it.
Some parts come with preset sizes, as well as the ability to set the exact size. These include buttons, icons, badges, tables, and several form parts including file input, text input, text area input, ratings, range, radio buttons, and checkboxes.
The preset sizes can also be made responsive. Here is an example of a standard button that has been assigned different sizes according to breakpoints. As the device size gets bigger, so does the button:
#responsive design #alignment #vertical alignment #horizontal alignment
