Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue92:command_conquer [2015/01/07 16:03] – créée andre_domenech
+++ issue92:command_conquer [2015/03/08 17:55] (Version actuelle) – [2] auntiee
@@ Ligne 1: / Ligne 1: @@
+===== 1 =====
+**
 Last month, we talked about Jeet, and I mentioned Stylus. Since then, I’ve also started using Flexbox on a few websites. After a single website, I was tired of writing all the vendor prefixes by hand, and designed a Stylus file containing functions to minimize the amount of typing needed. Once I got it to a point where I was happy, I published it on github.
@@ Ligne 10: / Ligne 12: @@
 • flexbox.html file
-The flexbox.html file and the css folder are used only as an example. In the stylus folder, you’ll see an example.styl folder, as well as a flexbox.styl file. The flexbox.styl file is the only file you need to copy to use the functions.
+The flexbox.html file and the css folder are used only as an example. In the stylus folder, you’ll see an example.styl folder, as well as a flexbox.styl file. The flexbox.styl file is the only file you need to copy to use the functions.**
-What is Flexbox?
+Le mois dernier, nous avons parlé de Jeet et j'ai mentionné Stylus. Depuis, j'ai aussi commencé à utiliser Flexbox sur quelques sites Web. Après un seul site, j'étais fatigué d'écrire tous les préfixes des fournisseurs à la main et j'ai conçu un fichier Stylus contenant des fonctions pour minimiser la quantité de saisie requise. Une fois arrivé à un point satisfaisant, je l'ai publié sur github.
+Lien : https://github.com/lswest/flexbox-stylus
+Ce que vous y trouverez :
+ • Des dossiers avec les fichiers CSS et Stylus.
+ • Un fichier LICENSE.
+ • Readme.md.
+ • Un fichier flexbox.html.
+Le fichier flexbox.html et le dossier CSS ne sont utilisés qu'à titre d'exemple. Dans le dossier stylus, vous verrez un dossier example.styl, ainsi qu'un fichier flexbox.styl. Le fichier flexbox.styl est le seul fichier que vous devez copier pour pouvoir utiliser les fonctions.
+**What is Flexbox?
 Flexbox is a new layout system introduced in CSS3, and is currently supported in one form or another in most commonly used versions of Firefox, Chrome, Safari and Opera. It’s also supported by IE 10 & 11. See here for a thorough breakdown: http://caniuse.com/#search=flexbox
@@ Ligne 21: / Ligne 36: @@
 • http://the-echoplex.net/flexyboxes/ - A tool to help figure out your flexbox settings.
 • http://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Complete Guide to Flexbox (CSS Tricks)
+**
+Qu'est-ce que Flexbox ?
+Flexbox est un nouveau système de mise en page introduit en CSS3 ; il est actuellement pris en charge dans une forme ou une autre dans les versions les plus couramment utilisés de Firefox, Chrome, Safari et Opera. Il est aussi pris en charge par IE 10 et 11. Regardez ici pour une description approfondie :
+http://caniuse.com/#search=flexbox
+Flexbox facilite l'alignement des éléments (verticalement et horizontalement), ainsi que la capacité des éléments à croître ou décroître en fonction de la taille de son parent. Et le meilleur, c'est qu'il est possible d'ordonner les éléments dans le CSS seul. Cela signifie que la barre latérale gauche peut venir après votre élément de contenu sur les smartphones, au lieu d'être contraints de travailler avec des « floats » ou des « display:none ».
+Liens :
+• http://the-echoplex.net/flexyboxes/ - Un outil pour aider à comprendre les paramètres de votre Flexbox.
+• http://css-tricks.com/snippets/css/a-guide-to-flexbox/ - Guide complet de Flexbox (Astuces CSS)
+**
 Usage
@@ Ligne 38: / Ligne 66: @@
 • flex-group(value) accepts any positive number - Function for Flexbox's order attribute
 • flex-firefox() Helper function for legacy Firefox (where Flexboxes were treated as inline items). Place it inside the firefox-only selector (@-moz-document url-prefix()). See the example.styl file for an example.
+**
+Utilisation
+Il suffit de placer le fichier flexbox.styl dans votre projet, puis de l'importer dans votre fichier Stylus avec @import 'flexBox'. Chaque fonction essaie d'accepter autant de valeurs officielles que possible (selon la norme Flexbox), mais nécessite en fait quelques changements.
+Fonctions
+• flexbox(valeur) ou la valeur est soit flex, soit inline-flex.
+• flex(size, grow, shrink, basis) chaque valeur, sauf grow, est optionnelle. Size est utilisé pour l'attribut width (pour les vieux navigateurs). Pour ne régler que la valeur grow, utiliser flex(grow: 1). Le même format peut être utilisé pour régler n'importe quel argument précis.
+• flex-direction(valeur) la valeur peut être: row, row-reverse, column ou column-reverse - Fonction pour la flex-direction de Flexbox.
+• flex-wrap(valeur) Accepte les 3 options: nowrap, wrap, wrap-reverse - Fonction pour le flex-wrap de Flexbox.
+• flex-justify(valeur) la valeur peut être: start, end, center, space-bottom ou space-around - Fonction pour le justify-content de Flexbox.
+• flex-content(valeur) la valeur peut être la même option que pour flex-justify(value) - Fonction pour l'align-content de Flexbox.
+• flex-align(valeur) la valeur peut être : start, end, stretch, center, baseline - Fonction pour l'align-items de Flexbox.
+• flex-self(valeur) accepte start, end, auto, center, baseline, stretch - Fonction pour l'align-self de Flexbox.
+• flex-group(valeur) accepte tout nombre positif - Fonction pour l'attribut order de Flexbox.
+• flex-firefox() fontion d'aide pour les vieux Firefox (où les Flexboxes étaient traitées comme des éléments en ligne). Placez-le dans le sélecteur firefox-only (@-moz-document url-prefix()). Voir par exemple le fichier example.styl.
+===== 2 =====
+**
 Holiday Bonus
@@ Ligne 55: / Ligne 103: @@
 A rough outline (not a working program) is shown top right.
+**
+Bonus de vacances
+Et, en raison de la période de l'année, j'ai un petit conseil utile pour ceux qui ont besoin d'envoyer beaucoup de cartes ou de lettres en utilisant des adresses dans votre liste de contacts. Une fois que ce numéro sera sorti, il sera certes un peu trop tard pour les cartes de Noël, mais si toutefois...
+Cette année, ma solution pour ceci était d'utiliser Python pour analyser un fichier CSV (valeurs séparées par des virgules), et pour sortir un fichier .txt contenant les adresses dans le format :
+Nom
+Métier
+Société
+Rue
+Ville Code postal
+Pays
+La seule petite information dans le csv nécessaire pour que cela fonctionne est la position des champs que vous souhaitez utiliser dans l'adresse (c'est-à-dire si le champ de nom est le premier, il aura la position 0). Vous pouvez enregistrer ceci dans des variables si vous voulez.
+Une ébauche (pas un programme qui fonctionne) est montré en haut à droite.
+**
 This creates a list where each element is another list containing the values of the fields for that line of the csv file. In other words - it’s a two dimensional list. I iterate over the list using the following code, and then write the necessary sections to the addresses.txt file.
@@ Ligne 63: / Ligne 130: @@
 I hope this has been interesting for at least some users - and perhaps sending large numbers of cards in the new year will be easier. If you have corrections, questions, comments, or suggestions, I can always be reached at lswest34+fcm@gmail.com.
+**
+Ceci crée une liste où chaque élément est une autre liste contenant les valeurs des champs de cette ligne du fichier csv. En d'autres termes, c'est une liste à deux dimensions. Je parcours la liste en utilisant le code qui suit, puis j'écris les sections nécessaires au fichier addresses.txt.
+Une fois que le fichier est créé, vous pouvez copier le texte dans un autre programme pour le formater (ou l'imprimer directement sur des enveloppes ou des étiquettes).
+Un exemplaire complet d'un script qui fonctionne peut être trouvé ici : http://pastebin.com/bZmanQAc. Les seuls changements nécessaires seront les variables d'indice, selon le fichier CSV que vous souhaitez prendre en compte.
+J'espère que cela a été intéressant pour au moins certains utilisateurs - et peut-être qu'envoyer un grand nombre de cartes au cours de la nouvelle année sera plus facile. Si vous avez des corrections, des questions, des commentaires ou des suggestions, je peux toujours être joint à lswest34+fcm@gmail.com.