Normalise, cleaned, and refactor CSS/HTML/View

	- removed useless component (SuitCSS)
	- normalise each CSS Component
	- normalise ClassName (e.g: IssueList -> ListIssue ...)
        - Split View in multiple file
        - Removed #id

config/secrets.py

@@ -0,0 +1,59 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+'''This file contains secrets and sensitive file-system locations and
+settings that we don't want to be public.'''
+
+from environment import *
+
+# Secret key for signing cookies. Can be ignored for local testing.
+SECRET_KEY = 'meow'
+
+# Image uploading settings. PRODUCTION and STAGING can be ignored for
+# local testing.
+if PRODUCTION:
+    UPLOADS_DEFAULT_DEST = ''
+    UPLOADS_DEFAULT_URL = ''
+elif STAGING:
+    UPLOADS_DEFAULT_DEST = ''
+    UPLOADS_DEFAULT_URL = ''
+elif LOCALHOST:
+    UPLOADS_DEFAULT_DEST = BASE_DIR + '/uploads/'
+    UPLOADS_DEFAULT_URL = 'http://localhost:5000/uploads/'
+
+# Production GiHub Issues repo URI. Can be ignored for local testing.
+if PRODUCTION:
+    ISSUES_REPO_URI = ''
+# Staging and Local instances use the same test repo
+else:
+    ISSUES_REPO_URI = os.environ.get('ISSUES_REPO_URI') or 'webcompat/webcompat-tests/issues'
+
+# Get the secrets from [1] if you're part of the webcompat organization.
+# Otherwise, create your own test and production applications.
+#
+# [1]<https://github.com/organizations/webcompat/settings/applications/>
+# PRODUCTION and STAGING can be ignored for local testing.
+# Production = webcompat.com
+if PRODUCTION:
+    GITHUB_CLIENT_ID = ''
+    GITHUB_CLIENT_SECRET = ''
+    GITHUB_CALLBACK_URL = ''
+# Staging = staging.webcompat.com
+elif STAGING:
+    GITHUB_CLIENT_ID = ''
+    GITHUB_CLIENT_SECRET = ''
+    GITHUB_CALLBACK_URL = ''
+else:
+    # We're running on localhost, use the test application
+    GITHUB_CLIENT_ID = os.environ.get('FAKE_ID') or 'e80a666fbf1fa9ea18db'
+    GITHUB_CLIENT_SECRET = os.environ.get('FAKE_SECRET') or '688c4546f09624f8c44773b22268064dfca19a59'
+    GITHUB_CALLBACK_URL = 'http://localhost:5000/callback'
+
+# This is the oauth token we use to report issues on behalf of people
+# who don't want to give GitHub oauth access (or don't have GitHub accounts).
+# If you don't want to create another user for testing, you could put in
+# your own access token. See help.github.com/articles/creating-an-access-token-for-command-line-use  # nopep8
+OAUTH_TOKEN = os.environ.get('OAUTH_TOKEN') or '4182d4f43118f682a55ed214abd58265e1efc397'  # nopep8

grunt-tasks/cssnext.js

@@ -8,7 +8,8 @@ module.exports = function(grunt) {
       sourcemap: true,
       url : false,
       browsers: ['ff >= 4', 'ie >= 8', 'safari >= 5.1', 'opera >= 12', 'chrome >=10'],
-      import: { path: ['node_modules'] }
+      import: { path: ['node_modules'] },
+      messages: {browser: false, console: true}
     },
     dist: {
       files: {

package.json

@@ -14,6 +14,7 @@
   },
   "devDependencies": {
     "cssrecipes-custom-media-queries": "0.3.0",
+    "cssrecipes-defaults": "^0.5.0",
     "cssrecipes-grid": "^0.4.0",
     "cssrecipes-reset": "^0.5.0",
     "cssrecipes-utils": "^0.5.0",

webcompat/static/css/development/components/UI.css

@@ -0,0 +1,79 @@
+/** @define UI */
+
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+/*viewport */
+@viewport {
+  width: device-width;
+}
+
+body {
+  font-family: var(--base-fontFamily);
+  font-size: 1em;
+  font-weight: 300;
+  color: var(--base-variantColorDark);
+}
+
+/* min max class */
+.wc-UIViewport {
+  min-width: var(--base-minWidth);
+  max-width: var(--base-maxWidth);
+  margin:0 auto;
+}
+
+/* Content */
+.wc-UIContent {
+  position:relative;
+  width:var(--base-widthContent);
+  margin: 0 auto;
+}
+
+  /* state */
+  .wc-UIContent.is-hidden {
+    display: none;
+  }
+
+  @media (--viewport-1180px) {
+    .wc-UIContent {
+      width:auto;
+      padding-left: 1em;
+      padding-right: 1em;
+    }
+  }
+
+/* Section */
+.wc-UISection {
+  padding-top: 3em;
+  padding-bottom: 3em;
+}
+
+  @media (--wc-max450px) {
+    .wc-UISection {
+      padding: 2em;
+    }
+  }
+
+  /* modifier */
+  .wc-UISection--backgroundColor {
+    background-color: #f0f0f0;
+  }
+
+/*----------Global H Styles----------*/
+
+p {
+  font-size: 1em;
+}
+
+/*----------Link Styles----------*/
+
+.no-underline,.no-underline:hover,.no-underline:focus {
+  text-decoration: none;
+}
+
+/*--------tools------------*/
+.u-image {
+  max-width:100%;
+}

webcompat/static/css/development/components/dropdown.css

@@ -1,55 +1,77 @@
-/* Dropdown */
+/** @define Dropdown */
+
+:root {
+  --Dropdown-fontSize: var(--base-fontSize);
+  --Dropdown-linkHover: var(--base-colorDark);
+}
+
 .wc-Dropdown {
-  position:relative;
-  font-size:var(--base-font-size);
+  font-size: var(--Dropdown-fontSize);
+  position: relative;
   display: inline-block;
 }
-.wc-Dropdown--large {
-  font-size:2em;
-}
-@media (--viewport-450px) {
+
+  /* modifier*/
   .wc-Dropdown--large {
-    font-size:1.4em;
-  }
-}
-.wc-Dropdown-toggle {
-  vertical-align:middle;
-  background-image:none;
-  background-color:transparent;
-  border:none;
-  color:#404040;
-  font-family:var(--base-font);
-  font-size:1em;
-  padding:0.7em 0;
-  cursor:pointer;
-  border:solid 2px transparent;
-  font-weight:700;
-}
-  .wc-Dropdown-label {
-    display:inline-block;
-    pointer-events: none;
-    vertical-align:middle;
-  }
-  .wc-Dropdown-content {
-    position:absolute;
-    min-width:100%;
-    display: none;
-    padding:0 1em 1em 1em;
-    background-color:rgba(255,255,255,.8);
-    z-index:2;
-    list-style:none;
-  }
-  .wc-Dropdown.is-active .wc-Dropdown-toggle {
-    border:solid 2px rgba(255,255,255,.8);
+    font-size: 2rem;
   }
-  .wc-Dropdown.is-active .wc-Dropdown-content {
-    display: block;
+
+  @media (--viewport-450px) {
+    .wc-Dropdown--large {
+      font-size:1.4em;
+    }
   }
-  .wc-Dropdown-item {
-    cursor: pointer;
-    margin:1em 0 0 !important;
-    white-space:nowrap;
-  }
-  .wc-Dropdown-link {
+
+  .wc-Dropdown-toggle {
+    font-size:1em;
     font-weight:700;
+    vertical-align:middle;
+    background-color:transparent;
+    border:none;
+    color:#404040;
+    padding:0.7em 0;
+    cursor:pointer;
+    border:solid 2px transparent;
   }
+
+    .wc-Dropdown-label {
+      display: inline-block;
+      font-size: 1em;
+      margin: 0;
+      pointer-events: none;
+      vertical-align:middle;
+    }
+
+    .wc-Dropdown-content {
+      position:absolute;
+      min-width:100%;
+      display: none;
+      padding:0 1em 1em 1em;
+      background-color:rgba(255,255,255,.8);
+      z-index:2;
+      list-style:none;
+    }
+
+    .wc-Dropdown.is-active .wc-Dropdown-toggle {
+      border:solid 2px rgba(255,255,255,.8);
+    }
+
+    .wc-Dropdown.is-active .wc-Dropdown-content {
+      display: block;
+    }
+
+    .wc-Dropdown-item {
+      cursor: pointer;
+      margin:1em 0 0 !important;
+      white-space:nowrap;
+    }
+
+    .wc-Dropdown-link {
+      font-weight:700;
+      color: inherit;
+    }
+
+      .wc-Dropdown-link:hover,
+      .wc-Dropdown-link:focus {
+        color: var(--Dropdown-linkHover);
+      }