properties is a dictionary that contains all the properties of a CSS component. It is a required attribute of a Selector element. You have to pass a dictionary to this attribute. The keys of the dictionary are the properties of the CSS component and the values of the dictionary are the values of the properties. Here is an example:
CSS components are a list of dictionary that can be used to create a CSS styling fast and easily. These components are very easy to use and can be used to create a CSS styling in a few lines of code. Here is lots of customization options are available. Let's get started.
To use CSS components, you have to import the fronty.css module methods. CSS, Selector and Style are the methods of fronty.css module. Here is an example of using fronty.css module methods:
With this you can create a selector in a html website. But it is not enough to create a css file. You have to add some properties to the selector. To add properties to the selector, you have to use the properties attribute of the Selector element. Here is an example:
Here we have provided a dictionary in properties method of Selector class. The keys of the dictionary are the properties of the CSS component and the values of the dictionary are the values of the properties. You can add as many properties as you want. You can also add multiple selectors in a CSS file. Here is an example:
The attributes of the component elements are the same as the attributes of the html elements. You can use the attributes of the html elements in the component elements. Check the attributes of the html elements.
The id attribute is used to give a unique id to a component element. You can use this id to select the component element using JavaScript. Element().id('something') or Element(id='something') can be used to set the id of a component element.
The class attribute is used to give multiple classes to a component element. You can use the same method again to override the previous class. Element().class_('something1 something2 somethingNth') or Element(class='something1 something2 somethingNth') can be used to set the class of a component element. You can also use class_ instead of class to set the class of a component element as class is a reserved keyword in Python and every programming language.
The placeholder attribute is used to set the placeholder of a field. Element().placeholder('something') or Element(placeholder='something') can be used to set the placeholder of a field. It is a method in the BaseElement class. You can use this any element that accepts the placeholder attribute as it is defined in the BaseElement class.
The type attribute is used to set the type of a field. Element().type('something') or Element(type='something') can be used to set the type of a field. It is a method in the BaseElement class. You can use this any element that accepts the type attribute as it is defined in the BaseElement class.
The name attribute is used to set the name of a field. Element().name('something') or Element(name='something') can be used to set the name of a field. It is a method in the BaseElement class. You can use this any element that accepts the name attribute as it is defined in the BaseElement class.
The style attribute is used to give inline CSS to a component element. You can use the same method again to override the previous style. Element().style(color='red', background_color='blue') can be used to set the style of a component element. This method takes keyword arguments as the CSS properties and their values. Some CSS properties have hyphen in their name. You can use underscore instead of hyphen in the name of the CSS properties. For example, background-color can be written as background_color.
The attr attribute is used to give attributes to a component element. You can add as much as you need attributes to a component element. Element().attr('key', 'value').attr('more', 'more') can be used to set the attribute of a component element. This method takes two arguments as the key and value of the attribute.
The required attribute is used to make a input field required. Element().required can be used to make a input field required. It is just a property of the Input component element. You can use this any element that accepts the required attribute as it is defined in the BaseElement class.
The disabled attribute is used to make a input field disabled. Element().disabled can be used to make a input field disabled. It is just a property of the Input component element. You can use this any element that accepts the disabled attribute as it is defined in the BaseElement class.
The readonly attribute is used to make a input field readonly. Element().readonly can be used to make a input field readonly. It is just a property of the Input component element. You can use this any element that accepts the readonly attribute as it is defined in the BaseElement class.
The value attribute is used to set the value of a field. Element().value('something') or Element(value='something') can be used to set the value of a field. It is a method in the BaseElement class. You can use this any element that accepts the value attribute as it is defined in the BaseElement class.
HTML components are some simple set of classes that can be used to create a HTML website fast and easily. These components are very easy to use and can be used to create a HTML website in a few lines of code. Try to create a HTML website using these components and you will see how easy it is to create a HTML website using these components. So, let's get started.
Components are the building blocks of your application. They are reusable UI elements that can be composed together to build a UI. Components are also the unit of encapsulation for the UI, CSS, and behavior. Components for manipulating HTML, CSS, and JavaScript from Python code are provided by the fronty package. Components are created by subclassing the fronty.html.BaseElement class. We will learn more about components in the customizing components section.
You can customize the built-in components or create your own components by subclassing the fronty.html.BaseElement class. Let's see how to create a custom component.
fromfronty.htmlimport(
-BaseElement,
-Text
-)
-
-
-classCustomComponent(BaseElement):
-def__init__(self,*children,**attributes):
-super().__init__('custom-component',*children,**attributes)
-
-# Optional attributes if you want to add any custom attributes
-self._attributes['custom-attribute']='custom-value'
-
-# Optional children if you want to add any custom children
-self._children=[
-Text('This is a custom component.'),
-]
-
-
Now, you can use this component in your application.
You can easily run the example projects by cloning the Fronty repository and running the following commands in your terminal.
-
-
Clone the Fronty repository.
-
-
Go to the examples/starter project directory.
-
cdfronty/examples/starter\ project
-
-
-
-
Run the following command in your terminal.
-
pythonapp.py
-
-
-
-
Open your browser and go to http://localhost:5000
-
-
-
-
You can also run the other example projects by going to their directories and running the same command.
-
-
-
Note: You have to install a backend server to run the project. Fronty does not provide a backend server. You can use any backend server you want. For example, you can use Flask. You can also use Fronty with Django. But you have to install Django first. For simplicity, we have used Flask in the example projects. We are woring on a backend server for Fronty. It will be available soon.
Fronty is a lightweight, fast, and easy-to-use Python-based frontend web framework that simplifies web development by allowing developers to create web pages using only Python. Its simple syntax and intuitive design make it an excellent option for beginners or developers who prefer working with Python.
Now, let's integrate Bootstrap into our project. We will use the Bootstrap CDN to load the Bootstrap CSS and JavaScript files.
-
First, we will create a new folder named components inside the project folder. Then, we will create a new component named layout.py inside the components folder.
fromfronty.htmlimport(
-Element,
-Div,
-H1,
-Text,
-Break
-)
-
-# components
-fromcomponents.layoutimportlayout
-
-
-defhome(request,**data)->Element:
-'''This is the home page component'''
-
-_layout=layout(
-request=request,
-content=Div(
-H1('Home'),
-
-Text(
-f"""
- Path: {request.path}
-{Break()}
- Method: {request.method}
-
- """
-),
-
-).class_('container text-center')
-)
-
-return_layout
-
-
-# We have added the about inside the index.py file for simplicity.
-# You can create a new file for the about page component.
-defabout(request,**data)->Element:
-'''This is the about page component'''
-
-_layout=layout(
-request=request,
-content=Div(
-H1('About'),
-).class_('container text-center')
-)
-
-return_layout
-
-
Now, we will update the app.py file to use the new components.
fromflaskimportFlask,request
-fromfronty.htmlimport*
-
-# components
-fromcomponents.indeximporthome,about
-
-app=Flask(__name__)
-
-
-@app.route('/')
-defindex():
-'''This is the home page view function'''
-
-returnhome(
-request=request,
-title='A simple framework to build a website only with Python.',
-).render()
-
-
-@app.route('/about')
-defabout_view():
-'''This is the about page view function'''
-
-returnabout(
-request=request,
-title='A simple framework to build a website only with Python.',
-).render()
-
-
-if__name__=='__main__':
-app.run(debug=True)
-
-
Now, we will run the project and open the home page in the browser.
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.
For simplicity, we have created a starter project that you can use to get started with your own project. It is a simple project that contains a single page with a single component. It is a good starting point for your own project.
fromflaskimportFlask,request
-fromfronty.htmlimport*
-
-app=Flask(__name__)
-
-
-defhome(request)->Html:
-'''This is the home page view function'''
-
-# The main HTML element.
-returnHtml(
-
-# The head tag contains the title and meta tags.
-Head(
-
-# The title tag contains the title of the page.
-Title('Home'),
-
-# The meta tags contain the meta information of the page.
-Meta(charset='utf-8'),
-Meta(name='viewport',content='width=device-width, initial-scale=1'),
-),
-
-# The body tag contains all the content of the page.
-Body(
-
-# The center tag contains the main content of the page.
-# It is like using a HTML element when you don't know whats the name of a tag in fronty.
-# You can use the Element('tag') for this purpose.
-Element(
-'center',
-
-# The h1 tag contains the title of the page.
-H1(
-'Welcome to Fronty!'
-),
-
-# The Text() is used to add text to the page like paragraphs.
-Text(
-'Fronty is a frontend web framework.'
-),
-)
-)
-)
-
-
-@app.route('/')
-defindex()->str:
-'''This is the home page view function'''
-
-# The render() method is used to convert the python objects to HTML string.
-# The render() method returns a string. So, we can return it directly.
-returnhome(
-request=request,
-).render()
-
-
-if__name__=='__main__':
-# Run the app in debug mode.
-# Learn more about Flask at https://flask.palletsprojects.com/en/2.1.x/
-app.run(debug=True)
-
As fronty is a very simple framework, it is very easy to use. You can easily create a website using. It
-is mainly focused on the frontend part. So, we haven't add any backend features. But, you can easily add
-backend features using any backend framework like Flask, Django, Fastapi etc.
-
But, we are working on a backend framework for fronty named Backkr. And we are also
-working on a database framework named Flexdb. So, you can easily create a full stack
-website with database using Fronty in only Python technology without knowing any kind
-of web technologies like HTML, CSS, and JavaScript.
-
Here we will use flask as a backend framework for making this documentation short. But, you can use any
-backend framework you want. We will update this documentation when we release Backkr and Flexdb. So, you can easily create a full stack website using only Python.
fromflaskimportFlask,request
-fromfronty.htmlimport*
-
-app=Flask(__name__)
-
-
-defhome(request)->Html:
-'''This is the home page view function'''
-returnHtml(
-Head(
-Title('Home'),
-Meta(charset='utf-8'),
-Meta(name='viewport',content='width=device-width, initial-scale=1'),
-),
-Body(
-Element(
-'center',
-Element(
-'h1',
-'Welcome to Fronty!'
-),
-Element(
-'p',
-'Fronty is a frontend web framework.'
-),
-)
-)
-)
-
-
-@app.route('/')
-defindex()->str:
-'''This is the home page view function'''
-returnhome(
-request=request,
-).render()
-
-
-if__name__=='__main__':
-app.run(debug=True)
-
-
This is a starter template for fronty. You can use this template to create a basic website using
-fronty.
-
-First, we import the Flask and request from flask. Then, we import Html, Head, Title, Meta, Body,
-Element from fronty.html package.
-
-Then, we create a flask app. Then, we create a home view function. This view function will return
-a Html object. This Html object will contain the HTML code for the home page.
-
-Then, we create a index view function. This view function will call the home view function and
-render the HTML code.
-
-Then, we run the flask app.
-
Fronty has a very simple syntax. You can easily create a website using it. It has
-some built-in element like Button, Link, Anchor etc. You can use these elements to
-create a website. You can also create your own element using the BaseElement class.
-We will see how to create a element in the customization section.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/search/search_index.json b/docs/search/search_index.json
deleted file mode 100644
index 49aba35..0000000
--- a/docs/search/search_index.json
+++ /dev/null
@@ -1 +0,0 @@
-{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"index.html","title":"Fronty","text":"
A frontend web framework for the web
Created by Md. Almas Ali
Documentation: https://almas-ali.github.io/fronty
Source Code: https://github.com/Almas-Ali/fronty
Fronty is a lightweight, fast, and easy-to-use Python-based frontend web framework that simplifies web development by allowing developers to create web pages using only Python. Its simple syntax and intuitive design make it an excellent option for beginners or developers who prefer working with Python.
"},{"location":"index.html#the-key-features-are","title":"The key features are:","text":"
Python-based frontend web framework
No need to use HTML, CSS, or JavaScript (though you can if you want)
Simple and lightweight
Fast rendering times
Easy to use and customize
Can integrate with other Python libraries and frameworks, such as Flask, Django, FastAPI, etc.
Growing community with extensive documentation and resources.
"},{"location":"examples.html#how-to-run-the-example-projects","title":"How to run the example projects?","text":"
You can easily run the example projects by cloning the Fronty repository and running the following commands in your terminal.
Clone the Fronty repository.
Go to the examples/starter project directory.
cd fronty/examples/starter\\ project\n
Run the following command in your terminal.
python app.py\n
Open your browser and go to http://localhost:5000
You can also run the other example projects by going to their directories and running the same command.
Note: You have to install a backend server to run the project. Fronty does not provide a backend server. You can use any backend server you want. For example, you can use Flask. You can also use Fronty with Django. But you have to install Django first. For simplicity, we have used Flask in the example projects. We are woring on a backend server for Fronty. It will be available soon.
You can easily install Fronty using pip. Just run the following command in your terminal.
pip install fronty\n
You can also install a backend framework to use with Fronty. For example, if you want to use Fronty with Flask, you can checkout flask documentation https://flask.palletsprojects.com/en/2.1.x/installation/
If you want to use Fronty with Django, you can checkout django documentation https://docs.djangoproject.com/en/4.2/topics/install/
If you want to use Fronty with FastAPI, you can checkout fastapi documentation https://fastapi.tiangolo.com/tutorial/first-steps/
Start learning Fronty by reading the documentation.
As fronty is a very simple framework, it is very easy to use. You can easily create a website using. It is mainly focused on the frontend part. So, we haven't add any backend features. But, you can easily add backend features using any backend framework like Flask, Django, Fastapi etc.
But, we are working on a backend framework for fronty named Backkr. And we are also working on a database framework named Flexdb. So, you can easily create a full stack website with database using Fronty in only Python technology without knowing any kind of web technologies like HTML, CSS, and JavaScript.
Here we will use flask as a backend framework for making this documentation short. But, you can use any backend framework you want. We will update this documentation when we release Backkr and Flexdb. So, you can easily create a full stack website using only Python.
from flask import Flask, request\nfrom fronty.html import *\napp = Flask(__name__)\ndef home(request) -> Html:\n'''This is the home page view function'''\nreturn Html(\nHead(\nTitle('Home'),\nMeta(charset='utf-8'),\nMeta(name='viewport', content='width=device-width, initial-scale=1'),\n),\nBody(\nElement(\n'center',\nElement(\n'h1',\n'Welcome to Fronty!'\n),\nElement(\n'p',\n'Fronty is a frontend web framework.'\n),\n)\n)\n)\n@app.route('/')\ndef index() -> str:\n'''This is the home page view function'''\nreturn home(\nrequest=request,\n).render()\nif __name__ == '__main__':\napp.run(debug=True)\n
This is a starter template for fronty. You can use this template to create a basic website using fronty. First, we import the Flask and request from flask. Then, we import Html, Head, Title, Meta, Body, Element from fronty.html package. Then, we create a flask app. Then, we create a home view function. This view function will return a Html object. This Html object will contain the HTML code for the home page. Then, we create a index view function. This view function will call the home view function and render the HTML code. Then, we run the flask app.
Fronty has a very simple syntax. You can easily create a website using it. It has some built-in element like Button, Link, Anchor etc. You can use these elements to create a website. You can also create your own element using the BaseElement class. We will see how to create a element in the customization section.
"},{"location":"blog/index.html","title":"Blog","text":""},{"location":"components/introduction.html","title":"Components","text":""},{"location":"components/introduction.html#what-are-components","title":"What are Components?","text":"
Components are the building blocks of your application. They are reusable UI elements that can be composed together to build a UI. Components are also the unit of encapsulation for the UI, CSS, and behavior. Components for manipulating HTML, CSS, and JavaScript from Python code are provided by the fronty package. Components are created by subclassing the fronty.html.BaseElement class. We will learn more about components in the customizing components section.
Till now, there is no built-in component for JavaScript. But you can use the Script component to load JavaScript codes in your website from js file.
"},{"location":"components/css/attributes.html","title":"Attributes of CSS Components","text":""},{"location":"components/css/attributes.html#attributes","title":"Attributes","text":""},{"location":"components/css/attributes.html#properties","title":"properties","text":"
properties is a dictionary that contains all the properties of a CSS component. It is a required attribute of a Selector element. You have to pass a dictionary to this attribute. The keys of the dictionary are the properties of the CSS component and the values of the dictionary are the values of the properties. Here is an example:
Fronty returns every frontend code minified for better performance.
"},{"location":"components/css/introduction.html","title":"CSS Components","text":""},{"location":"components/css/introduction.html#what-are-css-components","title":"What are CSS Components?","text":"
CSS components are a list of dictionary that can be used to create a CSS styling fast and easily. These components are very easy to use and can be used to create a CSS styling in a few lines of code. Here is lots of customization options are available. Let's get started.
To use CSS components, you have to import the fronty.css module methods. CSS, Selector and Style are the methods of fronty.css module. Here is an example of using fronty.css module methods:
Example of importing fronty.css module
from fronty.css import CSS, Selector, Style\ncss = CSS(\nSelector('body')\n)\nprint(css.render())\n
With this you can create a selector in a html website. But it is not enough to create a css file. You have to add some properties to the selector. To add properties to the selector, you have to use the properties attribute of the Selector element. Here is an example:
Here we have provided a dictionary in properties method of Selector class. The keys of the dictionary are the properties of the CSS component and the values of the dictionary are the values of the properties. You can add as many properties as you want. You can also add multiple selectors in a CSS file. Here is an example:
This is how you can add a CSS to your website fast, easily and efficiently with Style component.
"},{"location":"components/html/attributes.html","title":"Attributes of Component Elements","text":""},{"location":"components/html/attributes.html#attributes","title":"Attributes","text":"
The attributes of the component elements are the same as the attributes of the html elements. You can use the attributes of the html elements in the component elements. Check the attributes of the html elements.
The id attribute is used to give a unique id to a component element. You can use this id to select the component element using JavaScript. Element().id('something') or Element(id='something') can be used to set the id of a component element.
The class attribute is used to give multiple classes to a component element. You can use the same method again to override the previous class. Element().class_('something1 something2 somethingNth') or Element(class='something1 something2 somethingNth') can be used to set the class of a component element. You can also use class_ instead of class to set the class of a component element as class is a reserved keyword in Python and every programming language.
The placeholder attribute is used to set the placeholder of a field. Element().placeholder('something') or Element(placeholder='something') can be used to set the placeholder of a field. It is a method in the BaseElement class. You can use this any element that accepts the placeholder attribute as it is defined in the BaseElement class.
The type attribute is used to set the type of a field. Element().type('something') or Element(type='something') can be used to set the type of a field. It is a method in the BaseElement class. You can use this any element that accepts the type attribute as it is defined in the BaseElement class.
The name attribute is used to set the name of a field. Element().name('something') or Element(name='something') can be used to set the name of a field. It is a method in the BaseElement class. You can use this any element that accepts the name attribute as it is defined in the BaseElement class.
The style attribute is used to give inline CSS to a component element. You can use the same method again to override the previous style. Element().style(color='red', background_color='blue') can be used to set the style of a component element. This method takes keyword arguments as the CSS properties and their values. Some CSS properties have hyphen in their name. You can use underscore instead of hyphen in the name of the CSS properties. For example, background-color can be written as background_color.
The attr attribute is used to give attributes to a component element. You can add as much as you need attributes to a component element. Element().attr('key', 'value').attr('more', 'more') can be used to set the attribute of a component element. This method takes two arguments as the key and value of the attribute.
The required attribute is used to make a input field required. Element().required can be used to make a input field required. It is just a property of the Input component element. You can use this any element that accepts the required attribute as it is defined in the BaseElement class.
The disabled attribute is used to make a input field disabled. Element().disabled can be used to make a input field disabled. It is just a property of the Input component element. You can use this any element that accepts the disabled attribute as it is defined in the BaseElement class.
The readonly attribute is used to make a input field readonly. Element().readonly can be used to make a input field readonly. It is just a property of the Input component element. You can use this any element that accepts the readonly attribute as it is defined in the BaseElement class.
The value attribute is used to set the value of a field. Element().value('something') or Element(value='something') can be used to set the value of a field. It is a method in the BaseElement class. You can use this any element that accepts the value attribute as it is defined in the BaseElement class.
"},{"location":"components/html/introduction.html","title":"HTML Components","text":""},{"location":"components/html/introduction.html#what-are-html-components","title":"What are HTML Components?","text":"
HTML components are some simple set of classes that can be used to create a HTML website fast and easily. These components are very easy to use and can be used to create a HTML website in a few lines of code. Try to create a HTML website using these components and you will see how easy it is to create a HTML website using these components. So, let's get started.
"},{"location":"components/html/introduction.html#built-in-html-components","title":"Built-in HTML Components","text":"
Html : To create the main HTML page layout.
Head : To create the head section of a html website.
Title: To describe the title of a website in the head section.
Meta : To describe all types of meta tags for SEO.
Body : To create the body structure of a html website.
Script: To load Javascript codes in fronty based website.
Style: To write custom CSS fronty.
Link : To load CSS codes in fronty based website.
Anchor : To create a anchor links in a html website.
Image : To load images in a html website.
Button : To create a button in a html website.
Input : To create a input field in a html website.
Text : To create a text in a html website.
Break : To create a break line in a html website.
Form : To create a form in a html website.
Div : To create a div in a html website.
Span : To create a span in a html website.
H1 : To create a h1 in a html website.
H2 : To create a h2 in a html website.
H3 : To create a h3 in a html website.
H4 : To create a h4 in a html website.
H5 : To create a h5 in a html website.
H6 : To create a h6 in a html website.
P : To create a p in a html website.
Ul : To create a ul in a html website.
Ol : To create a ol in a html website.
Li : To create a li in a html website.
Table : To create a table in a html website.
Tr : To create a tr in a html website.
Td : To create a td in a html website.
Th : To create a th in a html website.
Caption : To create a caption in a html website.
Thead : To create a thead in a html website.
Tbody : To create a tbody in a html website.
Tfoot : To create a tfoot in a html website.
Iframe : To create a iframe in a html website.
Audio : To create a audio in a html website.
Video : To create a video in a html website.
Source : To create a source in a html website.
Select : To create a select in a html website.
Option : To create a option in a html website.
Nav : To create a nav in a html website.
Header : To create a header in a html website.
Footer : To create a footer in a html website.
Section : To create a section in a html website.
Article : To create a article in a html website.
Aside : To create a aside in a html website.
Main : To create a main in a html website.
Figure : To create a figure in a html website.
Figcaption : To create a figcaption in a html website.
Dl : To create a dl in a html website.
Dt : To create a dt in a html website.
Dd : To create a dd in a html website.
Time : To create a time in a html website.
Mark : To create a mark in a html website.
Small : To create a small in a html website.
Strong : To create a strong in a html website.
Em : To create a em in a html website.
Code : To create a code in a html website.
Pre : To create a pre in a html website.
Blockquote : To create a blockquote in a html website.
Empty : To wrap multiple elements to return a single element.
Comment : To create a comment in a html website.
"},{"location":"components/html/introduction.html#_1","title":"Introduction","text":""},{"location":"components/js/introduction.html","title":"Javascript Components","text":""},{"location":"components/js/introduction.html#what-are-javascript-components","title":"What are Javascript Components?","text":""},{"location":"customization/customized-html.html","title":"Customizing Components","text":"
You can customize the built-in components or create your own components by subclassing the fronty.html.BaseElement class. Let's see how to create a custom component.
custom_components.py
from fronty.html import (\nBaseElement,\nText\n)\nclass CustomComponent(BaseElement):\ndef __init__(self, *children, **attributes):\nsuper().__init__('custom-component', *children, **attributes)\n# Optional attributes if you want to add any custom attributes\nself._attributes['custom-attribute'] = 'custom-value'\n# Optional children if you want to add any custom children\nself._children = [\nText('This is a custom component.'),\n]\n
Now, you can use this component in your application.
main.py
from flask import Flask # or any other framework\nfrom fronty.html import (\nHtml,\nHead,\nTitle,\nBody,\n)\nfrom custom_components import CustomComponent # import the custom component\napp = Flask(__name__)\ndef layout():\nreturn Html(\nHead(\nTitle('Custom Component')\n),\nBody(\nCustomComponent()\n)\n)\n@app.route('/')\ndef home():\nreturn layout().render()\nif __name__ == '__main__':\napp.run(debug=True)\n
Now, let's integrate Bootstrap into our project. We will use the Bootstrap CDN to load the Bootstrap CSS and JavaScript files.
First, we will create a new folder named components inside the project folder. Then, we will create a new component named layout.py inside the components folder.
project/components/layout.py
from fronty.html import *\ndef navbar(request, **data) -> Element:\n'''This is the navbar component'''\n# The navbar layout\n_layout = Nav(\nDiv(\nAnchor(\n'Fronty',\nhref='/',\n).class_('navbar-brand'),\nButton(\nElement('span').class_('navbar-toggler-icon'),\n).class_('navbar-toggler').attr('type', 'button').attr('data-bs-toggle', 'collapse').attr('data-bs-target', '#navbarScroll').attr('aria-controls', 'navbarScroll').attr('aria-expanded', 'false').attr('aria-label', 'Toggle navigation'),\nUl(\nLi(\nAnchor(\n'Home',\nhref='/',\n).class_('nav-link active').attr('aria-current', 'page'),\n).class_('nav-item'),\nLi(\nAnchor(\n'About',\nhref='/about',\n).class_('nav-link'),\n).class_('nav-item'),\nLi(\nAnchor(\n'More',\nhref='#',\n).class_('nav-link dropdown-toggle').attr('role', 'button').attr('data-bs-toggle', 'dropdown').attr('aria-expanded', 'false'),\nUl(\nLi(\nAnchor(\n'Action',\nhref='#',\n).class_('dropdown-item'),\n),\nLi(\nAnchor(\n'Another action',\nhref='#',\n).class_('dropdown-item'),\n),\nLi(\nElement('hr').class_('dropdown-divider'),\n),\nLi(\nAnchor(\n'Something else here',\nhref='#',\n).class_('dropdown-item'),\n),\n).class_('dropdown-menu'),\n).class_('nav-item dropdown'),\n).class_('navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll').attr('style', '--bs-scroll-height: 100px;'),\nForm(\nInput(\nplaceholder='Search',\naria_label='Search',\n).class_('form-control me-2').attr('type', 'search'),\nButton(\n'Search',\n).class_('btn btn-outline-success').attr('type', 'submit'),\n).class_('d-flex').attr('role', 'search'),\n).class_('container-fluid'),\n).class_('navbar navbar-expand-lg bg-body-tertiary')\nreturn _layout\ndef layout(request, **data) -> Html:\n'''This is the layout component'''\n# The main layout\nreturn Html(\nHead(\nTitle('Fronty'), # Page title\nMeta(charset='utf-8'), # Character encoding\n# Responsive design\nMeta(name='viewport', content='width=device-width, initial-scale=1'),\n# Bootstrap CSS\nLink(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css',\nintegrity='sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD', crossorigin='anonymous'),\n),\nBody(\n# Navbar\nnavbar(request),\n# Main area of the page\n# The main area of the page is passed as a parameter to the layout component.\n# Get subcomponent from data or use default value\ndata.get('content', 'Empty content'),\n# Bootstrap JS\nScript(src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js\", integrity=\"sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN', crossorigin='anonymous'),\n),\n)\n
Now, we will create a index.py file inside the components folder. This file will contain the home page component.
project/components/index.py
from fronty.html import (\nElement,\nDiv,\nH1,\nText,\nBreak\n)\n# components\nfrom components.layout import layout\ndef home(request, **data) -> Element:\n'''This is the home page component'''\n_layout = layout(\nrequest=request,\ncontent=Div(\nH1('Home'),\nText(\nf\"\"\"\n Path: {request.path}\n{Break()}\n Method: {request.method}\n \"\"\"\n),\n).class_('container text-center')\n)\nreturn _layout\n# We have added the about inside the index.py file for simplicity.\n# You can create a new file for the about page component.\ndef about(request, **data) -> Element:\n'''This is the about page component'''\n_layout = layout(\nrequest=request,\ncontent=Div(\nH1('About'),\n).class_('container text-center')\n)\nreturn _layout\n
Now, we will update the app.py file to use the new components.
project/app.py
from flask import Flask, request\nfrom fronty.html import *\n# components\nfrom components.index import home, about\napp = Flask(__name__)\n@app.route('/')\ndef index():\n'''This is the home page view function'''\nreturn home(\nrequest=request,\ntitle='A simple framework to build a website only with Python.',\n).render()\n@app.route('/about')\ndef about_view():\n'''This is the about page view function'''\nreturn about(\nrequest=request,\ntitle='A simple framework to build a website only with Python.',\n).render()\nif __name__ == '__main__':\napp.run(debug=True)\n
Now, we will run the project and open the home page in the browser.
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
from flask import Flask\nfrom fronty.html import *\nfrom fronty.css import *\nfrom datetime import date\n# CSS components\ndef style_css():\n'''This is the style component'''\n# The CSS() is used to create a CSS object.\nreturn CSS(\n# The Selector() is used to create a CSS selector.\n# Here we have used the universal selector to select all the elements.\n# *{} means select all the elements.\n# We have css properties inside the properties() method.\n# Passed the css properties as keyword arguments.\n# The properties() method returns a CSSProperties object.\nSelector('*').properties({\n'margin': '0',\n'padding': '0',\n'font-family': 'Roboto, sans-serif, Arial',\n}),\n# Here we have selected the body tag.\n# We have used the Selector('body') to select the body tag.\n# Selector('body').properties({}) is used to add css properties to the body tag.\nSelector('body').properties({\n'background-color': '#d6d6e7',\n}),\nSelector('nav').properties({\n'background-color': '#484c7a',\n'color': '#fff',\n'padding': '20px',\n'position': 'absolute',\n'width': '80%',\n'margin': '0 10%',\n'top': '10px',\n'border-radius': '12px'\n}),\nSelector('nav ul').properties({\n'list-style': 'none',\n'display': 'flex',\n'flex-direction': 'row',\n'justify-content': 'center',\n}),\nSelector('nav ul li').properties({\n'margin': '0 10px'\n}),\nSelector('a').properties({\n'text-decoration': 'none',\n'color': '#fff',\n'padding': '12px',\n'border-radius': '12px',\n'transition': 'all 0.3s ease-in-out',\n'font-size': '18px',\n}),\nSelector('nav a:hover').properties({\n'background-color': '#ddd',\n'color': 'black',\n}),\nSelector('nav a:active').properties({\n'background-color': '#4CAF50',\n'color': 'white',\n}),\nSelector('.container').properties({\n'margin': '90px 10%',\n'width': '80%',\n'text-align': 'center',\n'padding': '20px',\n'background-color': '#fff',\n'border-radius': '12px',\n}),\nSelector('footer').properties({\n'position': 'absolute',\n'bottom': '10px',\n'width': '80%',\n'margin': '0 10%',\n'border-radius': '12px',\n'text-align': 'center',\n'padding': '20px',\n'background-color': '#484c7a',\n'color': '#fff',\n'font-size': '12px',\n}),\n)\n# Fronty components\ndef layout(request, **data):\n'''This is the layout component'''\n# The Html() is used to create a HTML object.\nreturn Html(\nHead(\nTitle('Custom CSS Project'),\nMeta(charset='UTF-8'),\nMeta(content=\"IE=edge\").attr('http-equiv', 'X-UA-Compatible'),\nMeta(name='viewport', content='width=device-width, initial-scale=1.0'),\nStyle(\nstyle_css().render(),\n),\n),\nBody(\nNav(\nUl(\nLi(\nAnchor('Home', href='/'),\n),\nLi(\nAnchor('About', href='/about'),\n)\n)\n),\nDiv(\nH1(\n'Custom CSS Project',\n),\nText(\n'This is a custom CSS project using Fronty.',\n),\n).class_('container'),\nFooter(\nf'\u00a9 {date.today().year} Fronty',\n),\n)\n)\napp = Flask(__name__)\n@app.route('/')\ndef home():\n'''This is the home page view function'''\n# The render() method is used to convert the python objects to HTML string.\nreturn layout(\nrequest=None,\n).render()\nif __name__ == '__main__':\napp.run(debug=True)\n
For simplicity, we have created a starter project that you can use to get started with your own project. It is a simple project that contains a single page with a single component. It is a good starting point for your own project.
starter_project/app.py
from flask import Flask, request\nfrom fronty.html import *\napp = Flask(__name__)\ndef home(request) -> Html:\n'''This is the home page view function'''\n# The main HTML element.\nreturn Html(\n# The head tag contains the title and meta tags.\nHead(\n# The title tag contains the title of the page.\nTitle('Home'),\n# The meta tags contain the meta information of the page.\nMeta(charset='utf-8'),\nMeta(name='viewport', content='width=device-width, initial-scale=1'),\n),\n# The body tag contains all the content of the page.\nBody(\n# The center tag contains the main content of the page.\n# It is like using a HTML element when you don't know whats the name of a tag in fronty.\n# You can use the Element('tag') for this purpose.\nElement(\n'center',\n# The h1 tag contains the title of the page.\nH1(\n'Welcome to Fronty!'\n),\n# The Text() is used to add text to the page like paragraphs.\nText(\n'Fronty is a frontend web framework.'\n),\n)\n)\n)\n@app.route('/')\ndef index() -> str:\n'''This is the home page view function'''\n# The render() method is used to convert the python objects to HTML string.\n# The render() method returns a string. So, we can return it directly.\nreturn home(\nrequest=request,\n).render()\nif __name__ == '__main__':\n# Run the app in debug mode.\n# Learn more about Flask at https://flask.palletsprojects.com/en/2.1.x/\napp.run(debug=True)\n
"},{"location":"widgets/attributes.html","title":"Attributes","text":""},{"location":"widgets/attributes.html#attributes-of-widgets","title":"Attributes of widgets","text":"
All widgets have some attributes that can be used to customize the widget. The attributes are:
This attribute is used to load the CSS of the widget. It is a boolean value. If it is True, the CSS of the widget will be loaded. If it is False, the CSS of the widget will not be loaded. The default value is False. If you need to add the CSS of the widget, you can add it manually. FormWidget(load_css=True) will load the CSS of the FormWidget widget.
This attribute is used to set the type of the form. It is a string value. The default value is loginform. Currently, we are working on loginform, registrationform, contactform, searchform, subscribeform and commentform. More will come soon. FormWidget(forms_type=\"loginform\") will set the type of the form to loginform.
This attribute is used to set the action of the form. It is a string value. The default value is #. FormWidget(action=\"/login\") will set the action of the form to /login. If you need to set the action of the form to the current page, you can set it to \"\" or #.
This attribute is used to set the method of the form. It is a string value. The default value is POST. FormWidget(method=\"GET\") will set the method of the form to GET.
This attribute is used to add more elements to the form. You can use it FormWidget().add_element(element) to add an element to the form. FormWidget().add_element(Input(type=\"text\", name=\"username\")) will add an input element to the form.
"},{"location":"widgets/introduction.html","title":"Widgets Introduction","text":""},{"location":"widgets/introduction.html#what-is-a-widget","title":"What is a widget?","text":"
A widget is a set of components that can be used to build a user interface (UI) smoothly and very quickly. Widgets are build for making development process easier and faster. Widgets are also used to make the UI more beautiful and attractive with a single line of code.
"},{"location":"widgets/introduction.html#how-to-use-a-widget","title":"How to use a widget?","text":"
To use a widget, you need to import it from the fronty.html.widgets module. For example, if you need to make a login form, you can use the FormWidget widget. You can simply call the FormWidget class and add it to your page.
This attribute is used to load the CSS of the widget. It is a boolean value. If it is True, the CSS of the widget will be loaded. If it is False, the CSS of the widget will not be loaded. The default value is False. If you need to add the CSS of the widget, you can add it manually. FormWidget(load_css=True) will load the CSS of the FormWidget widget.
This attribute is used to set the type of the form. It is a string value. The default value is loginform. Currently, we are working on loginform, registrationform, contactform, searchform, subscribeform and commentform. More will come soon. FormWidget(forms_type="loginform") will set the type of the form to loginform.
This attribute is used to set the action of the form. It is a string value. The default value is #. FormWidget(action="/login") will set the action of the form to /login. If you need to set the action of the form to the current page, you can set it to "" or #.
This attribute is used to set the method of the form. It is a string value. The default value is POST. FormWidget(method="GET") will set the method of the form to GET.
This attribute is used to add more elements to the form. You can use it FormWidget().add_element(element) to add an element to the form. FormWidget().add_element(Input(type="text", name="username")) will add an input element to the form.
A widget is a set of components that can be used to build a user interface (UI) smoothly and very quickly. Widgets are build for making development process easier and faster. Widgets are also used to make the UI more beautiful and attractive with a single line of code.
To use a widget, you need to import it from the fronty.html.widgets module. For example, if you need to make a login form, you can use the FormWidget widget. You can simply call the FormWidget class and add it to your page.
-
-
-