08-Advanced Widget Styling with Layout.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Advanced Widget Styling with Layout\n",
    "\n",
    "This notebook expands on the **Widget Styling** lecture by describing the various HTML and CSS adjustments that can be made through the `layout` attribute."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## The `layout` attribute\n",
    "Jupyter interactive widgets have a `layout` attribute exposing a number of CSS properties that impact how widgets are laid out.\n",
    "\n",
    "### Exposed CSS properties\n",
    "<div class=\"alert alert-info\" style=\"margin: 20px\">The following properties map to the values of the CSS properties of the same name (underscores being replaced with dashes), applied to the top DOM elements of the corresponding widget.</div>\n",
    "\n",
    "#### Sizes\n",
    "* `height`\n",
    "* `width`\n",
    "* `max_height`\n",
    "* `max_width`\n",
    "* `min_height`\n",
    "* `min_width`\n",
    "\n",
    "#### Display\n",
    "* `visibility`\n",
    "* `display`\n",
    "* `overflow`\n",
    "* `overflow_x`\n",
    "* `overflow_y`\n",
    "\n",
    "#### Box model\n",
    "* `border`\n",
    "* `margin`\n",
    "* `padding`\n",
    "\n",
    "#### Positioning\n",
    "* `top`\n",
    "* `left`\n",
    "* `bottom`\n",
    "* `right`\n",
    "\n",
    "#### Flexbox\n",
    "* `order`\n",
    "* `flex_flow`\n",
    "* `align_items`\n",
    "* `flex`\n",
    "* `align_self`\n",
    "* `align_content`\n",
    "* `justify_content`\n",
    "\n",
    "### Shorthand CSS properties\n",
    "\n",
    "You may have noticed that certain CSS properties such as `margin-[top/right/bottom/left]` seem to be missing. The same holds for `padding-[top/right/bottom/left]` etc.\n",
    "\n",
    "In fact, you can atomically specify `[top/right/bottom/left]` margins via the `margin` attribute alone by passing the string `'100px 150px 100px 80px'` for a respectively `top`, `right`, `bottom` and `left` margins of `100`, `150`, `100` and `80` pixels.\n",
    "\n",
    "Similarly, the `flex` attribute can hold values for `flex-grow`, `flex-shrink` and `flex-basis`. The `border` attribute is a shorthand property for `border-width`, `border-style (required)`, and `border-color`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "metadata": {},
   "outputs": [],
   "source": [
    "import ipywidgets as widgets\n",
    "from IPython.display import display"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Conclusion\n",
    "\n",
    "You should now have an understanding of how to style widgets!"
   ]
  }
 ],
 "metadata": {
  "cell_tags": [
   [
    "<None>",
    null
   ]
  ],
  "kernelspec": {
   "display_name": "Python 3",
   "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.6.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}