reorganise src directory into inverted code triangle

themes/starter/gulpfile.js

@@ -12,26 +12,23 @@ const uglify = require('gulp-uglify');
 // Define paths. The order is important.
 const paths = {
  css: [
- './src/assets/css/settings/variables.css',
  './node_modules/normalize-css/normalize.css',
- './src/assets/css/settings/base.css',
- './src/assets/css/settings/typography.css',
- './src/assets/css/settings/responsive.css',
- './src/modules/objects/**/*.css',
- './src/modules/components/**/**/*.css',
- './src/modules/utilities/**/**/*.css',
- './src/assets/css/shame.css'
+ './src/01-variables.css',
+ './src/02-base/css/*.css',
+ './src/03-objects/**/**/*.css',
+ './src/04-components/**/**/*.css',
+ './src/05-utilities/**/**/*.css',
+ './src/06-shame.css'
  ],
  js: [
- './src/assets/js/*.js',
- './src/modules/**/**/*.js',
- './src/modules/**/**/**/*.js'
+ './src/02-base/js/*.js',
+ './src/03-objects/**/**/*.js',
+ './src/04-components/**/**/*.js',
+ './src/05-utilities/**/**/*.js',
  ],
  img: [
- './src/modules/**/**/*.+(png|jpg|svg|ico)',
- './src/modules/**/**/**/*.+(png|jpg|svg|ico)',
- './src/assets/img/**/*.+(png|jpg|svg|ico)',
- './src/assets/img/*.+(png|jpg|svg|ico)'
+ './src/**/**/*.+(png|jpg|svg|ico)',
+ './src/**/**/**/*.+(png|jpg|svg|ico)'
  ]
 };
 

themes/starter/src/assets/css/settings/base.css → themes/starter/src/02-base/css/01-base.css

@@ -1,16 +1,15 @@
 /* ==========================================================================
- Base CSS
+ Base & type CSS
  ========================================================================== */
 
 /**
  * Derived from suit-base CSS
  * https://github.com/suitcss/base
+ * Type CSS at end
  */
 
 /* Apply a natural box layout model to all elements */
-*,
-*:before,
-*:after {
+*, *:before, *:after {
  box-sizing: border-box;
 }
 
@@ -29,9 +28,7 @@ a {
  text-decoration: underline;
 }
 
-a:hover,
-a:focus,
-a:active {
+a:hover, a:focus, a:active {
  color: var(--indigo);
  text-decoration: underline;
 }
@@ -53,18 +50,7 @@ img {
  * Removes the default spacing and border for appropriate elements.
  */
 
-body,
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-pre {
+body, blockquote, dl, dd, h1, h2, h3, h4, h5, h6, p, pre {
  margin: 0;
 }
 
@@ -79,8 +65,7 @@ iframe {
 }
 
 /* Nicely margined lists */
-ol,
-ul {
+ol, ul {
  margin: 0.5em 0 1em 1.5em;
  padding: 0;
 }
@@ -101,13 +86,10 @@ table {
 }
 
 /**
- * Responsive. Images.
+ * Responsive images.
  */
 
-img,
-embed,
-object,
-video {
+img, embed, object, video {
  display: block;
  height: auto;
  max-width: 100%;

themes/starter/src/assets/css/settings/typography.css → themes/starter/src/02-base/css/02-type.css

@@ -1,13 +1,9 @@
 /* ==========================================================================
- Typography CSS
+ Type CSS
  ========================================================================== */
 
 /* Headings */
-h1,
-h2,
-h3,
-h4,
-h5 {
+h1, h2, h3, h4, h5 {
  color: var(--gray);
  font-weight: 500;
 }
@@ -46,8 +42,7 @@ blockquote {
 }
 
 /* Code */
-code,
-pre {
+code, pre {
  font-family: 'Menlo', 'Andale Mono', 'Monaco', 'Consolas', 'Lucida Console',
  monospace;
 }