I like this page that gives a good run down of flexbox If you don't know too much about flex box. In fact the last application I laid out, I did entirely with flexbox. It allows for much easier layouts and is supported by React-Native which means when I layout pages for React-Native I reach for flexbox first, but I have found my self reaching for flexbox first in web development as well. I thinkĪt this point flexbox is pretty much everywhere. How can we do grid layouts faster and easier? Flexbox is your answer. It feels like you sometimes have to do some crazy work arounds to get columns in columns, or strange things like that. I also don't appreciate only have options of splitting columns into 12 columns or less. In fact when I use Bootstrap for an application that I am writing, I really almost only ever use it for the grid layouts, sometimes I will use it for notifications or basic fairly sensible CSS defaults, but 90% of the time, all I want is the grid layouts. But, like most of you, I don't have a fondness of the dependencies required to run Bootstrap or Foundation nor do I like the ding to my page load times. Grid layouts are the bread and butter of web development design and chances are you've reached for something like Bootstrap or Foundation to make your layouts a reality. Similar to clearfloat, should preferably be used with divs, i.e.Super easy responsive Row and Columns in straight up CSS Marks – similar to emphasis, important_paragraf, importanttext Widths – experimental, might not work as expected, includes mobile supportįits two columns in a row, should be used in pairsįits three or two columns in a row, should be used in triplets or together with twothirdsįits two columns in a row when used together with third, one 1/3 wide and another 2/3 wideįits four columns in a row, should be used in quadsĪlignments – similar to divalign, columns, styler – don't work with spans!īoxes and notes – similar to box, note, tipĬreates a box around the container (uses colours from style.ini)Ĭreates an orange box with an important iconĪlert ( was warning in previous versions)Īdds rounded corners to any container with a background colour or a border (only works in modern browsers, i.e. Will also show the text in multiple columns but determined by their width (small, medium or large), only works in modern browsers (no IE9 and below) Will show the text in multiple columns determined by their amount (2, 3, 4 or 5), only works in modern browsers (no IE9 and below) Will position the container in the horizontal center of the page Same as column, will let you float your container on the left Same as left in LTR languages and same as right in RTL languages Please note, some things won't work with spans: alignments (including alignments generated by changing the text direction), multi-columns and widths if the according wrap isn't floated as well.Ĭolumns – similar to columns, side_note, styler, tip Since version there is also a shorthand syntax (for wraps without content): An uppercase (or alternatively or ) creates a div and should be used for “big” containers, surrounding paragraphs, lists, tables, etc.Ī lowercase (or alternatively or ) creates a span and should be used for “small” containers, inside paragraphs, lists, tables, etc.
0 Comments
Leave a Reply. |