First commit

mikewgd · Feb 16, 2018 · bc6898b · bc6898b
commit bc6898b
Show file tree

Hide file tree

Showing 25 changed files with 8,332 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,15 @@
+{
+	"presets": [
+		[
+			"env",
+			{
+				"targets": {
+					"browsers": [
+						"last 2 versions",
+						"safari >= 7"
+					]
+				}
+			}
+		]
+	]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1 @@
+parser: "babel-eslint"
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
diff --git a/README.md b/README.md
@@ -0,0 +1,59 @@
+# Site with Webpack Boilerplate
+
+### Golden rule: Keep It Simple and Straightforward (KISS)
+
+Keep it simple and straightforward but good enough so it can become a large site or application.
+
+### Install dependencies
+
+- Run `npm install`
+
+### Development
+
+- Run `npm run dev`
+- In your browser, navigate to: [http://localhost:8080/](http://localhost:8080/)
+
+### Resources
+
+- [Generate your icons](https://www.favicon-generator.org/)
+- [SVG optimizer](https://jakearchibald.github.io/svgomg/)
+
+### Publish
+
+1. In `webpack.config.js` file, replace `www.example.com` with the real domain name.
+
+2. Run `npm run build`
+
+3. Copy the following folders/files to web server
+
+	- /dist
+	- /images
+	- index.html
+
+## Discussions
+
+### Rendering high resolution images
+This repo uses retina.js to serve high-resolutions images to devices with retina display. It renders two images per image, one x1 and another x2, it means that the work is left for the browser. This method is not recomended for big sites.  Instead try to serve the right image from the server.
+
+A good article about this is here:
+
+[Retina & Hi-Resolution Displays: The ultimate guide to preparing your websit](https://mercury.one/wordpress/retina-hi-resolution-displays-the-ultimate-guide-to-preparing-your-website/)
+
+### Responsive site and media queries usage
+
+[The Difference Between Responsive and Adaptive Design](https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/)
+
+This repo uses media queries within the sass file. The sass way!
+
+## How-to / Guidelines
+- Webpack documentation: https://webpack.js.org/concepts/
+- CSS guidelines: https://cssguidelin.es/#commenting
+- SASS guidelines: https://sass-guidelin.es/
+- Media queries: https://include-media.com/#documentation
+- JavaScript guidelines (Google): https://google.github.io/styleguide/jsguide.html
+
+# ToDo
+
+Lots to do. But at least it is a start.
+- http://sassdoc.com/
+- templating index so each section is in its file
diff --git a/images/.gitkeep b/images/.gitkeep
diff --git a/index.html b/index.html
@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="en-GB">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <meta name="author" content="">
+    <link rel="stylesheet" type="text/css" href="dist/style.css" />
+    <title>Title</title>
+    <!-- Add icons here -->
+</head>
+
+<body class="root">
+    <!--[if lte IE 9]>
+          <p class="browserupgrade">
+              Hi there! It looks like you are using an outdated version of your browser! I recommend you <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience and security!
+          </p>
+      <![endif]-->
+
+    <!-- Header -->
+    <header class="header site-header">
+        <a class="site-logo" href="/">
+            <img class="logo" src="">
+        </a>
+        <!-- Add menu -->
+    </header>
+
+    <div class="main">
+
+        <!-- Section -->
+        <div id="" class="section section-banner">
+            <div class="container">
+                <div class="box">
+                    <div class="item">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, deserunt minus. Soluta quibusdam dignissimos itaque
+                        iusto, corporis quam doloribus odio sunt recusandae, maxime nulla unde ex laborum consectetur quo
+                        nostrum.
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Section -->
+        <div id="" class="section section-about-us">
+            <div class="container">
+                <div class="box">
+                    <div class="item">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, deserunt minus. Soluta quibusdam dignissimos itaque
+                        iusto, corporis quam doloribus odio sunt recusandae, maxime nulla unde ex laborum consectetur quo
+                        nostrum.
+                    </div>
+                    <div class="item">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit, deserunt minus. Soluta quibusdam dignissimos itaque
+                        iusto, corporis quam doloribus odio sunt recusandae, maxime nulla unde ex laborum consectetur quo
+                        nostrum.
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <!-- FOOTER -->
+    <footer class="section footer">
+        <div class="container">
+            <div class="box">
+                <div class="item">
+                    <a class="btn">
+                        <span>Button</span>
+                    </a>
+                </div>
+                <div class="item">
+                    <address>
+                        Address 1
+                        <br> Address 2
+                        <br> City, Postcode
+                        <br> Country
+                    </address>
+                </div>
+                <div class="item">
+                    <a href="tel:+4402000000000">000 0000 0000</a>
+                    <br>
+                    <a href="">[email protected]</a>
+                </div>
+            </div>
+            <hr class="hr">
+            <div class="box copyright">
+                <div class="item copyright-info">
+                    <ul class="list-copyright">
+                        <li>Link</li>
+                        <li>Link</li>
+                        <li>Link</li>
+                    </ul>
+                </div>
+                <div class="item">
+                    by Fransy (fransy.io)
+                </div>
+            </div>
+        </div>
+    </footer>
+    </div>
+    <script src="dist/bundle.js"></script>
+</body>
+
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,4 @@
+import '../styles/app.scss';
+import 'retinajs';
+
+console.info('Hola!');
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Auto detect text files and perform LF normalization
		* text=auto