ionic-team / ionic-team/ionic-framework

feat: extend CSS utilities approach

Ouverte
#22,844 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
package: core type: feature request
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 14 h
PR mergées (30 j)
50

Description

# Feature Request

**Ionic version:**

[x] **4.x**

**Describe the Feature Request**

At the moment, CSS utilities cover:

- Text Modification
- Element Placement
- Element Display
- Content Space
- Flex Properties
- Border Display
- Ionic Breakpoints

However, I'm missing `color` utilities between others.

On the rise of utility-first CSS approaches (TailwindCSS as an example) will be nice to extend the available CSS utilities to be able to compose more complex design easier. Prototyping could be even faster.

**Describe Preferred Solution**

1. Extend content space utilities (padding, margin) to use an `ion-p-t-{multiple}` class (`.ion-margin`) is currently fix to a default of `16px`
2. Color utilities for **text** and **background** `ion-text-{color}-{shade}` ex: `ion-text-primary-400`, `ion-text-{color}-{shade}` ex: `ion-bg-secondary-400`

It will be also beneficial to use PostCSS to the flow to purge unused generated utilities similar to what TailwindCSS offers, which would allow more customized grades of margins for example, without increasing significantly the bundle size.

**Describe Alternatives**

Of course, adding TailwindCSS directly to an ionic project could be an option, but it will be in parallel with the current ionic CSS it's a little bit overkill. Would be nice to have it "native" from Ionic.

In case the request fits the interests of the project, I can do a PR with a basic draft for this and contribute for it's implementation.

Kind regards

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

L’issue ne nomme aucun fichier ni test ; commencez par localiser les définitions d’utilitaires CSS existantes et le point d’entrée du build qui les génère. Examinez ensuite la manière dont les utilitaires d’espacement et de breakpoint sont actuellement exposés, puis définissez le périmètre des utilitaires de couleur et d’espacement configurables. La tâche sera terminée lorsqu’elle inclura les classes utilitaires demandées avec un comportement documenté et une couverture de leur sortie générée.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
css, tailwindcss
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.