JavaScript Fatigue
December 15, 2016
An old developer’s take on JavaScript fatigue:
Old guy yells at young whippersnappers: Get your JavaScript fatigue off my lawn or I’ll whoop your ASCII!
Read the article.
Putting CSS3 and HTML5 to Work
December 15, 2016
An old developer’s take on JavaScript fatigue:
Old guy yells at young whippersnappers: Get your JavaScript fatigue off my lawn or I’ll whoop your ASCII!
Read the article.
December 10, 2016
ChocolateChip-UI provides a convenient grid system based on CSS flexbox. This means your grid columns use flex to determine their widths. This gives you responsive layouts. Because the grids use flexbox, there are no floats involved, and no need to clear floats, etc. Also all columns are automatically equal height in the same grid.
To make a grid, just put the class grid
on a div:
// Define a grid: <div class='grid'></div>
This gives you a grid row. Inside this you can create grid columns with the class col
.
// Define a grid with 3 columns: <div class='grid'> <div class='col'>1</div> <div class='col'>2</div> <div class='col'>3</div> </div>
By default all columns have a flex value of 1, so they will all have the same width. You can give columns a specific flex value using specific classes that ChocolateChip-UI uses. These are as follows:
<div class='flex-1'></div> <div class='flex-2'></div> <div class='flex-3'></div> <div class='flex-4'></div> <div class='flex-5'></div> <div class='flex-6'></div> <div class='flex-7'></div> <div class='flex-8'></div> <div class='flex-9'></div> <div class='flex-10'></div>
By giving columns various flex values you can create complex layouts for you app
As we mentioned, columns in the same grid row are always equal height.
You can give your grid, both rows and columns, some preset gutters. To do so you can put one of two classes on the grid row: gutter-5
or gutter-10
.
If you want some other gutter value, you can create your own class. Below is a possible class you could use:
.gutter-15 { margin: 15px; }
Then you can use your class on your grids like with our own gutter classes.
You can center the columns to the grid row, creating space around them, using the center
class:
By their nature, flex columns are dynamic. They flex to fill whatever space is available on screen. This is great for mobile devices, such as when the user changes the orientation of a mobile device from portrait to landscape. You can rest assure that you layout will work equally well in all situations. However, sometimes you may need to give a particular column a fixed width. You can do this by giving it a special class. On this class you will define the width you want, and you will also set its flex value to 0:
.fixedWidth { -webkit-flex: none; flex: none; width: 250px; }
Putting the above class on a column will force it to always have a width of 250 pixels. Any other columns in its grid row will use whatever space is left after that column is rendered. Below is an example of fixed columns:
To learn more about layouts in ChocolateChip-UI, visit the following links: