https://github.com/royalicing/tela

https://github.com/royalicing/tela

Last synced: over 1 year ago
JSON representation

• Host: GitHub
• URL: https://github.com/royalicing/tela
• Owner: RoyalIcing
• Created: 2020-06-12T12:40:26.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2024-01-30T11:27:01.000Z (over 2 years ago)
• Last Synced: 2025-01-18T23:42:58.172Z (over 1 year ago)
• Language: CSS
• Homepage: https://tela.style
• Size: 237 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

          
# Tela

Alpha version can be loaded via jsdelivr: 

## Grid

Uses CSS grid.

### Two column grid:

```html



First

Second

Third

Fourth



```


### Three column grid:

```html



First

Second

Third

Fourth



```


### Four column grid:

```html



First

Second

Third

Fourth



```


## X

Uses flexbox with row direction, items aligned center.

```html



  
First

  
Second

  
Third



```


## Y

Uses flexbox with column direction.

```html



  
First

  
Second

  
Third



```


## Text

### Centering text

```html



  
Some heading

  
Some descriptive text

```


## Responsive

```html



  
First

  
Second

  
Third



```


## Getting started

You may define the following CSS variables:

```css

:root {

  --size-7: 4rem;

  --size-6: 3rem;

  --size-5: 2.25rem;

  --size-4: 1.875rem;

  --size-3: 1.5rem;

  --size-2: 1.25rem;

  --size-1: 1.125rem;

  --size-0: 1rem;

  --size--1: 0.875rem;

  --size--2: 0.75rem;

}

```