diff --git a/components/layouts/tileContainer.js b/components/layouts/tileContainer.js index 77c3a5ba0..df86cd8f7 100644 --- a/components/layouts/tileContainer.js +++ b/components/layouts/tileContainer.js @@ -1,7 +1,10 @@ import styles from "./tileContainer.module.css"; -const TilesContainer = ({ children }) => { - return
{children}
; +const TilesContainer = ({ layout, children }) => { + const classes = + layout == "list" ? styles.ListContainer : styles.GridContainer; + + return
{children}
; }; export default TilesContainer; diff --git a/components/layouts/tileContainer.module.css b/components/layouts/tileContainer.module.css index 767615fae..70263c60f 100644 --- a/components/layouts/tileContainer.module.css +++ b/components/layouts/tileContainer.module.css @@ -1,3 +1,7 @@ -.Container { +.GridContainer { @apply grid grid-cols-6 gap-4 mb-12; } + +.ListContainer { + @apply flex flex-col gap-4 mb-12; +} diff --git a/content/get-started/installation/anaconda-distribution.md b/content/get-started/installation/anaconda-distribution.md index d49c877e8..73c1aae95 100644 --- a/content/get-started/installation/anaconda-distribution.md +++ b/content/get-started/installation/anaconda-distribution.md @@ -9,9 +9,22 @@ This page walks you through installing Streamlit locally using Anaconda Distribu ## Prerequisites -Anaconda Distribution includes Python so all you need beforehand is your favoriate code editor. +1. **A code editor** -- We use [VS Code](https://code.visualstudio.com/download) in our tutorials. + Anaconda Distribution includes Python and basically everything you need to get started. + The only thing left for you to choose is a code editor. + + Our favorite editor is [VS Code](https://code.visualstudio.com/download), which is also what we + use in all our tutorials. + +1. **Knowledge about environment managers** + + Environment managers create virtual environments to isolate Python package installations between + projects. For a detailed introduction to Python environments, check out + [Python Virtual Environments: A Primer](https://realpython.com/python-virtual-environments-a-primer/). + + But don't worry! In this guide we'll teach you how to install and use an environment manager + (Anaconda). ## Install Anaconda Distribution diff --git a/content/get-started/installation/command-line.md b/content/get-started/installation/command-line.md index a3033c7d5..01ff3cf52 100644 --- a/content/get-started/installation/command-line.md +++ b/content/get-started/installation/command-line.md @@ -9,11 +9,40 @@ This page will walk you through creating an environment with `venv` and installi ## Prerequisites -Before you get started, make sure you have Python and a code editor installed. +As with any programming tool, in order to install Streamlit you first need to make sure your +computer is properly set up. More specifically, you’ll need: -- We use [VS Code](https://code.visualstudio.com/download) in our tutorials. -- Streamlit requires [Python 3.8 - Python 3.12](https://www.python.org/downloads/). -- (macOS only) Streamlit also requires [Xcode command line tools](https://mac.install.guide/commandlinetools/4.html). +1. **Python** + + We support [version 3.8 to 3.12](https://www.python.org/downloads/). + +1. **A Python environment manager** (recommended) + + Environment managers create virtual environments to isolate Python package installations between + projects. + + We recommend using virtual environments because installing or upgrading a Python package may + cause unintentional effects on another package. For a detailed introduction to Python + environments, check out + [Python Virtual Environments: A Primer](https://realpython.com/python-virtual-environments-a-primer/). + + For this guide, we'll be using `venv`, which comes with Python. + +1. **A Python package manager** + + Package managers handle installing each of your Python packages, including Streamlit. + + For this guide, we'll be using `pip`, which comes with Python. + +1. **Only on MacOS: Xcode command line tools** + + Download Xcode command line tools using [these instructions](https://mac.install.guide/commandlinetools/4.html) + in order to let the package manager install some of Streamlit's dependencies. + +1. **A code editor** + + Our favorite editor is [VS Code](https://code.visualstudio.com/download), which is also what we use in + all our tutorials. ## Create an environment using `venv` diff --git a/content/get-started/installation/index.md b/content/get-started/installation/index.md index bc52a08b8..21f5b0217 100644 --- a/content/get-started/installation/index.md +++ b/content/get-started/installation/index.md @@ -5,13 +5,13 @@ slug: /get-started/installation # Installation -There are multiple ways to set up your development environment and install Streamlit. Read below to understand these options. Developing locally with Python installed on your own computer is the most common scenario. +There are multiple ways to set up your development environment and install Streamlit. Read below to +understand these options. Developing locally with Python installed on your own computer is the most +common scenario. -
+## Summary for experts -## Summary for local development - -1. Set up your Python development environment. (See below for explanation.) +1. Set up your Python development environment. 2. Run: ```bash pip install streamlit @@ -22,35 +22,34 @@ There are multiple ways to set up your development environment and install Strea ``` 4. Jump to our [Main concepts](/get-started/fundamentals/main-concepts). -
+## Installation steps for the rest of us + + + + + +##### Option 1: I'm comfortable with the command line + +Install Streamlit on your own machine using tools like `venv` and `pip`. -## Python environments + -As with any programming tool, in order to install Streamlit you first need to make sure your computer is properly set up. More specifically, you’ll need: + -1. Python -2. A Python environment manager (recommended) -3. A Python package manager +##### Option 2: I prefer a graphical interface -Environment managers create virtual environments to isolate Python package installations between projects. Within an environment, a package manager handles installing each of your Python packages, including Streamlit. We recommend using virtual environments because installing or upgrading a Python package may cause unintentional effects on another package. For a detailed introduction to Python environments, check out [Python Virtual Environments: A Primer](https://realpython.com/python-virtual-environments-a-primer/). +Install Streamlit using the Anaconda Distribution graphical user interface. This is also the best +approach if you're on Windows and don't have Python set up. -### Option 1: I'm comfortable with the command line. + - - - - + -### Option 2: I prefer a graphical interface. +##### Option 3: I'd rather use a Cloud-based environment - - - - +Use Streamlit Cloud with GitHub Codespaces, so you don't have to go through the trouble of +installing Python, setting up an environment, etc. -### Option 3: I don't want to install anything on my computer. + - - - - +