Spinners ^ Back to Top
For when stuff is loading.
 |
 |
 |
 |
 |
 |
 |
 |
What's perfect pitch?
When you throw an accordion into the middle of a pond and not hit any of the ducks.
| Multiple | Single | |
|---|---|---|
| Flexible Growth | ||
| Static Growth | ||
| Flexible (Light) | ||
Reusable bits of common animations. These are CSS based, but could be switched to jQuery.
| applies class .an-shake | |
| start with class .disappear - gain class .an-fade-in add class .an-fade-out |
|
| Flash |
Purty!
Not seen: #4B4A3C - BG of logged in header
bg-dark
|
bg-light
|
bg-white
|
bg-brand
|
bg-teal
|
grad-dark
|
grad-brand
|
grad-teal-dark
|
grad-teal
|
grad-orange-dark
|
grad-orange
|
grad-yellow
|
bg-brand-dark
|
There are "logged in" and "logged out" headers.
| Menu of buttons, one with a dropdown, one without | |
| Button-based dropdowns can take any arrow or color classes regular buttons can (requires buttons.css) | |
| Button | Mini button (requires buttons.css) / Doesn't change size of dropdown |
| If list is going to be long, add "long" class name to the <ul> | |
| Button | Just adding class name of "disabled" to button will kill all functionality |
| I Change State | Menu that "changes state" |
This is based on Formalize.
The autofocus attribute works but it's annoying on this page.
Hover over them for more information.
Top left requires no additional class
| Position | Normal | On Dark | With Tip | With Pro Feature |
|---|---|---|---|---|
| Top Left / Default |
?
View ClipsView Clips are saved versions of individual question summaries you wish to share or export for printing or importing into your favorite presentation software like PowerPoint. You can save multiple versions of the same question (with different filters or chart types, for example). Learn more » |
?
View ClipsView Clips are saved versions of individual question summaries you wish to share or export for printing or importing into your favorite presentation software like PowerPoint. You can save multiple versions of the same question (with different filters or chart types, for example). Learn more » |
||
| Top Right |
?
View ClipsView Clips are saved versions of individual question summaries you wish to share or export for printing or importing into your favorite presentation software like PowerPoint. You can save multiple versions of the same question (with different filters or chart types, for example). Learn more » |
?
View ClipsView Clips are saved versions of individual question summaries you wish to share or export for printing or importing into your favorite presentation software like PowerPoint. You can save multiple versions of the same question (with different filters or chart types, for example). Learn more » |
||
| Bottom Left |
?
View ClipsView Clips are saved versions of individual question summaries you wish to share or export for printing or importing into your favorite presentation software like PowerPoint. You can save multiple versions of the same question (with different filters or chart types, for example). Learn more » |
?
View ClipsView Clips are saved versions of individual question summaries you wish to share or export for printing or importing into your favorite presentation software like PowerPoint. You can save multiple versions of the same question (with different filters or chart types, for example). Learn more » |
||
| Bottom Right |
?
View ClipsView Clips are saved versions of individual question summaries you wish to share or export for printing or importing into your favorite presentation software like PowerPoint. You can save multiple versions of the same question (with different filters or chart types, for example). Learn more » |
?
View ClipsView Clips are saved versions of individual question summaries you wish to share or export for printing or importing into your favorite presentation software like PowerPoint. You can save multiple versions of the same question (with different filters or chart types, for example). Learn more » |
Discussion happening on whether to use inline-block or floats...
Proposed:
grid1: 10/300/20/660/10grid2:10/200/20/760/10grid3:10/760/20/200/10grid4:10/735/20/225/10grid5:10/200/20/535/20/225/10Do we allow grids within grids?
Popups. Some modal, some not. Different positions, colors, styles, etc.
Bars, e.g. "Upgrade" bar.
Coming soon.
For when stuff is loading.
|
|
|
|
|
|
|
|
This is the global site sprite. Sprites are excellent for site performance (less HTTP Requests).
Good resource for getting position/dimensions: SpriteCow
Tables are for tabular data only.
Do we need sorting?
Should we incorporate a responsive design pattern for tables?
| First | Last | Job Title | Color | City | GPA | Data |
|---|---|---|---|---|---|---|
| James | Matman | Chief Sandwich Eater | Lettuce Green | Gotham City | 3.1 | RBX-12 |
| The | Tick | Crimefighter Sorta | Blue | Athens | N/A | Edlund, Ben (July 1996). |
| Jokey | Smurf | Giving Exploding Presents | Smurflow | New Smurf City | 4.Smurf | One |
| Cindy | Beyler | Sales Representative | Red | Paris | 3.4 | 3451 |
| Captain | Cool | Tree Crusher | Blue | Las Vegas | 1.9 | Under the couch |
| First Name | Last Name | Job Title | Favorite Color | Wars or Trek? | Date of Birth | GPA | Arbitrary Data |
|---|---|---|---|---|---|---|---|
| James | Matman | Chief Sandwich Eater | Lettuce Green | January 13, 1979 | Gotham City | 3.1 | RBX-12 |
| The | Tick | Crimefighter Sorta | Blue | July 19, 1968 | Athens | N/A | Edlund, Ben (July 1996). |
| Jokey | Smurf | Giving Exploding Presents | Smurflow | Smurfuary Smurfteenth, 1945 | New Smurf City | 4.Smurf | One |
| Cindy | Beyler | Sales Representative | Red | July 5, 1956 | Paris | 3.4 | 3451 |
| Captain | Cool | Tree Crusher | Blue | December 13, 1982 | Las Vegas | 1.9 | Under the couch |
| First Name | Last Name | Job Title | Favorite Color | Wars or Trek? | Date of Birth | GPA | Arbitrary Data |
|---|---|---|---|---|---|---|---|
| James | Matman | Chief Sandwich Eater | Lettuce Green | January 13, 1979 | Gotham City | 3.1 | RBX-12 |
| The | Tick | Crimefighter Sorta | Blue | July 19, 1968 | Athens | N/A | Edlund, Ben (July 1996). |
| Jokey | Smurf | Giving Exploding Presents | Smurflow | Smurfuary Smurfteenth, 1945 | New Smurf City | 4.Smurf | One |
| Cindy | Beyler | Sales Representative | Red | July 5, 1956 | Paris | 3.4 | 3451 |
| Captain | Cool | Tree Crusher | Blue | December 13, 1982 | Las Vegas | 1.9 | Under the couch |
For some of these, each tab will likely be a unique URL. For others, they will be same-page tabs where the content changes via JavaScript. We may want to consider giving even same-page tabs linkabke, unique URLs as well (link).
Web design is typography.
If you need the style of an h3 but semantically you need to use an h2, use <h2 class="h3">. This goes for any combination.
This is a paragraph to show off some basic inline styles, for example here's some strong text and here's some bold text. Likewise, here's some emphasized (em) text and here's some italic text. Occationally we may need to styleinline code. For sure, we'll need to show links in text which sometimes are pretty darn long, you know what I mean?
I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.
First sentence of a block quote.
Second sentence of a block quote.
#header h1 a {
display: block;
width: 300px;
height: 80px;
}