CSS code splitting. - Githubissues

HarshKapadia2 commented 4 years ago

Split the CSS code in ./static/css/style.css into a file for each page.

Changes

Add the CSS code common to all stylesheets to ./static/css/base.css.
Add the CSS code pertaining to a particular HTML template file to a new CSS file with the same name as the HTML file, to the ./static/css dir.
Delete the ./static/css/style.css file.
Remove the link to style.css in the ./templates/base.html file.
Add a link to the ./static/css/base.css file to the ./templates/base.html file as follows

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/base.css') }}">

In each HTML file, add a link to its specific css file in the {% block head %} block.
- Add a {% block head %}{% endblock %} in the head of ./templates/base.html as well.

Eg: base.html (Example from another project)

<head>
    ...
    ...
    {% block head %}{% endblock %}
    ...
    ...
</head>

file-name.html (Example from another project)

{% extends 'base.html' %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/file-name.css') }}">
{% endblock %}

{% block body %} ...

Haroonchik commented 3 years ago

Hello, I would like to start this assignment

HarshKapadia2 commented 3 years ago

Go ahead, @Haroonchik!

Haroonchik commented 3 years ago

@HarshKapadia2 Can you check my PR https://github.com/HarshKapadia2/one-or-two/pull/15 ?

HarshKapadia2 / one-or-two

CSS code splitting. #9

Changes