This guide will help you get started with the User Interface and Design section of your assessment task. We'll cover setting up templates, implementing responsive design with Bootstrap, and adding custom styling.
First, let's create a base.html template that other templates will extend.
This template will include the basic HTML structure, Bootstrap CSS and JS, and any common elements like the navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}My Inventory App{% endblock %}</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
</head>
<body>
<!-- Add your navbar here -->
<!-- Container for content -->
<div class="container mt-4">
{% block content %}
{% endblock %}
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Now, create templates for other pages (e.g., index.html, add_item.html, edit_item.html, view_item.html) that extend the base template:
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block content %}
<h1>Welcome to My Inventory App</h1>
<!-- Add your page-specific content here -->
{% endblock %}
When creating pages like add_item.html, you'll need to update your routes to handle both GET and POST requests. The GET request will display the form, while the POST request will handle form submission. Here's an example of how to modify your add_item route:
@app.route('/add', methods=['GET', 'POST'])
def add_item():
if request.method == 'POST':
# Handle form submission (POST request)
# Extract item data from form
# Add item to database
# Redirect to a success page or item list
return redirect(url_for('index'))
else:
# Display the add item form (GET request)
return render_template('add_item.html')
Bootstrap's grid system is based on a 12-column layout. Use the following classes to create responsive layouts:
.container or .container-fluid for the main wrapper
.row for horizontal groups of columns
.col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* for columns with different breakpoints
Adjust the width of your browser window, or even use Dev Tools to see the boxes below adapt to different layouts.
Example:
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<!-- This column will be full width on small screens,
half width on medium screens,
and one-third width on large screens -->
</div>
</div>
</div>
Some of the suggested Boostrap components to use in your application include:
Navbar: Use a navbar to create a consistent navigation menu across all pages, with links to view all items, add new items, and potentially filter or search the database.
Cards: Implement cards to display individual items (e.g., books, movies, or games) in a visually appealing grid layout, showing key information like title, image, and brief description.
Forms: Utilise Bootstrap's form components to create structured and responsive forms for adding new items or editing existing ones in your database.
Modal: (Extra challenge) Implement modals as an alternative to separate pages for actions like adding, editing, or deleting items, providing a smoother user experience without page reloads.
The example below utilises the four components above to create a movie collection.
To add custom styles without interfering with Bootstrap, create a separate CSS file (e.g., custom.css) and link it after the Bootstrap CSS in your base.html. From here you can identify and add onto the various Bootstrap classes you are using. E.g. .card.
Example custom.css
/* Custom styles for cards */
.card {
transition: transform 0.3s ease-in-out;
}
.card:hover {
transform: scale(1.05);
}
/* Custom button style */
.btn-custom {
background-color: #6c5ce7;
color: white;
}
.btn-custom:hover {
background-color: #5541d8;
color: white;
}
/* Custom background for specific sections */
.custom-bg {
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
}
In your html files:
<div class="custom-bg">
<div class="card">
<!-- Card content -->
</div>
<button class="btn btn-custom">Custom Button</button>
</div>
This is the same example from before (which was pure Bootstrap), now styled with a little custom css.
Remember to test your design on various screen sizes to ensure responsiveness, and use browser developer tools to inspect and adjust your layout as needed. Code and test only one thing at a time.