Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/BrainStormYourWayIn/sierra

A Python implementation of DOM
https://github.com/BrainStormYourWayIn/sierra

css html html-css python python-to-css python-to-html web-application

Last synced: 7 days ago
JSON representation

A Python implementation of DOM

Awesome Lists containing this project

README

        

# sierra

Sierra

![GitHub](https://img.shields.io/github/license/BrainStormYourWayIn/sierra?color=blue)
[![Downloads](https://pepy.tech/badge/sierra)](https://pepy.tech/project/sierra)

Sierra is a Python library to write HTML and CSS in pure Python using the DOM API in a simple yet elegant manner.

Here are a few advantages of using Sierra over other Python libraries that use the DOM API:

- Out-of-the-box support for all CSS styling attributes for all tags
- Display a table by simply putting in a CSV file
- Create your own tag functions with absolute ease using `@tag` and `@CmTag`. You can decide their behavior and use them within content-managers too
- Improvement in the arrangement look of the code and intelligent handling of tags with
`autoPrettify()`

autoPrettify()

________________________________

## Documentation

- **Check out the [documentation of Sierra](https://brainstormyourwayin.github.io/sierra-documentation/Documentation.html)**

________________________________

### Installation

pip install sierra

### Upgrade

pip install --upgrade sierra

________________________________

Starting off is pretty simple and straightforward:

```python
from sierra import *

title('Hello World!')
```

The `title()` function at the start is mandatory, since it commences the HTML and the CSS file, which is created in the working directory upon execution.

You can create custom tag functions with @tag and @CmTag. Say you want to create a function for <meta>:

```python
@tag
def meta(**kwargs):
pass

# Using them

meta(name="description", content="This is some description")
meta(name="viewport", content="width=device-width", initial_scale=1.0)
```

Underscores are used for hyphens (same applies to CSS) and Python-conficting arguments are prefixed with a double underscore Take `async`, for instance. This is demonstared below. Also is shown the implementation of the argument `text` inside of a function defined in `@tag`, which will create a tag that opens, enters text, and closes. See how using `text` and `async` within `` works:

```python
@tag
def script(**kwargs):
pass
script(__async="", src="some_src", text="some_text")
```
Is the equivalent of:
```html
<script async="" src="some_src">some_text
```
To add JS, create a function for the <script> tag with a context manager behavior using `@CmTag`.

```python
@CmTag
def script(**kwargs):
pass

# Here I'll be replicating the script needed to add Google Analytics to a webpage

with script(__aync="", src="https://www.googletagmanager.com/gtag/js?id=UA—XXXXXXXX-X"):
pass

with script():

writeWA('''
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA—XXXXXXXX-X');
''')
```
This is the equivalent of:
```html


window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA—XXXXXXXX-X');

```
`writeWA()` writes text entered into it into the HTML file as it is.

You can add fonts using `addFont()`
```python
addFont("https://fonts.googleapis.com/css2?family=Roboto&display=swap")
```
Once things at the `` of the HTML are settled (CSS is automatically linked), begin the body of the HTML with
```python
openBody()
# You can add any number of styling arguments to the body within openBody()
openBody(background_color='yellowgreen', opacity='0.9')
```
You can create `div` and `section` tags this way:
```python
with div(__class="some_class") as d:
p('This is a paragraph!')
d.css(background_color="#5886d1")
```
Let's break this down bit-by-bit:
First, we start a `div` with a context manager behavior and give it an attribute `__class`, which is essentially the tag attribute `class` (remember Python-conflicting arguments are prefixed by a double underscore).

`p()` is a function, as the name suggests, to add a `

` tag. You can give the tag attributes with `**kwargs`, if you like.
`p('Hello World!', __class='p_class')` is the same as `

Hello World!

`

After the paragraph, there's a `d.css()`. This adds CSS to the `class` mentioned within `div()`. If a `class` is mentioned, CSS is added to that class as the first priority. If an `id` is mentioned, CSS is added to that `id` as a second priority. If none of both are mentioned, CSS is just added to `div`.

The behavior of `div` shown above also applies to `section`.

You can open a new tag with `Tag()`
```python
with Tag('some_tag', id='some_id') as t:
p('A paragraph in ')
t.css(color='blue')
```
Although here, `.css()` behaves differently. It is independent of tag attributes, meaning CSS is added directly to the tag mentioned, which is `some_tag`

To add CSS to a specific attribute in the tag, use `writeCSS()`
```python
writeCSS(tag_name, **kwargs)

writeCSS("#some_id", color='blue')
```
This adds CSS to the `some_id`.

You can add a table to the HTML page by inputting in a CSV file this way:
```python
with Table() as t:
t.get_table("path/to/file.csv") # Add attributes with **kwargs here
t.css(border="1px solid black") # Use writeCSS to add CSS to a specific attribute
```
Here are all of Sierra's functionalities - [documentation](https://brainstormyourwayin.github.io/sierra-documentation/Documentation.html)

At the end of all development with Sierra, use
```python
autoPrettify()
```
It takes in no arguments, but closes unclosed togs and aligns the code in the output files.

The working of `autoPrettify()`:


Open In Colab

________________________________

### Contact Us

Email: [email protected]

**Or you can contact either of us individually if you like. See our individual GitHub profiles for information**.

________________________________

**Open with GitPod**

[![GitPod](https://www.gitpod.io/svg/media-kit/logo-dark-theme.svg)](https://gitpod.io/#https://github.com/BrainStormYourWayIn/sierra/)

________________________________

## License

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

> Pandas (pandas)
>
>> Copyright (c) 2008-2011, AQR Capital Management, LLC, Lambda Foundry, Inc. and PyData Development Team.
>> Copyright (c) 2011-2020, Open source contributors.