Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Framework CSS] TRUCss

1 janvier 2018 à 21:12:52

TRUCss


Introduction:

Désirant une alternative à Bootstrap, j'ai eu l'idée de créer mon propre framework CSS.

Je post ici pour avoir vos retours sur ce qu'il reste à améliorer ou vos remarques.

Présentation du site:

Il s'agit donc d'un framework CSS.

Je reprend l'idée d'une grille, ici codé en 12 colonnes (comme Bootstrap).

Je suis parti sur quelques chose de simple, autant à installer qu'a utiliser.

Sur le site en lui même il y a une documentation avec le rendu du framework pour les divers éléments HTML.

Merci pour votre retour,
https://trucss.shost.ca/

PS : TRUCss c'est vraiment une base CSS, je ne veux pas trop m'instaurer à 100% sur la création d'un site, mais ce framework apporte pas mal d'éléments.

-
Edité par Aquer 10 mai 2018 à 19:03:45

  • Partager sur Facebook
  • Partager sur Twitter
6 janvier 2018 à 12:01:06

Salut,

J'aime :)

C'est léger, simple, smooth :p

C'est toujours sympa d'avoir des alternatives à Bootstrap et à Materialize.

Le projet est-il fini? Ou comptes-tu ajouter des fonctionnalités? (Car ça m'intéresse)

-
Edité par Mickrosoft 6 janvier 2018 à 12:06:25

  • Partager sur Facebook
  • Partager sur Twitter
6 janvier 2018 à 12:54:14

Pour moi c'est + une alternative à Skeleton (418 lignes de CSS) qui est assez light qu'à BootStrap ^^
Mais Skeleton est livré avec Normalize donc c'est un peu moins light du coup.
Et TRUCss fait 385 lignes de CSS :)

A mon sens, pas assez complet pour utiliser sur des pages complexes mais ça peut être très pratique pour des sites légers 

  • Partager sur Facebook
  • Partager sur Twitter
6 janvier 2018 à 14:02:59

Merci à vous deux pour vos retours.

Il est toujours possible d'améliorer les framework donc oui trucss peux avoir plus de fonctionnalités, mais je voulais voir avant les premiers retours et comme le dit Nazario pour des sites légers il est plutôt pratique.

Après TRUCss c'est plus une sorte d'architecture de base css ou les utilisateurs peuvent rajouter leur codes.

N'hésitez pas à me montrer ce que vous arrivez à faire avec TRUCss, il existe plusieurs possibilité et ca m’intéresserais.

-
Edité par Aquer 6 janvier 2018 à 14:05:08

  • Partager sur Facebook
  • Partager sur Twitter
1 février 2018 à 19:08:54

Salut,

J'aime bien, ça ressemble effectivement à Bootstrap.

J'ai un coup de coeur pour les tableaux, les couleurs choisies sont "parfaites" à mon goût.

J'ai trouvé 2 bémols :

  • Les tableaux ne sont pas responsives, ça se voit quand il y a beaucoup de texte à l'intérieur
  • Pourquoi le bouton d'envoi du formulaire n'est pas le même que les autres boutons ?

Noam

  • Partager sur Facebook
  • Partager sur Twitter
1 février 2018 à 20:09:10

Sur mes tests les tableaux étaient plutôt responsive, même avec pas mal de test.

Le bouton d'envoi du formulaire n'a pas la classe "button" mais si on la met on se retrouve avec le même design du bouton.

TRUCss c'est plus comme une base d'un framework ou on peux pas mal modifier et faire des combinaisons de class.

Merci pour ton retour en tout cas ;)

-
Edité par Aquer 1 février 2018 à 20:09:38

  • Partager sur Facebook
  • Partager sur Twitter
5 février 2018 à 22:00:36

Bonjour tout le monde !

1er post sur ce forum (je connais quand même le SDZ depuis + de 10 ans, mais je ne vais pas commencer à m'éparpiller ;))

Tout d'abord, j'aime bien ce petit framework tout léger. J'ai également l'habitude d'utiliser Bootstrap, mais il est souvent trop lourd pour ce que j'ai besoin de faire.

Je vais l'intégrer dans l'un futur mini projet pour voir ce que ça donne réellement (je ne suis pas développeur, juste un bidouilleur).

Pour moi, la chose qui manque le plus à ce Framework est un système de navigation full css. C'est dans ton objectif ou Trucss n'est pas prévu pour ce genre de "composants" ? Je trouve aussi que le formulaire n'est pas très sexy.

Je pense que ça pourrait aussi être pas mal de mettre ton framework sur Github ou autre.Tu pourrais aussi en faire une version compressée pour qu'il soit encore plus léger :)

Voilà, j'espère que cette petit contribution que ça pourra t'aider à améliorer Trucss.

Ps : si tu as des exemples de sites que tu as faits avec Trucss, n'hésite pas à nous les monter.

-
Edité par T-Php 5 février 2018 à 22:01:57

  • Partager sur Facebook
  • Partager sur Twitter
5 février 2018 à 22:36:04

Merci pour ton retour.

qu'appelle tu un système de navigation full css ?

Une version compressée de presque 6ko on ne gagnera pas grand chose ^^

Dans le zip à télécharger il y a un petit exemple fait avec TRUCss.

  • Partager sur Facebook
  • Partager sur Twitter
5 février 2018 à 23:32:47

Par "navigation full css", je veux dire un menu horizontal / vertical (avec sous-menus) et sans javascript.

Une fois minifié, il passe à 3,9 ko et pour moi qui fait un peu seo, c'est très important ^^

Ok merci pour le petit exemple, mais je voulais dire des vrais sites. Si tu n'en as pas, je partagerai l'url du mini site que je fais, une fois terminé.

  • Partager sur Facebook
  • Partager sur Twitter
6 février 2018 à 12:52:09

c'est bien ce que je pensais. Oui j'y avait pensé faire un système de sous-menu, et aussi un système d'onglet. Je le ferait surement un jour.

Je serais ravi de voir ce que tu as fait avec ce framework, rien que pour la curiosité.

TRUCss je le considère plus comme une base pour 'linstant, mais peut-être qu'avec le temps ça deviendra quelque chose de plus complet.

  • Partager sur Facebook
  • Partager sur Twitter
7 février 2018 à 12:57:44

up : j'ai rajouter un petit système de menu (pour l'instant sans sous-menu).

Disponible depuis l'exemple du .zip

  • Partager sur Facebook
  • Partager sur Twitter
9 février 2018 à 21:58:17

Ok c'est cool pour le menu :)

Sinon, en amélioration, j'ai vu que les images n'étaient pas responsive. Tu peux faire ça avec un petit : 

img {
    max-width: 100%;
    height: auto;
}


Peut être aussi mettre la balise meta viewport (dans ton fichier d'exemple) pour un meilleur affichage sur mobiles & tablettes ? :

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Partager sur Facebook
  • Partager sur Twitter
9 février 2018 à 22:36:40

Pour les images c'est vrai que c'est pas mal. Je l'ai rajouté, merci ;)

As tu déjà fait quelque chose avec ce framework ?

-
Edité par Aquer 9 février 2018 à 22:37:01

  • Partager sur Facebook
  • Partager sur Twitter
12 février 2018 à 20:37:01

De rien ;)

Oui, j'ai commencé à faire un petit raccourcisseur d'url sur CodeIgniter 3 (je connaissais de nom, sans l'avoir jamais testé).
J'essaierai de publier le code source la semaine prochaine

Voici le 1er aperçu :

Comme @equip, j'ai aussi eu un soucis sur les tableaux en responsive.

J'ai donc rajouté une div qui inclue le tableau, avec la classe "table-responsive", avec un petit bout de CSS simple :

.table-responsive {
    overflow: auto;
    overflow-y: hidden;
}



  • Partager sur Facebook
  • Partager sur Twitter
12 février 2018 à 20:50:11

ah pas mal.

Après si je peux me permettre, l'url complète raccourci est encore trop longue. Le but c'est vraiment de proposer une url sur de très court caractère.

Ex : goo.gl/xxxxxx,  pour le service google

Après c'est toi qui voit ;)

  • Partager sur Facebook
  • Partager sur Twitter
12 février 2018 à 21:22:33

Oui c'est normal pour l'url, je suis en local et j'ai mis cette url assez longue (http://url-shortener-ci.tphp) pour m'y retrouver dans mes scripts.

C'est juste pour faire des tests.

Ce script sera ensuite en open source. Ceux et celles qui vont s'en servir pourront acheter le nom de domaine qu'ils souhaitent et donc avoir des urls beaucoup plus courtes que celles que j'ai mis dans le screenshot ;)

  • Partager sur Facebook
  • Partager sur Twitter
12 février 2018 à 21:30:40

ah ok. Et avec les class row et col-X tu y arrive ?

La documentation est assez explicite ?

  • Partager sur Facebook
  • Partager sur Twitter
27 février 2018 à 0:18:02

salut,

oui, pas de soucis avec les row et col-x, j'utilise bootstrap habituellement :)

je viens de mettre en ligne le petit script de raccourcisseur d'url.

j'ai fait ça rapidement pour tester CodeIgniter et Trucss donc c'est très basic et il y a beaucoup de choses à corriger / améliorer : https://tiurl.xyz/

je l'ai mis sur github pour que tout le monde puissent l'améliorer et ça pourra peut être aider certain(e)s débutant(e)s : https://github.com/T-PHP/URL-Shortener-Code-Igniter-3

n'hésitez pas à me faire un retour

-
Edité par T-Php 27 février 2018 à 0:18:46

  • Partager sur Facebook
  • Partager sur Twitter
27 février 2018 à 12:46:36

;)

Par contre pourquoi ton formulaire n'est pas dans un col-12 ?

  • Partager sur Facebook
  • Partager sur Twitter
6 mai 2018 à 14:05:04

Petite MAJ du framework :

- correction des tableaux en mode responsive

- légère modification du menu et de la classe bounce.

  • Partager sur Facebook
  • Partager sur Twitter
6 mai 2018 à 20:05:02

Salut,

Un petit message pour te dire que j'utilise TRUCss pour un mini site de documentation de projet et ça rend très bien merci! :)

  • Partager sur Facebook
  • Partager sur Twitter
7 mai 2018 à 22:25:09

Salut, merci.

Je serais curieux de voir à quoi il ressemble, pourrais tu un lien ou une capture ?

  • Partager sur Facebook
  • Partager sur Twitter
10 mai 2018 à 17:23:25

Aquer

N'hésite pas à mettre ton projet en open-source sur github ! :)

Je suis également sur la création de mon framework css.

Beau travail ;)

-
Edité par AliiiceC 10 mai 2018 à 17:23:37

  • Partager sur Facebook
  • Partager sur Twitter

Alice Coudeville - Chargée de gestion des Ressources Humaines en alternance. 

10 mai 2018 à 19:03:17

Merci pour ton suivi, toute aide/idée est la bienvenue.

As tu déjà fait une réalisation avec ?

Pour l'instant je n'utilise pas Github mais pourquoi dans le long terme.

  • Partager sur Facebook
  • Partager sur Twitter