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.
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)
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.
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.
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.