Skip to content

Custom CSS Project

Initially, we have created a basic HTML only project. Then we have integrated Bootstrap into our project. Now, we will create a custom CSS project. We will use only Python to create this project.

Let's create a new project directory named custom_css_project. Then create a new file named app.py inside the custom_css_project directory.

Now, we will create everything in side the app.py file.

custom_css_project/app.py
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
from flask import Flask
from fronty.html import *
from fronty.css import *
from datetime import date

# CSS components

def style_css():
    '''This is the style component'''

    # The CSS() is used to create a CSS object.
    return CSS(

        # The Selector() is used to create a CSS selector.
        # Here we have used the universal selector to select all the elements.
        # *{} means select all the elements.
        # We have css properties inside the properties() method.
        # Passed the css properties as keyword arguments.
        # The properties() method returns a CSSProperties object.
        Selector('*').properties({
            'margin': '0',
            'padding': '0',
            'font-family': 'Roboto, sans-serif, Arial',
        }),

        # Here we have selected the body tag.
        # We have used the Selector('body') to select the body tag.
        # Selector('body').properties({}) is used to add css properties to the body tag.
        Selector('body').properties({
            'background-color': '#d6d6e7',
        }),
        Selector('nav').properties({
            'background-color': '#484c7a',
            'color': '#fff',
            'padding': '20px',
            'position': 'absolute',
            'width': '80%',
            'margin': '0 10%',
            'top': '10px',
            'border-radius': '12px'
        }),
        Selector('nav ul').properties({
            'list-style': 'none',
            'display': 'flex',
            'flex-direction': 'row',
            'justify-content': 'center',
        }),
        Selector('nav ul li').properties({
            'margin': '0 10px'
        }),
        Selector('a').properties({
            'text-decoration': 'none',
            'color': '#fff',
            'padding': '12px',
            'border-radius': '12px',
            'transition': 'all 0.3s ease-in-out',
            'font-size': '18px',
        }),
        Selector('nav a:hover').properties({
            'background-color': '#ddd',
            'color': 'black',
        }),
        Selector('nav a:active').properties({
            'background-color': '#4CAF50',
            'color': 'white',
        }),
        Selector('.container').properties({
            'margin': '90px 10%',
            'width': '80%',
            'text-align': 'center',
            'padding': '20px',
            'background-color': '#fff',
            'border-radius': '12px',
        }),
        Selector('footer').properties({
            'position': 'absolute',
            'bottom': '10px',
            'width': '80%',
            'margin': '0 10%',
            'border-radius': '12px',
            'text-align': 'center',
            'padding': '20px',
            'background-color': '#484c7a',
            'color': '#fff',
            'font-size': '12px',
        }),
    )


# Fronty components

def layout(request, **data):
    '''This is the layout component'''

    # The Html() is used to create a HTML object.
    return Html(
        Head(
            Title('Custom CSS Project'),
            Meta(charset='UTF-8'),
            Meta(content="IE=edge").attr('http-equiv', 'X-UA-Compatible'),
            Meta(name='viewport', content='width=device-width, initial-scale=1.0'),
            Style(
                style_css().render(),
            ),
        ),
        Body(
            Nav(
                Ul(
                    Li(
                        Anchor('Home', href='/'),
                    ),
                    Li(
                        Anchor('About', href='/about'),
                    )
                )
            ),
            Div(
                H1(
                    'Custom CSS Project',
                ),
                Text(
                    'This is a custom CSS project using Fronty.',
                ),
            ).class_('container'),
            Footer(
                f'© {date.today().year} Fronty',
            ),
        )
    )


app = Flask(__name__)


@app.route('/')
def home():
    '''This is the home page view function'''

    # The render() method is used to convert the python objects to HTML string.
    return layout(
        request=None,
    ).render()


if __name__ == '__main__':
    app.run(debug=True)