In the Beginning...
Lil Boxes was created as a way to utilize the FlexBox layout of CSS3 as a fully responsive framework for building websites. The goal was to move away from the constraints of typical grid style frameworks that are popular in website building today. While most of these grid style frameworks do offer a responsiveness when it comes to website building, they are still confined to using a set number of columns for the content to be set into. With Lil Boxes, and the use of FlexBox at the base of the framework, you're no longer locked into 8, 10, or 12 columns. FlexBox handles the layout for you. If your content needs more room, FlexBox will either adjust the whitespace around your content or move your content to a new line. What Lil Boxes does for you is build the foundation for FlexBox so that you can control how it will behave and give you ultimate control over your content without removing the true fluidity of FlexBox. That's what we call Liquid Intelligent Layout.
So how does it work?
Lil Boxes likes classes. A lot. Like might not be a strong enough word. Lil Boxes may be in love with classes. So much so that you'll find that when using Lil Boxes, you will use LOTS of classes. Seriously, we go nuts with classes. See that Lil Boxes logo at the top of the page? That's not an image. That is built using Lil Boxes. Go inspect that thing with your favorite HTML inspector, I'll wait here. Did you see all the classes? I counted up to 8 classes on some of those elements.
I know some of you are thinking, "That's stupid! Why would I ever need that many classes on a single element? That is just confusing markup." Well, it might be a lot to take in, but it is actually pretty simple once you understand what you're looking at. Lil Boxes uses micro-classes. Instead of ubiquitous, all-encompassing classes that don't tell you what they are bringing to the element (i.e. .container or .success), the classes in Lil Boxes all bring a specific action to that element. Whether it is background color, text color, sizing, padding, margins, or how FlexBox will behave, each class has a simple job. And because of each class having a simple job, Lil Boxes embraces multiple classes on an element. We like to think of each element as a big party. The more classes, the merrier!
I'm still confused. Give me an example...
OK, no problem. See that tiny Box over on the right? That's a Lil Box. It's the most basic Lil Box. What makes it a Lil Box? Well, simply put, its code looks like this:
I'm a Lil Box!
See that "box" class? That's where the magic begins. Now I admit, that's a pretty boring Box. It inherited its colors from its parent (in this case that goes all the way back to the main container on this page). It is using the default font size, family, and weight (also inherited). It doesn't have any padding or margins around it. But it is sporting a pretty sweet shadow and it has rounded corners. By default, all Lil Boxes get that treatment. You can disable shadows and rounded corners too, but we'll discuss that later.
That's boring! I'm bored. Stop with the boring stuff and get on with it!
OK, geez! Calm yourself a minute. You can't just rush these things. I was going to take the time and explain as I go. But you millenials and your short attention spans. If you want less boring, then check this Box out:
<div class="box jc-start row-c pop bx-blue alpha-a gutters-c fluff-d push-c tx-groovy tx-silver tx-huge">
I'm a Stylized Lil Box!
Is that better? That Box has some serious style. And it also has a bunch of classes attached to it. Count 'em up and you should get 12 total classes.
Is that every possible class?
Not even close. You could potentially have over 20 classes on a single element.
Is there a limit to the number of classes I can add before I break HTML?
Nope. There is no actual limit to the number of classes you can add to an element when designing for modern browsers. Theoretically, you would start to see performance degradation around 2000 classes per element, but even as much as Lil Boxes loves classes, we don't love them THAT much.
OK, so I get the "box" class, but what the heck does the rest of that stuff mean?
Good question. So we added 11 extra classes to make that boring little Box look like the belle of the ball. Let's take a basic look at them one by one (more detail to come later)...
This is the default Lil Boxes class. You knew that.
This tells FlexBox how to arrange the white-space around this Box's children elements.
This tells FlexBox how to line up this Box's children elements (either rows or columns).
This is an animation class. If you hover over the Box, you'll notice it pops out just a bit.
This sets the Box's background color. Lil Boxes has 25 pre-defined colors.
This sets the Box's opacity level. Lil Boxes has 8 pre-defined opacity levels.
This sets the Box's left & right padding (inner white-space).
This sets the Box's top & bottom padding (inner white-space).
This sets the Box's margins (surrounding white-space).
This sets the Box's font family. Lil Boxes has 12 pre-defined fonts.
This sets the Box's text color. Lil Boxes has 25 pre-defined colors.
This sets the Box's font size. Lil Boxes has 8 pre-defined sizes.
I think I'm starting to get it. Where can I learn more?
Just click one of the links below to learn more about the available classes associated with that topic:
Lil Box Basics
The Basic Box...
Box - Your new best friend
Before we dive too far into Lil Boxes and how it behaves, I'd highly recommend reading up on how FlexBox works since it is the foundation upon which Lil Boxes is built. If you don't know where to look, a great introduction is over at CSS-Tricks. They break it down quite nicely. Once you're done with that bit of homework, we can continue here.
So how does Lil Boxes use FlexBox?
Let's take a look at the CSS that makes up the box class (minus the browser prefixes):
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
transition: all 0.3s ease;
Let me explain what you're looking at here. If you're familiar with CSS, you should recognize that "Display" property. What may look strange is that it is set to "Flex" instead of the usual "Block" or "Inline". Specifically, what that "Flex" means is that we are going to define this element as a FlexBox container and that all items within this container will behave according to the FlexBox properties we set on this container. Let's look at those properties...
The first property listed is "justify-content". In our box class, we've set that to "center". What this means is that all items within this Box are going to bunch up in the center of the Box. Left and right margins will be handled by FlexBox and will be equal to each other (if the Box is set as a Row and not a Column). All white space between items will be eliminated (unless forced by other classes). There are other possible options, but "center" is going to be our default setting.
Next up is the property "align-items" which is also set to "center". This property tells the items within this Box how to align themselves across the other axis (in our case, this would be vertically in this Box). So by setting align-items to center, FlexBox will handle the top and bottom margins and set them equal to each other. Again there are other possible options.
So essentially what we've done with these two properties is we've told FlexBox to take any items within our Box, put them into a single row within this Box, center the items in that row, and then center that row vertically within the Box. The results look like this:
*To help with the visualiztion, all Boxes in this example we're given padding. If no padding was given, the Items would only be as large as the text contained in them. And Our Box would only be as large as required to contain the 4 Teal Boxes.
But what's with that "flex: inherit" property? What is it inheriting? And from where?
Keen observation skills you have there. If you did your homework above, you should know that the "flex" property is a short-hand property for the 3 item properties: "flex-grow", "flex-shrink", and "flex-basis". To understand why they are set to inherit, I'd recommend hopping over to the FlexBox Stuff Doc page and reading up.
Wait, wait, wait! ITEM properties? I thought our Box was a container? Why would it need Item properties?
I was going to get to this later but I guess we'll talk about it now. While your Box is technically a container, in reality it is actually an Item too. Boxes play both roles. This way you can nest Boxes within other Boxes within other Boxes within other Boxes within... well you get the idea.
Boxes in Boxes - Wait, you can do that?
Of course you can. Because Boxes are both container AND items, you can use them as either. Which means that if you need to nest content, you can do that without the need for any special classes. Let's expand on our previous example:
A couple things to note...
First, notice that the text "Item #1" is treated as an Item within that first Box. It lines itself up in a row with the Orange Boxes and bunches up in the center (as our justify-content property is dictating). And it also aligns itself centered vertically with the Box (as our align-items property dictates).
Second, all 4 of the Teal Boxes have the same class properties set. FlexBox automatically increases the size of Item #1 to accommodate its children. If we were to add more Orange Boxes, Item #1 would continue to grow in size.
You can continue the same pattern if you wanted to and go nuts nesting boxes all day long!
Roomy - Gives breathing room around all items
Let's back up a bit and talk about that "flex" property (the short-hand Item one). By default, this property is set to "flex: 0 1 auto". What this means is that each Box will only take up as much space as required by its contents (padding & margins included in those contents). So if you have two Boxes with unequal content, the two Boxes will be different sizes:
*The jc-around class was added to Our Box to help with the visualzation. This changed the justify-content property to "space-around" instead of "center".
As stated above, this is the default behavior for all Boxes. But since this property is inherited from its parent element, there is the chance that it may get changed. If you find yourself in this situation and need to get the default flex property back, you can add the roomy class to your Box. This will restore the default flex property.
How would the flex property change from the default settings?
I thought you'd never ask...
Squished - Grabs as much space as possible around all items
squished is the opposite of the roomy class. squished sets the flex property to "flex: 1 0 auto". Where roomy tries to leave as much white space as possible, squished will use it all up. Here's a squished version of the above example:
A couple things to note...
Notice how the text in each Teal Box in this example lines up with the text from the previous example. Each Box still goes about the same rules for fitting its content within itself. The difference here is how the remaining white space is allocated. Each of the Teal Boxes receives an equal amount of the remaining white space and uses it as padding.
OK, that makes sense, but what if I have Boxes with unequal content, but I want my Boxes to be the same size?
Oh, uh, yeah... I was waiting for you to bring this up. This takes us to...
The Forced Grids - Yes, we have them too if you need one
As much as Lil Boxes strives to keep your layout liquid responsive, there are times where you may need to force your layout to behave to a stricter set of rules. That's where these Forced Grids come in. Take a look at the Doc Page navigation buttons at the bottom of this page. Those are set using a built-in Forced Grid. Let's keep going with our 2 Box example above. When you want to split something evenly with a friend, you go halfsies on it. Same thing with Lil Boxes. We'll add the halfsies class to Our Box (instead of squished) and you get the following:
Notice that each Teal Box is the same width. halfsies is more similar to squished than it is to roomy as it will try to use as much white space as possible. However, it distributes that extra white space so that all Boxes are equal.
You may also notice that there is a little bit of space in between the Teal Boxes. halfsies has built-in margins so that each Box has a little bit of breathing room around it. This comes in particularly handy when creating navbars.
What if I have more than two Boxes?
You have some choices then too. Let's continue talking about halfsies for a minute. Let's say you have 9 Boxes you want evenly distributed. If we kept halfsies in place, here's your results:
All of the Forced Grids have built-in wrap classes. This means if you have more items than what you have specified, they will automatically create a new row for the over flow items. In our above example, it needed 4 over flow rows with the last row being filled completely by a single item.
That's great & all, but what if I need more than two items in a row? Halfsies seems limited
Pump your brakes there, son! Of course halfsies is used for two-item rows. But that isn't the only Forced Grid in Lil Boxes. We have Forced Grids for up to 10-item rows. You can always go higher than that too by adding your own custom class, but things get pretty tight as it is with 10 items per row. We'll get to customization later, for now enjoy the naming convention for the Forced Grids:
- 2-Item Row: halfsies
- 3-Item Row: thirdsies
- 4-Item Row: fourthsies
- 5-Item Row: fifthsies
- 6-Item Row: sixthsies
- 7-Item Row: seventhsies
- 8-Item Row: eighthsies
- 9-Item Row: ninthsies
- 10-Item Row: tenthsies
- ??-Item Row: infinitsies (not exactly sure how this one will behave but it should be fun)
Just admit it. You know those are some of the greatest class names you've ever seen. For the record, the navigation below is using fifthsies.
Change the way FlexBox handles your content
Flex - Start here...
Yes, I know. It seems very odd to put the "Start Here" label on the second Doc Page, but there's a reason for this. The box class is the lead actor of Lil Boxes. box gets all the sceen time. box gets nominated for the Oscar. box puts butts in the seats (ok, maybe I've taken this anaolgy too far). But where box is the star, the flex class is the key grip, the gaffer, the best boy, and craft services all rolled into one. Without the flex class, the show never happens.
So what is the flex class? Let's take a look at its CSS (minus the browser prefixes):
If you've already read through the Lil Box Basics Doc Page, you'll notice that this is looks like a stripped down version of the box class. While that is true to a point, the biggest difference is the flex class DOES NOT have a "flex: inherit" property like the box class does.
Why is that important?
What this means is that the flex class is really the starting container. This is the first parent that all the Boxes get nested into. Each page will need at least one flex class parent (usually a page-wrap container or something similar). This sets the foundation for all the nested Boxes. You'll also notice that the flex class is also missing the stylized properties of the box class (box-shadow, border-radius, etc). The reason for this is typically, these page containers will be empty & unstyled elements on the page. That doesn't mean you can't add style classes to these elements, but we're not going to make you do extra work to get rid of them.
Why space-around instead of center?
Again, since the flex class is typically only used on high-level page containers, typically at this level on the page, space-around works better than center justified content. If you find you have a need for a different justification, keep reading...
One more thing to note...
To help you remember the importance of the flex class, Lil-Boxes has built it into some standard HTML tags that would be typically used for starting page elements. <main>, <section>, <header> and <footer> all have the flex class pre-built into the tags.
Justify Content - Tell Flex how to handle white space
In Lil Boxes, there are five different classes to handle the way FlexBox uses white space. These classes can be used on either flex class elements or box class elements as they are both set to "display: flex". Let's look at examples of each justify-content class:
jc-around class (evenly space items with equal white space around each item)
jc-between class (evenly space items with equal white between each leaving no space ouside the items)
jc-center class (bunch all items in the center and leave remaining white space outside of items)
jc-start class (bunch all items at the start of the FlexBox)
jc-end class (bunch all items at the end of the FlexBox)
Align Items - Tell Flex how to handle row alignment
In Lil Boxes, there are five different classes to handle the way FlexBox distributes row alignment. These classes can be used on either flex class elements or box class elements as they are both set to "display: flex". Let's look at examples of each justify-content class:
ai-center class (centers the row within the container)
ai-stretch class (stretches the row to fill the container)
ai-start class (bunch the rows at the start of the FlexBox)
ai-end class (bunch the rows at the end of the FlexBox)
ai-baseline class (aligns the row to the first text baseline)
This is Text
This is Text
And Even More
Align Content - Tell Flex how to handle alignment across rows
Align Self - For when you need unique item alignment
What if you just need one Item on a Box to be aligned differently than the others? FlexBox has you covered there too. There is an over-ride class that you add to an Item that will tell it to align itself by its own rules. Here's an example of that (green Box is the rebel):
Row - Line your items up in a row
So far, all you've seen are Boxes utilizing Rows. The row class is a default setting. Every example to this point have all had a row layout. Technically, if you don't even use the row class, you're still going to get a Row layout.
Why do we need it then? Don't you already have enough classes?
Well, the row class (and its cousins) have specific usage. Let's look at an example that uses the row class, and one that omits it:
With the row class
Without the row class
Notice the difference? If you can't you really need to get your eyes checked. Basically, FlexBox containers will only grow to the size required by the Items contained within them. The row class changes that behavior and sets the container's width to 100% of its parent element.
What if I don't need the Container full-width? Do I need to set my own margins?
Nope. Lil Boxes can do that for you too. The easiest way to do this is to use one of the row class cousins. There are 8 different levels of Row width from 100% down to 50%. Their class names are as follows:
- 100% width: row
- 90% width: row-90
- 80% width: row-80
- 75% width: row-75
- 70% width: row-70
- 66% width: row-66
- 60% width: row-60
- 50% width: row-50
- 40% width: row-40
- 33% width: row-33
- 30% width: row-30
- 25% width: row-25
- 20% width: row-20
- 15% width: row-15
- 10% width: row-10
You'll notice that all rows line themselves in the center of their Parent Element. If you want the row justified left or right you can include the additional classes row-left or row-right.
Column - Line your items up in a column
I'll assume that you have figured out by this point that if we have a row class, we're bound to have a column class. And you have probably deduced how the row and column classes differ. But there are a few considerations to understand when it comes to the column class, let me explain...
First, to truly understand FlexBox (and by association Lil Boxes), you need to be aware that when you set an element to "display: flex" the browser assigns that element two axes (that's the plural for axis, not the wood chopping tool in this case). The first axis is the Main Axis. This sets the direction that Items in the Box are laid out. By default, this is set to Row and lays out the Items side-by-side along the Main Axis. The justify-content property adjusts the behavior along this Axis. The other axis is the Cross Axis. The Cross Axis runs perpendicular to the Main Axis. The align-items property adjusts the behavior along this Axis.
Now with that knowledge squarely in the front of your noggin, know that the alignment of these axes (again, not the lumberjack ones) is determined by the flex-direction property. In Lil-Boxes, that falls to the row and column classes. If you use the row class (or unspecified), the Main Axis runs across the width of the Box. If you use the column class, the Main Axis flips 90° and runs down the height of the Box.
Thanks for dropping the knowledge but why should I care?
The reason this info is important is to understand how justify-content & align-items properties will behave. When you flip the Main Axis, that also changes the direction these properties work from. Now justify-content will space Items top to bottom, and align-items will align those columns left to right. Let's look at some examples:
column class (justify-content: center & align-items: center)
column class (justify-content: flex-start & align-items: center)
column class (justify-content: center & align-items: flex-start)
Notice that justify-content & align-items actions are rotated when using column. Remember that when you go to use columns so that you're not confused when they aren't behaving as you would expect.
Now there's a perfectly logical reason for that little heading up there. You're going to start using Lil Boxes in the near future, and you'll go to use your first column class. You'll lay it out in the markup, you'll have all your Lil Boxes set and nested and think everything is perfect. Then you'll deploy your code, open up your site in IE (because why not), and your layout will be completely jacked up. "Well, that's just IE," you'll think to yourself, and then you'll move onto FireFox and realize your sh!ts still jacked. "What the hell?!" you'll think to yourself as you move onto Chrome while beginning to lose faith in Lil Boxes. You'll launch Chrome, keeping your fingers crossed that you didn't just waste your time, but it turns out that no matter the browser, all of your column classes are hosed (trust me Opera & Safari won't look any better).
But before you flush that design while flipping off Lil Boxes, you'll think back to Hippopotamus. The reason is that you are going to want to jot that word down and once you find yourself in the predicament above, come back to this site, and search for it. That will bring you to this very important section that will explain what is going on (and that you'll have conveniently forgotten).
Here's the deal. Remember that all Boxes in Lil Boxes will only take up as much space as the Items contained within them. This is a very key piece of information (which is why I've mentioned it a few times). What this means is that unlike rows which have a distinct maximum width (the size of your viewport), a column's height s is a bit more ambiguous. Because of the flexibility of the content within a Box, the wrapping of Items within Boxes, and the basic premise of a Liquid Layout, Box height is undefined. The column class sets all Box heights to 100%. What that equates to is to make a box only as tall as its contents. You can increase the size some with padding, but the padding will act as an extension of the Box border (flex-start/flex-end Items won't move themselves into that padded area). No matter which justify-content or align-items classes you select, your Items are going to be locked in place. So when it comes to column height, you have a couple options:
One option would be to create a custom class or ID for this Box and set a min-height for it (or just straight up height if that suits you better). Use any unit you'd like (px, em, rem, vh...) except percent (%) as that will not change the Box behavior.
The other option if this Box you set as a column is an actual box class Box and not a flex class Box, is to use the Box's parent properties to stretch the Box.
Got it? There's a lot going on there, but that's part of the fun of planning a Liquid Layout (heavy sarcasm on the word fun). Now that we have your column's height sorted, you may have also noticed that your Boxes width is also only as wide as the Items within it. Fortunately, width is easier to deal with as we have a defined range (that ol' viewport once again). But instead of having to tack on a custom class or ID (still a viable option) like our option above for the height, use can use our old friend row (and his alphabetical cousins). Lil Boxes is designed so that if both column and row classes are set on the same element, the column class will win out and your Box will behave like a column. But there is one class property that is ignored by column. And that's the row width. So now you can stretch out that column and gives its Items some room to move around. You can also employ the Forced Grid classes as another option and they will help to use up white space.
So what I'm telling you is grab a sticky note and a pen. Scribble out the word 'Hippopotamus' on it and slap it next to your monitor. That will bring you back here when you need a refresher.
Wrap - Used when there are too many items for a single row
Good news! The wrap class is nowhere near as complex as what we just went through so you should be able to breeze through this one with little thought. The wrap class does what you would think it does. If you have multiple Items nested inside a Box, and that Box becomes too narrow to hold them all, the wrap class will bump the over flow Items onto a new row. This is great for Image Galleries, or side-by-side content to automatically go to column format when the layout is compressed (i.e mobile devices). Forced Grid classes (like the Nav Boxes below) will automatically set themselves to wrap. If you have other Boxes that you need similar behavior just add this class.
When it comes to wrap used with column, in theory it will work just like it does with a row. However, since the Main Axis for a column is rotated top to bottom, the wrap class will bump over flow Items to a new column (to the right) of the original. The other thing to keep in mind is that since column class elements have an ever expanding height as default, you won't see the wrap behave as you'd expect unless you define a fixed height (via custom class or ID). Instead, the Box would continue to grow in height with each new Item and ignore the wrap class.
Box Style Stuff
Change the way your Box looks
Flat - Removing default Box styling
So you're not a fan of the rounded corners and the shadow each Lil Box comes with as default. No problem. Add the flat class to your box. It'll end up looking like this:
Our Flat Box
Pointy - Square off those Box corners
But what if you want the square box with the shadow. No problem there either. Add the pointy class to your box. It'll end up looking like this:
Our Pointy Box
Raised - Bring back default styling
Now remember that Boxes will inherit properties from their parents. If you manage to get into Box style inheritance hell and you cannot get the default Box style back, there's a class to help with that. Add the raised class to your box. It'll end up looking like this:
Our Raised Box
Shadow - Bring back that Box shadow
Another style you may want to recover when you're down the inherit rabbit hole is the shadow. Add the shadow class to your box. It'll end up looking like this:
Our Shadow Box
Notice that the Pointy Box is the exact same as the Shadow Box, but you never know when you might need one or the other so they are both there for your convenience.
Curved - Bring back those rounded corners
But what if you want the rounded corners on the Flat Box? There's an option for that too. Add the curved class to your Flat Box. It'll end up looking like this:
Our Flat Curved Box
Circle - Turn that Box into an Elipse
But what if you REALLY want some rounded corners? Like as round as you can get? Add the circle class to your box. It'll end up looking like this:
Our Circle Box
Note that Circle is a bit of a misnomer. Unless the content of your Box is as tall as it is wide, the circle will most likely end up as an elipse.
bx-color - Your Box background color classes
br - Your Box border classes
By default, all border classes are set to solid white (#fff) 1px borders and will look like this...
top & bottom border
left & right border
top & right border
top & left border
bottom & right border
bottom & left border
Note... Lil-Box default style on top, flat style on bottom.
What if I need a different color for my border?
We've got you covered. See those color names above that can be used for background colors? They can also be used for border colors.
br-color - Your Box border color classes
Note... You must still specify the standard border class to use the color change classes. So for the examples above the all have two border classes (.br & .br-color) assigned to each Box.
What if I need a different width for my border?
That's built in too...
br-width - Your Box border width classes
Note... As with the color classes, you must still specify the standard border class to use the width change classes.
I don't suppose you have different style borders?
Yup! That's built in too...
br-style - Your Box border style classes
Note... As with the other border classes, you must still specify the standard border class to use the style change classes. All * classes also used br-width-c to help show the style effect.
Alpha - Your Box opacity classes
Flip & Flop - Your Box rotation angles
White Space Stuff
Change your Margins & Padding with these classes
Gutters & Fluff - Your Padding Classes
Nudge, Push & Shove - Your Margin Classes
Every site needs a Navbar. Here's how to set it up.
#nav-bar id - Start your navbar adventure here
ul & li - These guys just seem like a smart idea here
has-sub - Lets Lil Boxes know you have a sub-menu
sub-link - set this up on your link to that sub-menu
sub - This is your sub-menu
Text & Font Stuff
Change your Text with these classes
tx-color - Your Text color classes
tx-align - Your Text alignment classes
tx-weight - Your Font weight classes
tx-family - Your Font family classes
Extras - other Text styles & transforms
Image & Logo Stuff
Looking to make things disappear on mobile? Look no further.
mob-hide - Won't display on mobile
mob-show - Only displays on mobile
tab-hide - Won't display on mobile or tablet
tab-show - Only displays on mobile or tablet
media queries - Tweak what you need with these
Other Fun Stuff
Animations? Check. Parallax? Roger! Other Stuff? Possibly.
Animations - Static is boring, bring your site to life with these
Parallax - All the cool kids are doing it.