diff --git a/assets/sass/README.txt b/assets/sass/README.txt deleted file mode 100644 index e1e736e..0000000 --- a/assets/sass/README.txt +++ /dev/null @@ -1,88 +0,0 @@ -ZEN'S STYLESHEETS ------------------ - -Don't panic! - -There are a lot of files in this Sass folder. A lot. 56, actually. - -I swear to you I'm going to give you a good reason not to panic. Just give me -a minute. (ヘ・_・)ヘ┳━┳ - -Okay, how about just panicking slightly while I collect my thoughts. -(╯°□°)╯︵ ┻━┻ - -Okay. Okay. There _are_ 56 Sass files in this sub-theme, but it's not as bad as -it first seems. - -Why not just one stylesheet? - -- For performance reasons you should always have all of your CSS in a single - file to minimize the number of HTTP requests the user's browser needs to do. - Fortunately, Drupal has a "Aggregate and compress CSS" feature that will - automatically combine all the CSS files from its modules and themes into one - file. You can turn on that feature under "Bandwidth Optimization" on the page: - Administration > Configuration > Development > Performance - So Drupal allows us (if we want) to use more than one stylesheet file, but - still serves all the styles in one file to our users. - -- When developing a site using a single stylesheet, it can become unwieldy to - scroll and find the place you need to edit. As a deadline becomes imminent, - developers often start stuffing new styles at the bottom of the stylesheet, - completely destroying any stylesheet organization. - -- Instead of one monolithic stylesheet, Zen sub-themes' CSS files are organized - into many small stylesheets. Once you learn the organization (described - below) it becomes easier to find the right place to add new styles. - -- All the Sass files are imported into the styles.scss so all the CSS is output - to the styles.css file. - -ORGANIZATION OF STYLESHEETS ---------------------------- - -All of the styles in this sub-theme are built using component-based designs. To -learn more about component-based design, watch the Drupalcon presentation, -"Style Guide Driven Development: All hail the robot overlords!" -https://events.drupal.org/losangeles2015/sessions/style-guide-driven-development-all-hail-robot-overlords - -The Sass files are organized in a simple file hierarchy, and, best of all are -documented in a style guide which is super easy to keep up-to-date. Open the -style guide to learn more about the styles and Sass used in this sub-theme. - -Open the styleguide/index.html file in a web browser. - - -ABOUT SASS ----------- - -This directory includes Sass versions of Zen's CSS files. - -Sass is a language that is just normal CSS plus some extra features, like -variables, nested rules, math, mixins, etc. If your stylesheets are written in -Sass, helper applications can convert them to standard CSS so that you can -include the CSS in the normal ways with your theme. - -To learn more about Sass, visit: http://sass-lang.com - -Since Sass is just a language, we also need an executable that can easily -convert Sass files into CSS. We use node-sass to convert our files to CSS. And -we use Gulp.js to run node-sass and many other useful front-end tasks. - - -DEVELOPING WITH SASS --------------------- - -To automatically generate the CSS versions of the scss while you are doing theme -development, you'll need to tell Gulp to "watch" the sass directory so that -any time a .scss file is changed it will automatically generate a CSS file in -your sub-theme's css directory: - - gulp watch - - -MOVING YOUR CSS TO PRODUCTION ------------------------------ - -Simple! Generate your CSS with: gulp - -And don't forget to turn on Drupal's CSS aggregation. :-)