Skip to content
This repository was archived by the owner on Mar 14, 2022. It is now read-only.

Commit fe13f57

Browse files
brntbeerbrntbeer
committed
Merge pull request #49 from github/redirect-lessons
Redirect lessons
2 parents 7dc9e23 + ead0682 commit fe13f57

File tree

22 files changed

+1115
-121
lines changed

22 files changed

+1115
-121
lines changed

‎_layouts/redirect.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
layout:
3+
---
4+
5+
<!DOCTYPE HTML>
6+
<html>
7+
<head>
8+
<noscript>
9+
<meta http-equiv="refresh" content="{{page.redirectdelay}};url={{page.redirecturl}}">
10+
</noscript>
11+
</head>
12+
13+
<body onLoad="window.setTimeout(function(){window.location.href='{{page.redirecturl}}'},{{page.redirectdelay}})">
14+
<p>This page has moved to {{page.redirecturl}} because this site is being deprecated for better material</p>
15+
</body>
16+
</html>
17+
18+
<html>

‎components/gridism/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
_site/
2+
shapeshifter/

‎components/gridism/LICENSE‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Copyright (c) 2013 Coby Chapple.
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy
4+
of this software and associated documentation files (the 'Software'), to deal
5+
in the Software without restriction, including without limitation the rights
6+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7+
copies of the Software, and to permit persons to whom the Software is
8+
furnished to do so, subject to the following conditions:
9+
10+
The above copyright notice and this permission notice shall be included in all
11+
copies or substantial portions of the Software.
12+
13+
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19+
SOFTWARE.

‎components/gridism/README.md‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
# Gridism
2+
3+
A simple responsive CSS grid. [View the demo →](http://cobyism.com/gridism/)
4+
5+
## Why?
6+
7+
### My process
8+
9+
When I design web layouts, my thought process usually goes something like this:
10+
11+
> Alright, in this section, I want a bit that’s one third of the section’s width,
12+
> and then next to that I want another bit that’s two thirds of the sections’s width.
13+
> Now, in the next section…
14+
15+
I don’t think in 12 or 16 column grids. Instead, my mental model basically just consists of the page being divided up into multiple full-width vertical sections, and each vertical section being divided up into simple fractions of the section width.
16+
17+
### Existing grid frameworks
18+
19+
Most frameworks I’ve used don’t match that thought process *at all*. I usually have to:
20+
21+
1. Remember how many columns are in the grid for the particular framework I’m using.
22+
1. Decide how I want to divide up this particular section’s content.
23+
1. Mentally do the conversion from what I want to see (one quarter + three quarters, for example) into the number of columns I need for the grid I’m using.
24+
1. Remember the class naming structure for the framework I’m using. Is it `.span3`, `.grid_3`, `.col-3`, or something else altogether?
25+
1. Deal with other hassles like clearing floats, messing with column padding to have the gutters look right, indicating which elements are the first in a row, and so forth.
26+
27+
Only the second step should be necessary.
28+
29+
### Gridism’s Goals
30+
31+
I couldn’t find a framework that matched this mental model of how I work, so I started hacking on Gridism with the following goals:
32+
33+
- Class names should be memorable and self-evident.
34+
- Gutters and basic content padding should be taken care of.
35+
- Clearing floats should be done automatically.
36+
- Wrapped grid sections should be independant of vertical page sections.
37+
- Frequently required utility classes should be provided.
38+
- Common patterns for Responsive Design™ should be built-in.
39+
40+
I hope you find that this project is living up to those goals. If not, please [create an issue](https://github.com/cobyism/gridism/issues/new) and let me know.
41+
42+
## Installation
43+
44+
### 1. Get the files
45+
46+
The easiest way to use Gridism in your project is via the [Bower](http://twitter.github.com/bower) package manager.
47+
48+
```sh
49+
bower install gridism
50+
```
51+
52+
Elsewise, [download the zip folder](https://github.com/cobyism/gridism/archive/gh-pages.zip), extract it, and copy `gridism.css` into your project’s folder. Boom. Done.
53+
54+
### 2. Link the stylesheet
55+
56+
Add the following stylesheet to your HTML’s `<head>` section:
57+
58+
```html
59+
<link rel="stylesheet" href="components/gridism/gridism.css">
60+
```
61+
62+
**Note:** If you didn’t install using Bower, you need to adjust the path of CSS file to match your file structure.
63+
64+
### 3. Viewport scale
65+
66+
Add the following meta tag to your HTML’s `<head>` section:
67+
68+
```html
69+
<meta name="viewport" content="width=device-width,initial-scale=1">
70+
```
71+
72+
Without this meta tag, mobiles and tablets might load your page as a scaled-down version of the desktop size, instead of resizing the content to match the device’s actual viewport width.
73+
74+
## Contributing
75+
76+
I’d :heart: to recieve contributions to this project. It doesn’t matter if it’s just a typo, or if you’re proposing an overhaul of the entire project—I’ll gladly take a look at your changes. Fork at will! :grinning:.
77+
78+
## License
79+
80+
Go nuts. See [LICENSE](https://github.com/cobyism/gridism/blob/gh-pages/LICENSE) (MIT).

‎components/gridism/component.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "gridism",
3+
"version": "0.0.0",
4+
"author": {
5+
"name": "Coby Chapple"
6+
},
7+
"homepage": "https://github.com/cobyism/gridism/",
8+
"main": "./css/gridism.css",
9+
"repository": {
10+
"type": "git",
11+
"url": "git://github.com/cobyism/gridism.git"
12+
},
13+
"ignore": [
14+
"shapeshifter/",
15+
"**/*.yml",
16+
"**/*.html"
17+
],
18+
"license": "MIT",
19+
"gitHead": "ebd7d76b9a60ef2f1a679020e2933e0396f80438",
20+
"readme": "# Gridism\n\nA simple responsive CSS grid. [View the demo →](http://cobyism.com/gridism/)\n\n## Why?\n\n### My process\n\nWhen I design web layouts, my thought process usually goes something like this:\n\n> Alright, in this section, I want a bit that’s one third of the section’s width,\n> and then next to that I want another bit that’s two thirds of the sections’s width.\n> Now, in the next section…\n\nI don’t think in 12 or 16 column grids. Instead, my mental model basically just consists of the page being divided up into multiple full-width vertical sections, and each vertical section being divided up into simple fractions of the section width.\n\n### Existing grid frameworks\n\nMost frameworks I’ve used don’t match that thought process *at all*. I usually have to:\n\n1. Remember how many columns are in the grid for the particular framework I’m using.\n1. Decide how I want to divide up this particular section’s content.\n1. Mentally do the conversion from what I want to see (one quarter + three quarters, for example) into the number of columns I need for the grid I’m using.\n1. Remember the class naming structure for the framework I’m using. Is it `.span3`, `.grid_3`, `.col-3`, or something else altogether?\n1. Deal with other hassles like clearing floats, messing with column padding to have the gutters look right, indicating which elements are the first in a row, and so forth.\n\nOnly the second step should be necessary.\n\n### Gridism’s Goals\n\nI couldn’t find a framework that matched this mental model of how I work, so I started hacking on Gridism with the following goals:\n\n- Class names should be memorable and self-evident.\n- Gutters and basic content padding should be taken care of.\n- Clearing floats should be done automatically.\n- Wrapped grid sections should be independant of vertical page sections.\n- Frequently required utility classes should be provided.\n- Common patterns for Responsive Design™ should be built-in.\n\nI hope you find that this project is living up to those goals. If not, please [create an issue](https://github.com/cobyism/gridism/issues/new) and let me know.\n\n## Installation\n\n### 1. Get the files\n\nThe easiest way to use Gridism in your project is via the [Bower](http://twitter.github.com/bower) package manager.\n\n```sh\nbower install gridism\n```\n\nElsewise, [download the zip folder](https://github.com/cobyism/gridism/archive/gh-pages.zip), extract it, and copy `gridism.css` into your project’s folder. Boom. Done.\n\n### 2. Link the stylesheet\n\nAdd the following stylesheet to your HTML’s `<head>` section:\n\n```html\n<link rel=\"stylesheet\" href=\"components/gridism/gridism.css\">\n```\n\n**Note:** If you didn’t install using Bower, you need to adjust the path of CSS file to match your file structure.\n\n### 3. Viewport scale\n\nAdd the following meta tag to your HTML’s `<head>` section:\n\n```html\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n```\n\nWithout this meta tag, mobiles and tablets might load your page as a scaled-down version of the desktop size, instead of resizing the content to match the device’s actual viewport width.\n\n## Contributing\n\nI’d :heart: to recieve contributions to this project. It doesn’t matter if it’s just a typo, or if you’re proposing an overhaul of the entire project—I’ll gladly take a look at your changes. Fork at will! :grinning:.\n\n## License\n\nGo nuts. See [LICENSE](https://github.com/cobyism/gridism/blob/gh-pages/LICENSE) (MIT).\n",
21+
"readmeFilename": "README.md",
22+
"_id": "[email protected]",
23+
"description": "A simple responsive CSS grid. [View the demo →](http://cobyism.com/gridism/)",
24+
"commit": "ebd7d76b9a60ef2f1a679020e2933e0396f80438"
25+
}

0 commit comments

Comments
 (0)