Initial commit

parents
Showing with 2590 additions and 0 deletions
{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf350
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\margl1440\margr1440\vieww9000\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural
\f0\fs24 \cf0 No work files for this lesson...}
\ No newline at end of file
{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf350
{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
\margl1440\margr1440\vieww9000\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\ql\qnatural\pardirnatural
\f0\fs24 \cf0 No work files for this lesson...}
\ No newline at end of file
# An Introduction to Modern Front-End Development
This contains the MarsBQ example site we're developing as part of this course. The example file is at the **beginning** state of the chapter. To see the completed version of the chapter, take a look at the next chapter's file. If you're following along with the full course, you may only need to access certain files from this directory and include them in your project.
Are you stuck? Have questions? Contact me!
@adamdscott
adam@learnfrontend.io
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>marsbq</title>
<link rel="stylesheet" href="src/styles/main.css">
</head>
<body>
<!-- PLACE ALL OF YOUR PAGE CONTENT BELOW HERE -->
<h1>marsbq</h1>
<!-- AND ABOVE HERE -->
<script src="src/scripts/main.js"></script>
</body>
</html>
/* =======================================
main.css
use this file for your custom styles
========================================== */
/* set the default color, font-size, and line height */
html {
color: #333;
font-size: 1em;
line-height: 1.4;
}
/* make images and embedded media fluid */
img,
object {
max-width: 100%;
}
/* =======================================
author styles
place your custom styles below here
========================================== */
/* =======================================
helper classes
from HTML5 Boilerplate
https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
========================================== */
/*
* Hide visually and from screen readers:
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
# An Introduction to Modern Front-End Development
This contains the MarsBQ example site we're developing as part of this course. The example file is at the **beginning** state of the chapter. To see the completed version of the chapter, take a look at the next chapter's file. If you're following along with the full course, you may only need to access certain files from this directory and include them in your project.
If you'd like to use these files, `cd` into the directory and type:
```
npm install
```
Are you stuck? Have questions? Contact me!
@adamdscott
adam@learnfrontend.io
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>marsbq</title>
<link rel="stylesheet" href="src/styles/main.css">
</head>
<body>
<!-- PLACE ALL OF YOUR PAGE CONTENT BELOW HERE -->
<h1>marsbq</h1>
<!-- AND ABOVE HERE -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="src/scripts/main.js"></script>
</body>
</html>
{
"name": "marsbq",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^2.1.4"
}
}
/* =======================================
main.css
use this file for your custom styles
========================================== */
/* set the default color, font-size, and line height */
html {
color: #333;
font-size: 1em;
line-height: 1.4;
}
/* make images and embedded media fluid */
img,
object {
max-width: 100%;
}
/* =======================================
author styles
place your custom styles below here
========================================== */
/* =======================================
helper classes
from HTML5 Boilerplate
https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
========================================== */
/*
* Hide visually and from screen readers:
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
# An Introduction to Modern Front-End Development
This contains the MarsBQ example site we're developing as part of this course. The example file is at the **beginning** state of the chapter. To see the completed version of the chapter, take a look at the next chapter's file. If you're following along with the full course, you may only need to access certain files from this directory and include them in your project.
If you'd like to use these files, `cd` into the directory and type:
```
npm install
gulp
```
Are you stuck? Have questions? Contact me!
@adamdscott
adam@learnfrontend.io
var gulp = require('gulp');
gulp.task('default', function(){
console.log('Your first task has run!');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>marsbq</title>
<link rel="stylesheet" href="src/styles/main.css">
</head>
<body>
<!-- PLACE ALL OF YOUR PAGE CONTENT BELOW HERE -->
<h1>marsbq</h1>
<!-- AND ABOVE HERE -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="src/scripts/main.js"></script>
</body>
</html>
{
"name": "marsbq",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^2.1.4"
},
"devDependencies": {
"gulp": "^3.9.0"
}
}
/* =======================================
main.css
use this file for your custom styles
========================================== */
/* set the default color, font-size, and line height */
html {
color: #333;
font-size: 1em;
line-height: 1.4;
}
/* make images and embedded media fluid */
img,
object {
max-width: 100%;
}
/* =======================================
author styles
place your custom styles below here
========================================== */
/* =======================================
helper classes
from HTML5 Boilerplate
https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
========================================== */
/*
* Hide visually and from screen readers:
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
# An Introduction to Modern Front-End Development
This contains the MarsBQ example site we're developing as part of this course. The example file is at the **beginning** state of the chapter. To see the completed version of the chapter, take a look at the next chapter's file. If you're following along with the full course, you may only need to access certain files from this directory and include them in your project.
If you'd like to use these files, `cd` into the directory and type:
```
npm install
gulp
```
Are you stuck? Have questions? Contact me!
@adamdscott
adam@learnfrontend.io
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var minifyCss = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var imageMin = require('gulp-imagemin');
gulp.task('images', function() {
gulp.src(['src/img/**/*'])
.pipe(imageMin())
.pipe(gulp.dest('dist/img'))
.pipe(browserSync.stream());
});
gulp.task('scripts', function(){
gulp.src(['src/scripts/main.js'])
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/scripts'))
.pipe(browserSync.stream());
});
gulp.task('styles', function(){
gulp.src(['src/styles/**/*.css'])
.pipe(sourcemaps.init())
.pipe(minifyCss())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/styles'))
.pipe(browserSync.stream());
});
gulp.task('default', function(){
browserSync.init({
server: './'
});
//gulp.watch('src/**/*', browserSync.reload);
gulp.watch('src/styles/**/*.css', ['styles']);
gulp.watch('src/img/**/*', ['images']);
gulp.watch('src/scripts/**/*.js', ['scripts']);
gulp.watch('*.html', browserSync.reload);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>marsbq</title>
<link rel="stylesheet" href="dist/styles/main.css">
</head>
<body>
<!-- PLACE ALL OF YOUR PAGE CONTENT BELOW HERE -->
<h1>marsbq</h1>
<!-- AND ABOVE HERE -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="dist/scripts/main.js"></script>
</body>
</html>
{
"name": "marsbq",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^2.1.4"
},
"devDependencies": {
"browser-sync": "^2.7.13",
"gulp": "^3.9.0",
"gulp-imagemin": "^2.3.0",
"gulp-minify-css": "^1.2.0",
"gulp-sourcemaps": "^1.5.2",
"gulp-uglify": "^1.2.0"
}
}
/* =======================================
main.css
use this file for your custom styles
========================================== */
/* set the default color, font-size, and line height */
html {
color: #333;
font-size: 1em;
line-height: 1.4;
}
/* make images and embedded media fluid */
img,
object {
max-width: 100%;
}
/* =======================================
author styles
place your custom styles below here
========================================== */
/* =======================================
helper classes
from HTML5 Boilerplate
https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css
========================================== */
/*
* Hide visually and from screen readers:
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.