diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b659879 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules +.aws* +dist +.publish diff --git a/README.md b/README.md new file mode 100644 index 0000000..7eefc63 --- /dev/null +++ b/README.md @@ -0,0 +1,9 @@ +# AMCSS documentation page + +To get hackin', clone this bad boy, `npm install` like a bandit, fire up `gulp` like a bat out of hell & point your browsing stick at [http://localhost:3001](http://localhost:3001). Browser-sync + Harp: + +![Oh yeah](http://evilsquirrelsnest.files.wordpress.com/2013/05/koolaidman.jpg) + +If you want to get deployin', run `gulp publish` and it'll push to the `master` branch, which gets published on http://amcss.github.io + +![To the Max](http://www.demandlab.com/sites/all/files/images/ToTheMax_logo.jpg) \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..73fce13 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,53 @@ +var gulp = require('gulp'); +var ghPages = require('gulp-gh-pages'); +var browserSync = require('browser-sync'); +var reload = browserSync.reload; +var harp = require('harp'); + +/** + * Serve the Harp Site from the src directory + */ +gulp.task('serve', function () { + harp.server(__dirname + '/src', { + port: 9001 + }, function () { + browserSync({ + port: 3001, + proxy: "localhost:9001", + open: false, + /* Hide the notification. It gets annoying */ + notify: { + styles: ['opacity: 0', 'position: absolute'] + } + }); + /** + * Watch for scss changes, tell BrowserSync to refresh main.css + */ + gulp.watch("src/**/*.scss", function () { + reload("main.css", {stream: true}); + }); + /** + * Watch for all other changes, reload the whole page + */ + gulp.watch(["src/**/*.jade", "src/**/*.json", "src/**/*.md"], function () { + reload(); + }); + }) +}); + +/** + * Default task, running just `gulp` will compile the sass, + * compile the harp site, launch BrowserSync & watch files. + */ +gulp.task('default', ['serve']); + +gulp.task('build-release', function (done) { + harp.compile('src', __dirname + '/dist', done); +}); +gulp.task('publish', ['build-release'], function () { + return gulp.src("./dist/**/*") + .pipe(ghPages({ + branch: "master", + cacheDir: ".publish" + })) +}); diff --git a/index.html b/index.html deleted file mode 100644 index 557db03..0000000 --- a/index.html +++ /dev/null @@ -1 +0,0 @@ -Hello World diff --git a/package.json b/package.json new file mode 100644 index 0000000..30762be --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "amcss.github.io", + "version": "0.0.0", + "description": "", + "main": "gulpfile.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git://github.com/amcss/amcss.github.io.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/amcss/amcss.github.io/issues" + }, + "homepage": "https://github.com/amcss/amcss.github.io", + "devDependencies": { + "gulp": "~3.8.7", + "browser-sync": "~1.3.6", + "harp": "~0.13.0", + "gulp-gh-pages": "~0.3.3" + }, + "dependencies": { + "metaquery": "~1.2.5" + } +} diff --git a/src/404.jade b/src/404.jade new file mode 100644 index 0000000..5fd3c4c --- /dev/null +++ b/src/404.jade @@ -0,0 +1,2 @@ +section(am-Example) + h3 ¯\_(ツ)_/¯ diff --git a/src/_data.json b/src/_data.json new file mode 100644 index 0000000..0db3279 --- /dev/null +++ b/src/_data.json @@ -0,0 +1,3 @@ +{ + +} diff --git a/src/_harp.json b/src/_harp.json new file mode 100644 index 0000000..fa2db87 --- /dev/null +++ b/src/_harp.json @@ -0,0 +1,5 @@ +{ + "globals": { + "title": "AMCSS - Attribute Modules for CSS" + } +} diff --git a/src/_layout.jade b/src/_layout.jade new file mode 100644 index 0000000..4263f26 --- /dev/null +++ b/src/_layout.jade @@ -0,0 +1,24 @@ +doctype html +html(lang="en") + head + meta(charset="UTF-8") + title= title + meta(name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimal-ui") + meta(name="breakpoint" content="small" media="(max-width: 520px)") + meta(name="breakpoint" content="medium" media="(min-width: 521px) and (max-width: 900px)") + meta(name="breakpoint" content="large" media="(min-width: 901px)") + include ../node_modules/metaquery/metaquery.min.js + link(rel="stylesheet" href="/styles/main.css") + body + != yield + script. + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', 'UA-32408977-7', 'auto'); + ga('send', 'pageview'); + script. + [].forEach.call(document.querySelectorAll('[am-Example] a[href^=http]'), function(el) { + el.setAttribute('target', '_blank'); + }) diff --git a/src/images/ben.jpg b/src/images/ben.jpg new file mode 100644 index 0000000..debb9b3 Binary files /dev/null and b/src/images/ben.jpg differ diff --git a/src/images/glen.jpg b/src/images/glen.jpg new file mode 100644 index 0000000..7ab1e6e Binary files /dev/null and b/src/images/glen.jpg differ diff --git a/src/index.jade b/src/index.jade new file mode 100644 index 0000000..79ac9ba --- /dev/null +++ b/src/index.jade @@ -0,0 +1,152 @@ +header(am-HomepageHero) + h1 AMCSS + h2 + span Attribute Modules + | for CSS +main + section(am-Example) + :markdown + Attribute Modules (AM) is a technique for using HTML **attributes** and their **values** rather than classes for styling elements. In doing so, each attribute effectively declares a separate namespace for encapsulating style information, resulting in more readable and maintainable HTML & CSS. + + It's not a framework or a library, it's a style that better describes the components you're building. For an introduction to how AM was developed, see the [original blog post](http://glenmaddern.com/articles/introducing-am-css) by Glen Maddern. The [specification itself](http://amcss.github.io/) is available on GitHub. + + section(am-Example) + h3 + strong Example: + | Bootstrap Buttons + :markdown + Buttons are one of the strongest use-cases for AM. Here we've converted some of Bootstrap's button markup as an example. + pre: code + span(am-Code='comment')= '\n' + = 'col-*breakpoint*-*number* classes. + + The AM markup, on the other hand, defines `am-Grid-Row` and `am-Grid-Column` modules, and since each of those define a namespace we can be free to use values of our choosing. These values can make use of a wider range of characters than is convenient with classes, so we can use a *breakpoint*:*number* syntax, which is easier to understand at a glance. We can also adopt a mobile-first apporach by omitting the `hand` breakpoint. + + section(am-Example) + h3 + strong Example: + | Traits + :markdown + While AM can be used as a drop-in for BEM-style class naming, you can also consider a module defining a more general *namespace* for grouping related styles. Similar to utility classes in Suit CSS, these can be thought of as reusable style **traits**, that can be applied on or within components. + pre: code + = '

+ An AM grid system, inspired by Flexbox Grid. [View source](https://github.com/benschwarz/am-grid/blob/master/src/grid.css). + - **[amcss.github.io](https://github.com/amcss/amcss.github.io/tree/development)**
+ A simple example of components in AM, broken up into [four simple modules](https://github.com/amcss/amcss.github.io/tree/development/src/styles/modules). + + section(am-Example) + h2 Call for feedback + :markdown + We'd love to hear suggestions for inclusions to the AM specification, by adding [an issue to our tracker](https://github.com/amcss/attribute-module-specification/issues) or contributing to an existing discussion. If you create an AM-style CSS library or framework, please [let us know](https://github.com/amcss/attribute-module-specification/issues/5). + +footer(am-Contributors) + h3 Developed by + ol + li + a(href='https://twitter.com/glenmaddern' target='_blank') + img(src='/images/glen.jpg') + | Glen Maddern + li + a(href='https://twitter.com/benschwarz' target='_blank') + img(src='/images/ben.jpg') + | Ben Schwarz + h3 With thanks to + ul + li Ben Smithett + li Florent Verschelde + li Robbie Manson diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss new file mode 100644 index 0000000..95c8e14 --- /dev/null +++ b/src/styles/_colors.scss @@ -0,0 +1,7 @@ +$white: hsl(60, 40%, 99%); +$black: #111; +$blue: #00436e; +$red: #f4454a; +$green: #2b782b; +$grey: #575757; +$grey--light: #a1a1a1; diff --git a/src/styles/_globals.scss b/src/styles/_globals.scss new file mode 100644 index 0000000..ba45439 --- /dev/null +++ b/src/styles/_globals.scss @@ -0,0 +1,33 @@ +:root { + @extend %sans; + font-size: 16px; + min-height: 100%; +} +@media screen and (min-width: 960px) { + :root { + font-size: 20px; + } +} + +body { + min-height: 100%; + text-rendering: optimizeLegibility; + background: $white; + color: $black; +} + +a { + transition: color 0.1s; + &, &:hover, &:visited { + color: hsl(0, 50%, 40%); + text-decoration: none; + } + &:hover { + color: hsl(0, 50%, 50%); + } + &:active { + transition: none; + color: hsl(0, 50%, 50%); + text-decoration: underline; + } +} diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss new file mode 100644 index 0000000..78288e6 --- /dev/null +++ b/src/styles/_mixins.scss @@ -0,0 +1,53 @@ +$attr: false; + +@mixin attr() { +// @if $attr { +// [#{$prefix}#{$attr}] { +// @content; +// } +// } +// @else { +// @warn "attr() needs to be called within an AM block"; +// } +} + +@mixin val($value) { +// @if $attr { +// [#{$prefix}#{$attr}~="#{$value}"] { +// @content; +// } +// +// @each $bp in $breakpoints { +// .breakpoint-#{$bp} [#{$prefix}#{$attr}~="#{$bp}:#{$value}"] { +// @extend [#{$prefix}#{$attr}~="#{$value}"]; +// } +// } +// } +// @else { +// @warn "attr() needs to be called within an AM block"; +// } +} + +@mixin AM($local-attr) { + $attr: $local-attr; + @content; + $attr: false; +} + +@mixin trait($attr, $value: "") { + @extend [#{$prefix}#{$attr}]; + $string: $value; + $continue: true; + @while $continue { + $next-space: str-index($string, ' '); + @if type-of($next-space) == number { + $next-word: str-slice($string, 1, $next-space - 1); + $string: str-slice($string, $next-space + 1); + } + @else { + $next-word: $string; + $continue: false; + } + @extend [#{$prefix}#{$attr}~="#{$next-word}"]; + } +} diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 0000000..47e7121 --- /dev/null +++ b/src/styles/_reset.scss @@ -0,0 +1,40 @@ +/* Reset based on Eric Meyer's 2.0 Reset: http://meyerweb.com/eric/tools/css/reset/ + plus box-sizing, of course */ + +html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + margin: 0; + padding: 0 +} + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { + display: block +} + +body { + line-height: 1 +} + +ol, ul { + list-style: none +} + +blockquote, q { + quotes: none +} + +blockquote:before, blockquote:after, q:before, q:after { + content: none +} + +table { + border-collapse: collapse; + border-spacing: 0 +} + +*,*::before,*::after { + box-sizing: border-box; +} diff --git a/src/styles/_type.scss b/src/styles/_type.scss new file mode 100644 index 0000000..1620adc --- /dev/null +++ b/src/styles/_type.scss @@ -0,0 +1,56 @@ + +%sans { + font-family: 'Avenir Next', 'Helvetica Neue', 'Open Sans', 'Fira Sans'; +} + +%serif { + font-family: Palatino, Georgia, "Times New Roman", Times, serif; +} + +%mono { + font-family: "Consolas", "Menlo", "Courier", monospace; +} + +%h0 { + font-size: 6rem; +} + +%h1 { + font-size: 4.5rem; +} + +%h2 { + font-size: 3.5rem; +} + +%h3 { + font-size: 2.5rem; +} + +%h4 { + font-size: 1.5rem; +} + +%h5 { + font-size: 1.2rem; +} + +%small0 { + font-size: 1.0rem; +} + +%small1 { + font-size: 0.9rem; +} + +%small2 { + font-size: 0.8rem; +} + +%small3 { + font-size: 0.7rem; +} + +%small4 { + font-size: 0.6rem; +} diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000..7f16edb --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,15 @@ +/* Reset */ +@import "reset"; + +/* Variables */ +@import 'colors'; +@import 'type'; + +/* Modules */ +@import 'modules/HomepageHero'; +@import 'modules/Example'; +@import 'modules/Code'; +@import 'modules/Contributors'; + +/* Set global styles */ +@import 'globals'; diff --git a/src/styles/modules/_Code.scss b/src/styles/modules/_Code.scss new file mode 100644 index 0000000..df95ef9 --- /dev/null +++ b/src/styles/modules/_Code.scss @@ -0,0 +1,18 @@ +[am-Code] { + padding: 2px; + border-radius: 2px; +} + +[am-Code~="removed"] { + color: rgba($red, 0.4); + background: rgba($red, 0.2); +} + +[am-Code~="added"] { + color: rgba($green, 0.8); + background: rgba($green, 0.2); +} + +[am-Code~="comment"] { + color: $grey--light; +} diff --git a/src/styles/modules/_Contributors.scss b/src/styles/modules/_Contributors.scss new file mode 100644 index 0000000..b251acb --- /dev/null +++ b/src/styles/modules/_Contributors.scss @@ -0,0 +1,39 @@ +[am-Contributors] { + @extend %small1; + padding: 1rem; + text-align: center; + line-height: 1.6; + &::before { + content: ''; + color: inherit; + display: block; + width: 50%; + margin: 1rem auto; + border-top: 1px solid; + opacity: 0.2; + } + + > h3 { + @extend %small2; + text-transform: uppercase; + padding-top: 0.5rem; + color: $grey; + } + > ol { + padding-bottom: 0.5rem; + display: flex; + justify-content: center; + + img { + margin: 1rem 2rem; + display: block; + height: 80px; + width: 80px; + border-radius: 50%; + box-shadow: 0 0 0 1px #eee, 0 0 0 7px white, 0 0 0 8px #ddd; + } + } + > ul { + padding-bottom: 1rem; + } +} diff --git a/src/styles/modules/_Example.scss b/src/styles/modules/_Example.scss new file mode 100644 index 0000000..46a74d5 --- /dev/null +++ b/src/styles/modules/_Example.scss @@ -0,0 +1,58 @@ +[am-Example] { + max-width: 720px; + padding: 1rem; + margin: 2rem auto 0; + + h2, h3 { + @extend %h4; + margin-bottom: 2rem; + } + h2, strong { + font-weight: 700; + } + + p { + @extend %h6; + margin: 1rem 0; + line-height: 1.4; + } + em { + font-style: italic; + } + strong { + font-weight: 600; + } + pre { + margin: 1rem 0 2rem; + code { + @extend %small3; + line-height: 1.8; + padding: 0.5rem; + margin: 0; + box-shadow: none; + color: $grey; + display: block; + max-width: 100%; + overflow: auto; + } + } + code { + @extend %mono; + @extend %small3; + line-height: 1.2; + white-space: pre; + box-shadow: 0 0 0 1px #ddd; + padding: 0.2rem; + margin: 0.2rem; + } + ul { + margin-bottom: 1rem; + line-height: 1.4; + li { + margin-bottom: 1rem; + } + strong { + @extend %h5; + } + } +} diff --git a/src/styles/modules/_HomepageHero.scss b/src/styles/modules/_HomepageHero.scss new file mode 100644 index 0000000..0858352 --- /dev/null +++ b/src/styles/modules/_HomepageHero.scss @@ -0,0 +1,61 @@ +[am-HomepageHero] { + position: relative; + padding: 4rem 1rem; + margin-bottom: 2rem; + text-align: center; + text-shadow: 0 1px 0 rgba(black, 0.2); + overflow: hidden; + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 120%; + z-index: -1; + transform-origin: 0 100%; + transform: rotate(-2deg) translateZ(0); + background: linear-gradient(90deg, #965ddc 0%, lighten(#965ddc, 10%) 100%); + @for $i from 16 to 54 { + $purps: hsl(3 * $i + 90, 57%, 60%); + @media screen and (min-width: $i * 20px) and (max-width: $i * 20px + 19px) { + background: linear-gradient(90deg, $purps 0%, lighten($purps, 10%) 100%); + } + } + } + color: $white; + font-weight: 300; + + h1 { + @extend %h1; + &::before { + @extend %h0; + content: '['; + } + &::after { + @extend %h0; + content: ']'; + } + } + h2 { + transform: rotate(-2deg); + @extend %h3; + padding-top: 3rem; + font-style: italic; + > span { + font-weight: 400; + } + } + + @media screen and (max-width: 600px) { + h1 { + @extend %h2; + &::before, &::after { + @extend %h1; + } + } + h2 { + @extend %h4; + } + } +}