Protostar : compiler des fichiers LESS dans user.css

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Protostar : compiler des fichiers LESS dans user.css

    Salut

    Actuellement pour le site de notre asso nous utilisons Helix3 comme template mais nous voudrions passer a Protostar (je vais faire des tests en local). J'ai créé le fichier user.css et comme avec Helix3 nous aimerions utiliser LESS. Dans Protostar j'ai vue le dossier protostar/less dans lequel j'ai créé plusieurs fichiers less histoire de retrouver les codes plus facilement :

    - user-articles
    - user-declaration
    - user-protostar
    - user-pages
    - user-styles

    Mais comment faire pour compiler les fichiers less dans le user.css ?

    Joomla 3.9.2
    Protostar 1.0

  • #2
    Bonjour.
    Est-ce que scss peut convenir ? Dans ce cas, jeter un oeil sur le site de Lomart, il a un plugin compilateur tout simplement génial que j'utilise pour mes sites et même pour d'éventuels templates pour BreezingForms.
    et woluweb aiment ceci.
    Cordialement.
    __
    Eddy !!!
    Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

    Commentaire


    • #3
      salut,
      as tu ouvert les fichiers dont tu parles?
      je doutes un peu...
      Pour te répondre
      tu importes tes fichiers dans le fichier template.less avec le code ci dessous:
      Code:
      @import "../../../media/jui/less/mixins.less";
      ce code est issu du fichier template.less et permet d'importer le fichier /media/jui/mixins.less.

      et ensuite tu cliques sur le bouton disponible dans le gestionnaire des fichiers de protostar et la tes fichiers seront compilées dans le fichier template.css.

      Le fichier user.css est à réserver pour les classes et id que tu ajoutes sans passer par less. Donc il est inutile de l'utiliser dans ton cas.

      Commentaire


      • #4
        Envoyé par Eddy.vh Voir le message
        Bonjour.
        Est-ce que scss peut convenir ? Dans ce cas, jeter un oeil sur le site de Lomart, il a un plugin compilateur tout simplement génial que j'utilise pour mes sites et même pour d'éventuels templates pour BreezingForms.
        Entre temps je me suis un peu plus renseigner concernant SCSS et je vais y passer. Et donc utiliser le plugin de Lomart. Merci.

        Envoyé par lefabdu51 Voir le message
        salut,
        as tu ouvert les fichiers dont tu parles?
        je doutes un peu...
        Pour te répondre
        tu importes tes fichiers dans le fichier template.less avec le code ci dessous:
        Code:
        @import "../../../media/jui/less/mixins.less";
        ce code est issu du fichier template.less et permet d'importer le fichier /media/jui/mixins.less.

        et ensuite tu cliques sur le bouton disponible dans le gestionnaire des fichiers de protostar et la tes fichiers seront compilées dans le fichier template.css.

        Le fichier user.css est à réserver pour les classes et id que tu ajoutes sans passer par less. Donc il est inutile de l'utiliser dans ton cas.
        Merci quant meme pour ton aide

        Commentaire


        • #5
          Ecoutes, ce que je peut te dire c est que tu ne vois pas une étape de base, c est la compilation du code. Pour avoir un fichier user.css, il te faut un fichier user.less avec les import que tu veux dans le dossier less de protostar.
          une fois ce fichier crée, tu selectionnes le fichier user.less et tu clique sur le bouton compiler less en haut seconde ligne des icones de menu. Rien de bien compliqué. ...
          Cliquez sur l'image pour l'afficher en taille normale  Nom : less.PNG  Affichages : 0  Taille : 39,8 Ko  ID : 2000120....
          et si tu ne t est pas trompé quelquepart, tu obtiens le resultat ci dessous
          Cliquez sur l'image pour l'afficher en taille normale  Nom : resultat_less.png  Affichages : 0  Taille : 51,9 Ko  ID : 2000121

          et un fichier user.css dans le dossier css. Ce qui est ce que tu veux non?
          Dernière édition par lefabdu51 à 04/05/2019, 12h50

          Commentaire


          • #6
            Lefabdu51.

            Tu as raison, il est parfaitement possible de faire comme ça ! Il suffit même de créer le fichier user.less et compiler pour qu'il crée automatiquement le user.css…

            Cependant et personnellement, je préfère de loin travailler mes styles sur mon PC à l'aide de BBedit (Mac OS) ou Notepad++ (Windows) agrémenté de leur option FTP.
            On travaille le fichier on l'enregistre, il se met à jour en ligne automatiquement, on recharge la page en front et les fichiers modifiés se compilent.

            Je gagne le temps d'enregistrement depuis le backoffice et le rechargement de cette page…

            Mais chacun est libre de faire ce qui lui est préférable !

            Par la même occasion, pour utiliser du scss au lieu du less, il sera peut-être intéressant de passer à Helix Ultimate (qui utilise le scss) plutôt qu'Helix 3…
            Dernière édition par Eddy.vh à 04/05/2019, 13h22
            Cordialement.
            __
            Eddy !!!
            Tutoriels BreezingForms en Français : https://www.breezingforms.eddy-vh.com/

            Commentaire


            • #7
              scss a beaucoup de points commun avec less.. Ce sont deux languages qui obeissent aux meme principes.
              Les regles d'import des fichiers sont identiques aux regles d import CSS brut.
              Ce qui rend less et scss plus simple à comprendre.
              Dans un autre message je parles de l'influence des dev sur joomla.
              Je te signale juste que scss sortiras sous Joomla 4.

              Donc css est en train aussi d'évoluer.
              tiens lis ceci...
              https://developer.mozilla.org/en-US/...tom_properties

              Less et scss ne sont utile que pour te simplifier la vie et les taches de reproduction....
              Pour un projet unique, c est franchement superflu.
              Autant travailler directement en css....
              tu sait l avantage de firefox par rapport aux autres.
              C est l'editeur de style intégré.


              Lire le paragraphe sur le source map.....
              Et tu comprendras l'interet d'utiliser less.
              Tu peux editer les fichiers directement sans sortir du navigateur..
              Tu vois le reel gain de temps ?
              Tu peut éditer les fichiers less depuis firefox, sans aucun besoin d'extensions tierces.

              firefox a été le premier navigateur à integrer ce principe d'edition en ligne des fichiers css...
              Ca remontes à un moment.
              C est ce qui me la s toujours fait préferer.
              Dernière édition par lefabdu51 à 04/05/2019, 15h08

              Commentaire


              • #8
                Envoyé par lefabdu51 Voir le message
                Ecoutes, ce que je peut te dire c est que tu ne vois pas une étape de base, c est la compilation du code. Pour avoir un fichier user.css, il te faut un fichier user.less avec les import que tu veux dans le dossier less de protostar.
                une fois ce fichier crée, tu selectionnes le fichier user.less et tu clique sur le bouton compiler less en haut seconde ligne des icones de menu. Rien de bien compliqué. ...

                et un fichier user.css dans le dossier css. Ce qui est ce que tu veux non?
                Heuuuu j'ai jamais dit que c'etait compliqué . Mais ayant decidé que j'allais utiliser le plugin de Lomart pas besoin de le faire moi meme.

                Envoyé par Eddy.vh Voir le message
                Lefabdu51.

                Tu as raison, il est parfaitement possible de faire comme ça ! Il suffit même de créer le fichier user.less et compiler pour qu'il crée automatiquement le user.css…

                Cependant et personnellement, je préfère de loin travailler mes styles sur mon PC à l'aide de BBedit (Mac OS) ou Notepad++ (Windows) agrémenté de leur option FTP.
                On travaille le fichier on l'enregistre, il se met à jour en ligne automatiquement, on recharge la page en front et les fichiers modifiés se compilent.

                Je gagne le temps d'enregistrement depuis le backoffice et le rechargement de cette page…

                Mais chacun est libre de faire ce qui lui est préférable !

                Par la même occasion, pour utiliser du scss au lieu du less, il sera peut-être intéressant de passer à Helix Ultimate (qui utilise le scss) plutôt qu'Helix 3…
                Je travaille aussi en local avec Notepad++ et en actualisant la page. Je laisse tomber Helix pour Protostar.


                Envoyé par lefabdu51 Voir le message
                scss a beaucoup de points commun avec less.. Ce sont deux languages qui obeissent aux meme principes.
                Les regles d'import des fichiers sont identiques aux regles d import CSS brut.
                Ce qui rend less et scss plus simple à comprendre.
                Dans un autre message je parles de l'influence des dev sur joomla.
                Je te signale juste que scss sortiras sous Joomla 4.

                Donc css est en train aussi d'évoluer.
                tiens lis ceci...
                https://developer.mozilla.org/en-US/...tom_properties
                Merci pour le lien, je vais le lire.

                Commentaire

                Annonce

                Réduire
                Aucune annonce pour le moment.

                Partenaire de l'association

                Réduire

                Hébergeur Web PlanetHoster
                Travaille ...
                X