Remove obsolete sass README.
This commit is contained in:
parent
d3761ce353
commit
6ef1e420e3
1 changed files with 0 additions and 88 deletions
|
|
@ -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. :-)
|
|
||||||
Loading…
Reference in a new issue