chore: cleanup, node14 and new admin default

This commit is contained in:
Taranto 2020-10-16 17:26:30 +01:00 committed by Josh Harvey
parent c7c18633d7
commit 89bb9a8f25
244 changed files with 3957 additions and 39487 deletions

View file

@ -0,0 +1,27 @@
{
"name": "gridism",
"version": "0.2.2",
"author": "Coby Chapple",
"homepage": "http://cobyism.com/gridism",
"main": "./gridism.css",
"repository": {
"type": "git",
"url": "git://github.com/cobyism/gridism.git"
},
"ignore": [
"shapeshifter/",
"**/*.yml",
"**/*.html"
],
"license": "MIT",
"_release": "0.2.2",
"_resolution": {
"type": "version",
"tag": "0.2.2",
"commit": "490be0b6813d701dcc35a82b0bcc8f639e5ad63f"
},
"_source": "https://github.com/cobyism/gridism.git",
"_target": "^0.2.2",
"_originalSource": "gridism",
"_direct": true
}

View file

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

View file

@ -0,0 +1,80 @@
# Gridism
A simple responsive CSS grid. [View the demo →](http://cobyism.com/gridism/)
## Why?
### My process
When I design web layouts, my thought process usually goes something like this:
> Alright, in this section, I want a bit thats one third of the sections width,
> and then next to that I want another bit thats two thirds of the sectionss width.
> Now, in the next section…
I dont 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.
### Existing grid frameworks
Most frameworks Ive used dont match that thought process *at all*. I usually have to:
1. Remember how many columns are in the grid for the particular framework Im using.
1. Decide how I want to divide up this particular sections content.
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 Im using.
1. Remember the class naming structure for the framework Im using. Is it `.span3`, `.grid_3`, `.col-3`, or something else altogether?
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.
Only the second step should be necessary.
### Gridisms Goals
I couldnt find a framework that matched this mental model of how I work, so I started hacking on Gridism with the following goals:
- Class names should be memorable and self-evident.
- Gutters and basic content padding should be taken care of.
- Clearing floats should be done automatically.
- Wrapped grid sections should be independant of vertical page sections.
- Frequently required utility classes should be provided.
- Common patterns for Responsive Design™ should be built-in.
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.
## Installation
### 1. Get the files
The easiest way to use Gridism in your project is via the [Bower](http://twitter.github.com/bower) package manager.
```sh
bower install gridism
```
Elsewise, [download the zip folder](https://github.com/cobyism/gridism/archive/gh-pages.zip), extract it, and copy `gridism.css` into your projects folder. Boom. Done.
### 2. Link the stylesheet
Add the following stylesheet to your HTMLs `<head>` section:
```html
<link rel="stylesheet" href="bower_components/gridism/gridism.css">
```
**Note:** If you didnt install using Bower, you need to adjust the path of CSS file to match your file structure.
### 3. Viewport scale
Add the following meta tag to your HTMLs `<head>` section:
```html
<meta name="viewport" content="width=device-width,initial-scale=1">
```
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 devices actual viewport width.
## Contributing
Id :heart: to receive contributions to this project. It doesnt matter if its just a typo, or if youre proposing an overhaul of the entire project—Ill gladly take a look at your changes. Fork at will! :grinning:.
## License
Go nuts. See [LICENSE](https://github.com/cobyism/gridism/blob/gh-pages/LICENSE) (MIT).

View file

@ -0,0 +1,17 @@
{
"name": "gridism",
"version": "0.2.1",
"author": "Coby Chapple",
"homepage": "http://cobyism.com/gridism",
"main": "./gridism.css",
"repository": {
"type": "git",
"url": "git://github.com/cobyism/gridism.git"
},
"ignore": [
"shapeshifter/",
"**/*.yml",
"**/*.html"
],
"license": "MIT"
}

View file

@ -0,0 +1,132 @@
/*
* Gridism
* A simple, responsive, and handy CSS grid by @cobyism
* https://github.com/cobyism/gridism
*/
/* Preserve some sanity */
.grid,
.unit {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Set up some rules to govern the grid */
.grid {
display: block;
clear: both;
}
.grid .unit {
float: left;
width: 100%;
padding: 10px;
}
/* This ensures the outer gutters are equal to the (doubled) inner gutters. */
.grid .unit:first-child { padding-left: 20px; }
.grid .unit:last-child { padding-right: 20px; }
/* Nested grids already have padding though, so let's nuke it */
.unit .unit:first-child { padding-left: 0; }
.unit .unit:last-child { padding-right: 0; }
.unit .grid:first-child > .unit { padding-top: 0; }
.unit .grid:last-child > .unit { padding-bottom: 0; }
/* Let people nuke the gutters/padding completely in a couple of ways */
.no-gutters .unit,
.unit.no-gutters {
padding: 0 !important;
}
/* Wrapping at a maximum width is optional */
.wrap .grid,
.grid.wrap {
max-width: 978px;
margin: 0 auto;
}
/* Width classes also have shorthand versions numbered as fractions
* For example: for a grid unit 1/3 (one third) of the parent width,
* simply apply class="w-1-3" to the element. */
.grid .whole, .grid .w-1-1 { width: 100%; }
.grid .half, .grid .w-1-2 { width: 50%; }
.grid .one-third, .grid .w-1-3 { width: 33.3332%; }
.grid .two-thirds, .grid .w-2-3 { width: 66.6665%; }
.grid .one-quarter,
.grid .one-fourth, .grid .w-1-4 { width: 25%; }
.grid .three-quarters,
.grid .three-fourths, .grid .w-3-4 { width: 75%; }
.grid .one-fifth, .grid .w-1-5 { width: 20%; }
.grid .two-fifths, .grid .w-2-5 { width: 40%; }
.grid .three-fifths, .grid .w-3-5 { width: 60%; }
.grid .four-fifths, .grid .w-4-5 { width: 80%; }
.grid .golden-small, .grid .w-g-s { width: 38.2716%; } /* Golden section: smaller piece */
.grid .golden-large, .grid .w-g-l { width: 61.7283%; } /* Golden section: larger piece */
/* Clearfix after every .grid */
.grid {
*zoom: 1;
}
.grid:before, .grid:after {
display: table;
content: "";
line-height: 0;
}
.grid:after {
clear: both;
}
/* Utility classes */
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.pull-left { float: left; }
.pull-right { float: right; }
/* A property for a better rendering of images in units: in
this way bigger pictures are just resized if the unit
becomes smaller */
.unit img {
max-width: 100%;
}
/* Hide elements using this class by default */
.only-on-mobiles {
display: none !important;
}
/* Responsive Stuff */
@media screen and (max-width: 568px) {
/* Stack anything that isn't full-width on smaller screens
and doesn't provide the no-stacking-on-mobiles class */
.grid:not(.no-stacking-on-mobiles) > .unit {
width: 100% !important;
padding-left: 20px;
padding-right: 20px;
}
.unit .grid .unit {
padding-left: 0px;
padding-right: 0px;
}
/* Sometimes, you just want to be different on small screens */
.center-on-mobiles {
text-align: center !important;
}
.hide-on-mobiles {
display: none !important;
}
.only-on-mobiles {
display: block !important;
}
}
/* Expand the wrap a bit further on larger screens */
@media screen and (min-width: 1180px) {
.wider .grid,
.grid.wider {
max-width: 1180px;
margin: 0 auto;
}
}