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. Link: https://github.com/lswest/flexbox-stylus What you’ll find there • Folders with css and stylus files • a LICENSE file • Readme.md • 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.
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 Flexbox makes it easy to align elements (vertically and horizontally), as well as having elements grow/shrink according to the size of the parent. Best of all, it’s possible to adjust the ordering of elements in CSS alone. That means your left-handed sidebar can come after your content element on smartphones, instead of being forced to work with floats or display: none. Links: • 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 Just place the flexbox.styl file into your project, then import it in your stylus file with @import 'flexbox' Each function tries to accept as many official values (according to the Flexbox standard), but does require some changes. Functions • flexbox(value) where value is either flex, or inline-flex. • flex(size, grow, shrink, basis) Each value, except grow, is optional. Size is used for a width attribute (for legacy browsers). To set only the grow value, use flex(grow: 1). The same format can be used to set any specific arguments. • flex-direction(value) value can be: row, row-reverse, column or column-reverse - Function for Flexbox's flex-direction • flex-wrap(value) Accepts the 3 options: nowrap, wrap, wrap-reverse - Function for Flexbox's flex-wrap • flex-justify(value) value can be: start, end, center, space-bottom or space-around - Function for Flexbox's justify-content • flex-content(value) value can be the same options as for flex-justify(value) - Function for Flexbox's align-content • flex-align(value) value can be: start, end, stretch, center, baseline - Function for Flexbox's align-items • flex-self(value) accepts start, end, auto, center, baseline, stretch - Function for Flexbox's align-self • 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 And, due to the time of the year, I have a useful little hint for anyone who needs to send lots of cards or letters using addresses in your contact list. Once this issue is released, it will admittedly be a bit too late for Christmas cards, but nonetheless… This year my solution to this was using Python to parse a csv (comma separated value) file, and output a .txt file containing addresses in the format: Name Position Company Street City ZIP Code Country The only bit of information from the csv necessary for this to work is the position of the fields you want to use in the address (i.e. if the name field is the first one, it’s position 0). You can save these in variables if you want to. 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. Once the file is created, you can copy the text into another program to format it (or print it directly on the envelopes or on labels). A complete copy of a working script can be found here: http://pastebin.com/bZmanQAc. The only changes necessary will be to the index variables, according to the CSV file you want to implement. 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.