{ "cells": [ { "cell_type": "markdown", "id": "ce15239f", "metadata": {}, "source": [ "# Padding & Margin & Spacing, Oh my! (MonsterUI Spacing Guide)\n", "\n", "This guide will cover some essentials about how to properly space apps and what the differences are between:\n", "\n", "- Padding\n", "- Margin\n", "- Spacing\n", "- Gap\n", "\n", "Manipulating the space between components can make a huge difference to the percieved quality of the page. Being able to tweak the spacing can have a big impact!\n", "\n", "> Tip: I find it works best to get everything on the page without adjusting spacing much, and adjusting spacing at the end. \n", "\n", "## Abreviations:\n", "\n", "First a few abbreviations that are helpful to know with tailwind (and a convention we follow in `MonsterUI`).\n", "\n", "- `t`, `b`, `l`, `r` = top, bottom, left, right\n", "- `p`, `m` = padding, margin\n", "- `x`, `y` = horizontal, vertical\n", "\n", "That means:\n", "\n", "- `mt` means margin on top of the element\n", "- `px` means padding on the x axis (both left and right)\n", "- `space-y` means apply spacing on the y axis (both top and bottom)\n", "\n", "## Padding vs Margin\n", "\n", "Margin applies space to the left of the component, and padding applies space on the left inside of the component. \n", "\n", "Please reference the example with cards below:\n", "\n", "- `ml-20` applies space to the left of the card (outside the card)\n", "- `pl-20` applies space on the left inside of the card (inside the card)\n", "\n", "This means that if you want to move the whole thing but keep the actual container unchanged, use margin. If you want to change the container by adding space inside of it, use padding." ] }, { "cell_type": "code", "execution_count": 2, "id": "aef6844a", "metadata": { "scrolled": true }, "outputs": [ { "data": { "text/markdown": [ "```html\n", "
\n", "
\n", "
\n", "

A Simple Card with ml-20

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card with pl-20

\n", "
\n", "
\n", "
\n", "\n", "```" ], "text/plain": [ "div((div((div((h4(('A Simple Card with ml-20',),{'class': 'uk-h4 ', 'style': 'background-color: red'}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card ml-20'}), div((div((h4(('A Simple Card with pl-20',),{'class': 'uk-h4 ', 'style': 'background-color: red'}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card pl-20'})),{'class': 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4'})" ] }, "execution_count": 2, "metadata": {}, "output_type": "execute_result" } ], "source": [ "Grid(\n", " Card(H4(\"A Simple Card with ml-20\",style='background-color: red'), \n", " cls='ml-20'),\n", " Card(H4(\"A Simple Card with pl-20\", style='background-color: red'),\n", " cls='pl-20'))" ] }, { "cell_type": "markdown", "id": "59ed6d0d", "metadata": {}, "source": [ "## Space vs gap\n", "\n", "Spacing and gap are both about setting the space between components.\n", "\n", "+ Spacing applies margin to every element except for the first element in a group. \n", "+ Gap creates a gap between every element in flexbox elements and grids.\n", "\n", ">Rule of thumb: Use Gap when using grids.\n", "\n", "Let's take a look at some grid examples." ] }, { "cell_type": "markdown", "id": "22ad2226", "metadata": {}, "source": [ "#### Grid" ] }, { "cell_type": "code", "execution_count": 8, "id": "a296d044", "metadata": {}, "outputs": [ { "data": { "text/markdown": [ "```html\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "\n", "```" ], "text/plain": [ "div((div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '})),{'class': 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 '})" ] }, "execution_count": 8, "metadata": {}, "output_type": "execute_result" } ], "source": [ "Grid(\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " cls='')" ] }, { "cell_type": "markdown", "id": "286c245f", "metadata": {}, "source": [ "#### Grid with gap" ] }, { "cell_type": "code", "execution_count": 7, "id": "ed24f5d3", "metadata": {}, "outputs": [ { "data": { "text/markdown": [ "```html\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "\n", "```" ], "text/plain": [ "div((div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '})),{'class': 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4'})" ] }, "execution_count": 7, "metadata": {}, "output_type": "execute_result" } ], "source": [ "Grid(\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " cls='gap-4')" ] }, { "cell_type": "markdown", "id": "7bb43e6d", "metadata": {}, "source": [ "#### Grid with space" ] }, { "cell_type": "code", "execution_count": 5, "id": "44130942", "metadata": {}, "outputs": [ { "data": { "text/markdown": [ "```html\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "
\n", "

A Simple Card

\n", "
\n", "
\n", "
\n", "\n", "```" ], "text/plain": [ "div((div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '}), div((div((h4(('A Simple Card',),{'class': 'uk-h4 '}),),{'class': 'uk-card-body space-y-6'}),),{'class': 'uk-card '})),{'class': 'grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 space-x-4 space-y-4'})" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "Grid(\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " Card(H4(\"A Simple Card\")),\n", " cls='space-x-4 space-y-4')" ] }, { "cell_type": "markdown", "id": "50c48f82", "metadata": {}, "source": [ "### Grid with no gap or space\n", "\n", "The first example has no gap or not space applied. As expected this means the cards are flush with each other. Often this is not what you want, because a little space between cards looks much nicer.\n", "\n", "### Grid with gap\n", "\n", "The second example has the same grid but with gap applied. As youc an see, this gives constent space between all elements of the grid looks great!\n", "\n", "### Grid with space\n", "\n", "The third example has the same grid but with space applied. As you can see, it's not really what we want. However it's a really good illustration of how space works so let's notice a few things about it:\n", "\n", "**X Axis**\n", "\n", "- The first card is flush with the left side of the page (no margin)\n", "- The card below it isn't flush with the left side of the page (has margin)\n", "\n", "**Y Axis**\n", "\n", "- The first card is flush with the heading immediately above it (no margin)\n", "- The card top it's right isn't flush with the heading above it (has margin)\n", "\n", "So `space` applies margin to every element except for the first element in a group!\n", "\n", "> Tip: Use your browser developer tools to inspect the examples\n", "\n", "Next, let's look at a form example where `gap` isn't a good choice but `space` works beautifully!" ] }, { "cell_type": "code", "execution_count": null, "id": "36d1949c", "metadata": {}, "outputs": [], "source": [ "Form(DivCentered(H3(\"My Form\")),\n", " LabelInput(\"Name\"),\n", " Grid(LabelInput(\"Phone\"), LabelInput(\"Email\"), cols=2),\n", " cls='')" ] }, { "cell_type": "code", "execution_count": null, "id": "e8c5d280", "metadata": {}, "outputs": [], "source": [ "Form(DivCentered(H3(\"My Form with gap\")),\n", " LabelInput(\"Name\"),\n", " Grid(LabelInput(\"Phone\"), LabelInput(\"Email\"), cols=2),\n", " cls='gap-y-5')" ] }, { "cell_type": "code", "execution_count": 9, "id": "b2566530", "metadata": {}, "outputs": [ { "data": { "text/markdown": [ "```html\n", "
\n", "

My Form with Spacing

\n", "
\n", "
\n", " \n", "
\n", "
\n", "
\n", " \n", "
\n", "
\n", " \n", "
\n", "
\n", "
\n", "```" ], "text/plain": [ "form((div((h3(('My Form with Spacing',),{'class': 'uk-h3 '}),),{'class': 'uk-flex uk-flex-column uk-flex-middle uk-flex-center space-y-4'}), div((label(('Name',),{'for': '', 'class': 'uk-form-label '}), input((),{'id': '', 'class': 'uk-input '})),{'class': 'space-y-2'}), div((div((label(('Phone',),{'for': '', 'class': 'uk-form-label '}), input((),{'id': '', 'class': 'uk-input '})),{'class': 'space-y-2'}), div((label(('Email',),{'for': '', 'class': 'uk-form-label '}), input((),{'id': '', 'class': 'uk-input '})),{'class': 'space-y-2'})),{'class': 'grid grid-cols-2 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 gap-4'})),{'enctype': 'multipart/form-data', 'class': 'space-y-5'})" ] }, "execution_count": 9, "metadata": {}, "output_type": "execute_result" } ], "source": [ "Form(DivCentered(H3(\"My Form with Spacing\")),\n", " LabelInput(\"Name\"),\n", " Grid(LabelInput(\"Phone\"), LabelInput(\"Email\"), cols=2),\n", " cls='space-y-5')" ] }, { "cell_type": "markdown", "id": "85e821ad", "metadata": {}, "source": [ "### Form with no gap or space\n", "\n", "The top form looks a bit scrunched with defaults, but it's certainly passable. There is a bit of a space between the label and it's associated input because of the defaults in MonsterUI.\n", "\n", "### Form with gap\n", "\n", "The second form with gap is identical to the first. Because we're not in a flex element or a grid, it doesn't do anything at all!\n", "\n", "### Form with space\n", "\n", "`Space-y-5` adds vertical space between each child which really spreads out the form for a nice aesthetic. If you recall from the grid example, it does not apply this margin to the first element - but in this situation (and many others) we do not want the spacing above the top element (heading) to be the same as the spacing between the form elements.\n", "\n", "> Tip: Use your browser developer tools to inspect the examples\n" ] }, { "cell_type": "markdown", "id": "83d0f4ea", "metadata": {}, "source": [ "# Further reading\n", "\n", "For further reading, check out the [Tailwind CSS guide](https://tailwindcss.com/docs/margin#adding-margin-to-a-single-side), which other users have found to be a useful as an additional guide." ] } ], "metadata": { "kernelspec": { "display_name": "Python 3 (ipykernel)", "language": "python", "name": "python3" }, "language_info": { "codemirror_mode": { "name": "ipython", "version": 3 }, "file_extension": ".py", "mimetype": "text/x-python", "name": "python", "nbconvert_exporter": "python", "pygments_lexer": "ipython3", "version": "3.12.8" } }, "nbformat": 4, "nbformat_minor": 5 }