├── .gitignore
├── .htaccess
├── .sass-lint.yml
├── .travis.yml
├── LICENSE.md
├── README.md
├── gulpfile.js
├── package.json
├── sache.json
└── src
├── browserconfig.xml
├── crossdomain.xml
├── humans.txt
├── icons
├── apple-touch-icon-114x114-precomposed.png
├── apple-touch-icon-57x57-precomposed.png
├── apple-touch-icon-72x72-precomposed.png
├── apple-touch-icon-precomposed.png
├── apple-touch-icon.png
├── favicon.ico
└── favicon.png
├── index.html
├── js
└── .gitkeep
├── robots.txt
└── scss
├── _shame.scss
├── atoms
└── _index.scss
├── base
├── _base.scss
└── _index.scss
├── layout
└── _index.scss
├── libs
├── _index.scss
├── _normalize.scss
└── _pesticide.scss
├── molecules
└── _index.scss
├── organisms
└── _index.scss
├── overrides
└── _index.scss
├── states
├── _index.scss
└── _print.scss
├── styles.scss
├── themes
└── rebeccapurple.scss
└── utilities
├── _colors.scss
├── _config.scss
├── _fonts.scss
├── _functions.scss
├── _index.scss
├── _mixins.scss
└── _typography.scss
/.gitignore:
--------------------------------------------------------------------------------
1 | # Include your project-specific ignores in this file
2 | # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
3 |
4 | node_modules/
5 | dist/
6 |
--------------------------------------------------------------------------------
/.htaccess:
--------------------------------------------------------------------------------
1 | # Apache Server Configs v2.14.0 | MIT License
2 | # https://github.com/h5bp/server-configs-apache
3 |
4 | # (!) Using `.htaccess` files slows down Apache, therefore, if you have
5 | # access to the main server configuration file (which is usually called
6 | # `httpd.conf`), you should add this logic there.
7 | #
8 | # https://httpd.apache.org/docs/current/howto/htaccess.html.
9 |
10 | # ######################################################################
11 | # # CROSS-ORIGIN #
12 | # ######################################################################
13 |
14 | # ----------------------------------------------------------------------
15 | # | Cross-origin requests |
16 | # ----------------------------------------------------------------------
17 |
18 | # Allow cross-origin requests.
19 | #
20 | # https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
21 | # http://enable-cors.org/
22 | # http://www.w3.org/TR/cors/
23 |
24 | #
25 | # Header set Access-Control-Allow-Origin "*"
26 | #
27 |
28 | # ----------------------------------------------------------------------
29 | # | Cross-origin images |
30 | # ----------------------------------------------------------------------
31 |
32 | # Send the CORS header for images when browsers request it.
33 | #
34 | # https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
35 | # https://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
36 |
37 |
38 |
39 |
40 | SetEnvIf Origin ":" IS_CORS
41 | Header set Access-Control-Allow-Origin "*" env=IS_CORS
42 |
43 |
44 |
45 |
46 | # ----------------------------------------------------------------------
47 | # | Cross-origin web fonts |
48 | # ----------------------------------------------------------------------
49 |
50 | # Allow cross-origin access to web fonts.
51 |
52 |
53 |
54 | Header set Access-Control-Allow-Origin "*"
55 |
56 |
57 |
58 | # ----------------------------------------------------------------------
59 | # | Cross-origin resource timing |
60 | # ----------------------------------------------------------------------
61 |
62 | # Allow cross-origin access to the timing information for all resources.
63 | #
64 | # If a resource isn't served with a `Timing-Allow-Origin` header that
65 | # would allow its timing information to be shared with the document,
66 | # some of the attributes of the `PerformanceResourceTiming` object will
67 | # be set to zero.
68 | #
69 | # http://www.w3.org/TR/resource-timing/
70 | # http://www.stevesouders.com/blog/2014/08/21/resource-timing-practical-tips/
71 |
72 | #
73 | # Header set Timing-Allow-Origin: "*"
74 | #
75 |
76 |
77 | # ######################################################################
78 | # # ERRORS #
79 | # ######################################################################
80 |
81 | # ----------------------------------------------------------------------
82 | # | Custom error messages/pages |
83 | # ----------------------------------------------------------------------
84 |
85 | # Customize what Apache returns to the client in case of an error.
86 | # https://httpd.apache.org/docs/current/mod/core.html#errordocument
87 |
88 | ErrorDocument 404 /404.html
89 |
90 | # ----------------------------------------------------------------------
91 | # | Error prevention |
92 | # ----------------------------------------------------------------------
93 |
94 | # Disable the pattern matching based on filenames.
95 | #
96 | # This setting prevents Apache from returning a 404 error as the result
97 | # of a rewrite when the directory with the same name does not exist.
98 | #
99 | # https://httpd.apache.org/docs/current/content-negotiation.html#multiviews
100 |
101 | Options -MultiViews
102 |
103 |
104 | # ######################################################################
105 | # # INTERNET EXPLORER #
106 | # ######################################################################
107 |
108 | # ----------------------------------------------------------------------
109 | # | Document modes |
110 | # ----------------------------------------------------------------------
111 |
112 | # Force Internet Explorer 8/9/10 to render pages in the highest mode
113 | # available in the various cases when it may not.
114 | #
115 | # https://hsivonen.fi/doctype/#ie8
116 | #
117 | # (!) Starting with Internet Explorer 11, document modes are deprecated.
118 | # If your business still relies on older web apps and services that were
119 | # designed for older versions of Internet Explorer, you might want to
120 | # consider enabling `Enterprise Mode` throughout your company.
121 | #
122 | # https://msdn.microsoft.com/en-us/library/ie/bg182625.aspx#docmode
123 | # http://blogs.msdn.com/b/ie/archive/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11.aspx
124 |
125 |
126 |
127 | Header set X-UA-Compatible "IE=edge"
128 |
129 | # `mod_headers` cannot match based on the content-type, however,
130 | # the `X-UA-Compatible` response header should be send only for
131 | # HTML documents and not for the other resources.
132 |
133 |
134 | Header unset X-UA-Compatible
135 |
136 |
137 |
138 |
139 | # ----------------------------------------------------------------------
140 | # | Iframes cookies |
141 | # ----------------------------------------------------------------------
142 |
143 | # Allow cookies to be set from iframes in Internet Explorer.
144 | #
145 | # https://msdn.microsoft.com/en-us/library/ms537343.aspx
146 | # http://www.w3.org/TR/2000/CR-P3P-20001215/
147 |
148 | #
149 | # Header set P3P "policyref=\"/w3c/p3p.xml\", CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\""
150 | #
151 |
152 |
153 | # ######################################################################
154 | # # MEDIA TYPES AND CHARACTER ENCODINGS #
155 | # ######################################################################
156 |
157 | # ----------------------------------------------------------------------
158 | # | Media types |
159 | # ----------------------------------------------------------------------
160 |
161 | # Serve resources with the proper media types (f.k.a. MIME types).
162 | #
163 | # https://www.iana.org/assignments/media-types/media-types.xhtml
164 | # https://httpd.apache.org/docs/current/mod/mod_mime.html#addtype
165 |
166 |
167 |
168 | # Data interchange
169 |
170 | AddType application/atom+xml atom
171 | AddType application/json json map topojson
172 | AddType application/ld+json jsonld
173 | AddType application/rss+xml rss
174 | AddType application/vnd.geo+json geojson
175 | AddType application/xml rdf xml
176 |
177 |
178 | # JavaScript
179 |
180 | # Normalize to standard type.
181 | # https://tools.ietf.org/html/rfc4329#section-7.2
182 |
183 | AddType application/javascript js
184 |
185 |
186 | # Manifest files
187 |
188 | AddType application/manifest+json webmanifest
189 | AddType application/x-web-app-manifest+json webapp
190 | AddType text/cache-manifest appcache
191 |
192 |
193 | # Media files
194 |
195 | AddType audio/mp4 f4a f4b m4a
196 | AddType audio/ogg oga ogg opus
197 | AddType image/bmp bmp
198 | AddType image/svg+xml svg svgz
199 | AddType image/webp webp
200 | AddType video/mp4 f4v f4p m4v mp4
201 | AddType video/ogg ogv
202 | AddType video/webm webm
203 | AddType video/x-flv flv
204 |
205 | # Serving `.ico` image files with a different media type
206 | # prevents Internet Explorer from displaying then as images:
207 | # https://github.com/h5bp/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee
208 |
209 | AddType image/x-icon cur ico
210 |
211 |
212 | # Web fonts
213 |
214 | AddType application/font-woff woff
215 | AddType application/font-woff2 woff2
216 | AddType application/vnd.ms-fontobject eot
217 |
218 | # Browsers usually ignore the font media types and simply sniff
219 | # the bytes to figure out the font type.
220 | # https://mimesniff.spec.whatwg.org/#matching-a-font-type-pattern
221 | #
222 | # However, Blink and WebKit based browsers will show a warning
223 | # in the console if the following font types are served with any
224 | # other media types.
225 |
226 | AddType application/x-font-ttf ttc ttf
227 | AddType font/opentype otf
228 |
229 |
230 | # Other
231 |
232 | AddType application/octet-stream safariextz
233 | AddType application/x-bb-appworld bbaw
234 | AddType application/x-chrome-extension crx
235 | AddType application/x-opera-extension oex
236 | AddType application/x-xpinstall xpi
237 | AddType text/vcard vcard vcf
238 | AddType text/vnd.rim.location.xloc xloc
239 | AddType text/vtt vtt
240 | AddType text/x-component htc
241 |
242 |
243 |
244 | # ----------------------------------------------------------------------
245 | # | Character encodings |
246 | # ----------------------------------------------------------------------
247 |
248 | # Serve all resources labeled as `text/html` or `text/plain`
249 | # with the media type `charset` parameter set to `UTF-8`.
250 | #
251 | # https://httpd.apache.org/docs/current/mod/core.html#adddefaultcharset
252 |
253 | AddDefaultCharset utf-8
254 |
255 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
256 |
257 | # Serve the following file types with the media type `charset`
258 | # parameter set to `UTF-8`.
259 | #
260 | # https://httpd.apache.org/docs/current/mod/mod_mime.html#addcharset
261 |
262 |
263 | AddCharset utf-8 .atom \
264 | .bbaw \
265 | .css \
266 | .geojson \
267 | .js \
268 | .json \
269 | .jsonld \
270 | .manifest \
271 | .rdf \
272 | .rss \
273 | .topojson \
274 | .vtt \
275 | .webapp \
276 | .webmanifest \
277 | .xloc \
278 | .xml
279 |
280 |
281 |
282 | # ######################################################################
283 | # # REWRITES #
284 | # ######################################################################
285 |
286 | # ----------------------------------------------------------------------
287 | # | Rewrite engine |
288 | # ----------------------------------------------------------------------
289 |
290 | # (1) Turn on the rewrite engine (this is necessary in order for
291 | # the `RewriteRule` directives to work).
292 | #
293 | # https://httpd.apache.org/docs/current/mod/mod_rewrite.html#RewriteEngine
294 | #
295 | # (2) Enable the `FollowSymLinks` option if it isn't already.
296 | #
297 | # https://httpd.apache.org/docs/current/mod/core.html#options
298 | #
299 | # (3) If your web host doesn't allow the `FollowSymlinks` option,
300 | # you need to comment it out or remove it, and then uncomment
301 | # the `Options +SymLinksIfOwnerMatch` line (4), but be aware
302 | # of the performance impact.
303 | #
304 | # https://httpd.apache.org/docs/current/misc/perf-tuning.html#symlinks
305 | #
306 | # (4) Some cloud hosting services will require you set `RewriteBase`.
307 | #
308 | # https://www.rackspace.com/knowledge_center/frequently-asked-question/why-is-modrewrite-not-working-on-my-site
309 | # https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewritebase
310 | #
311 | # (5) Depending on how your server is set up, you may also need to
312 | # use the `RewriteOptions` directive to enable some options for
313 | # the rewrite engine.
314 | #
315 | # https://httpd.apache.org/docs/current/mod/mod_rewrite.html#rewriteoptions
316 | #
317 | # (6) Set %{ENV:PROTO} variable, to allow rewrites to redirect with the
318 | # appropriate schema automatically (http or https).
319 |
320 |
321 |
322 | # (1)
323 | RewriteEngine On
324 |
325 | # (2)
326 | Options +FollowSymlinks
327 |
328 | # (3)
329 | # Options +SymLinksIfOwnerMatch
330 |
331 | # (4)
332 | # RewriteBase /
333 |
334 | # (5)
335 | # RewriteOptions
336 |
337 | # (6)
338 | RewriteCond %{HTTPS} =on
339 | RewriteRule ^ - [env=proto:https]
340 | RewriteCond %{HTTPS} !=on
341 | RewriteRule ^ - [env=proto:http]
342 |
343 |
344 |
345 | # ----------------------------------------------------------------------
346 | # | Forcing `https://` |
347 | # ----------------------------------------------------------------------
348 |
349 | # Redirect from the `http://` to the `https://` version of the URL.
350 | # https://wiki.apache.org/httpd/RewriteHTTPToHTTPS
351 |
352 | #
353 | # RewriteEngine On
354 | # RewriteCond %{HTTPS} !=on
355 | # RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
356 | #
357 |
358 | # ----------------------------------------------------------------------
359 | # | Suppressing / Forcing the `www.` at the beginning of URLs |
360 | # ----------------------------------------------------------------------
361 |
362 | # The same content should never be available under two different
363 | # URLs, especially not with and without `www.` at the beginning.
364 | # This can cause SEO problems (duplicate content), and therefore,
365 | # you should choose one of the alternatives and redirect the other
366 | # one.
367 | #
368 | # By default `Option 1` (no `www.`) is activated.
369 | # http://no-www.org/faq.php?q=class_b
370 | #
371 | # If you would prefer to use `Option 2`, just comment out all the
372 | # lines from `Option 1` and uncomment the ones from `Option 2`.
373 | #
374 | # (!) NEVER USE BOTH RULES AT THE SAME TIME!
375 |
376 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
377 |
378 | # Option 1: rewrite www.example.com → example.com
379 |
380 |
381 | RewriteEngine On
382 | RewriteCond %{HTTPS} !=on
383 | RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
384 | RewriteRule ^ %{ENV:PROTO}://%1%{REQUEST_URI} [R=301,L]
385 |
386 |
387 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
388 |
389 | # Option 2: rewrite example.com → www.example.com
390 | #
391 | # Be aware that the following might not be a good idea if you use "real"
392 | # subdomains for certain parts of your website.
393 |
394 | #
395 | # RewriteEngine On
396 | # RewriteCond %{HTTPS} !=on
397 | # RewriteCond %{HTTP_HOST} !^www\. [NC]
398 | # RewriteCond %{SERVER_ADDR} !=127.0.0.1
399 | # RewriteCond %{SERVER_ADDR} !=::1
400 | # RewriteRule ^ %{ENV:PROTO}://www.%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
401 | #
402 |
403 |
404 | # ######################################################################
405 | # # SECURITY #
406 | # ######################################################################
407 |
408 | # ----------------------------------------------------------------------
409 | # | Clickjacking |
410 | # ----------------------------------------------------------------------
411 |
412 | # Protect website against clickjacking.
413 | #
414 | # The example below sends the `X-Frame-Options` response header with
415 | # the value `DENY`, informing browsers not to display the content of
416 | # the web page in any frame.
417 | #
418 | # This might not be the best setting for everyone. You should read
419 | # about the other two possible values the `X-Frame-Options` header
420 | # field can have: `SAMEORIGIN` and `ALLOW-FROM`.
421 | # https://tools.ietf.org/html/rfc7034#section-2.1.
422 | #
423 | # Keep in mind that while you could send the `X-Frame-Options` header
424 | # for all of your website’s pages, this has the potential downside that
425 | # it forbids even non-malicious framing of your content (e.g.: when
426 | # users visit your website using a Google Image Search results page).
427 | #
428 | # Nonetheless, you should ensure that you send the `X-Frame-Options`
429 | # header for all pages that allow a user to make a state changing
430 | # operation (e.g: pages that contain one-click purchase links, checkout
431 | # or bank-transfer confirmation pages, pages that make permanent
432 | # configuration changes, etc.).
433 | #
434 | # Sending the `X-Frame-Options` header can also protect your website
435 | # against more than just clickjacking attacks:
436 | # https://cure53.de/xfo-clickjacking.pdf.
437 | #
438 | # https://tools.ietf.org/html/rfc7034
439 | # http://blogs.msdn.com/b/ieinternals/archive/2010/03/30/combating-clickjacking-with-x-frame-options.aspx
440 | # https://www.owasp.org/index.php/Clickjacking
441 |
442 | #
443 |
444 | # Header set X-Frame-Options "DENY"
445 |
446 | # # `mod_headers` cannot match based on the content-type, however,
447 | # # the `X-Frame-Options` response header should be send only for
448 | # # HTML documents and not for the other resources.
449 |
450 | #
451 | # Header unset X-Frame-Options
452 | #
453 |
454 | #
455 |
456 | # ----------------------------------------------------------------------
457 | # | Content Security Policy (CSP) |
458 | # ----------------------------------------------------------------------
459 |
460 | # Mitigate the risk of cross-site scripting and other content-injection
461 | # attacks.
462 | #
463 | # This can be done by setting a `Content Security Policy` which
464 | # whitelists trusted sources of content for your website.
465 | #
466 | # The example header below allows ONLY scripts that are loaded from
467 | # the current website's origin (no inline scripts, no CDN, etc).
468 | # That almost certainly won't work as-is for your website!
469 | #
470 | # To make things easier, you can use an online CSP header generator
471 | # such as: http://cspisawesome.com/.
472 | #
473 | # http://content-security-policy.com/
474 | # http://www.html5rocks.com/en/tutorials/security/content-security-policy/
475 | # http://www.w3.org/TR/CSP11/).
476 |
477 | #
478 |
479 | # Header set Content-Security-Policy "script-src 'self'; object-src 'self'"
480 |
481 | # # `mod_headers` cannot match based on the content-type, however,
482 | # # the `Content-Security-Policy` response header should be send
483 | # # only for HTML documents and not for the other resources.
484 |
485 | #
486 | # Header unset Content-Security-Policy
487 | #
488 |
489 | #
490 |
491 | # ----------------------------------------------------------------------
492 | # | File access |
493 | # ----------------------------------------------------------------------
494 |
495 | # Block access to directories without a default document.
496 | #
497 | # You should leave the following uncommented, as you shouldn't allow
498 | # anyone to surf through every directory on your server (which may
499 | # includes rather private places such as the CMS's directories).
500 |
501 |
502 | Options -Indexes
503 |
504 |
505 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
506 |
507 | # Block access to all hidden files and directories with the exception of
508 | # the visible content from within the `/.well-known/` hidden directory.
509 | #
510 | # These types of files usually contain user preferences or the preserved
511 | # state of an utility, and can include rather private places like, for
512 | # example, the `.git` or `.svn` directories.
513 | #
514 | # The `/.well-known/` directory represents the standard (RFC 5785) path
515 | # prefix for "well-known locations" (e.g.: `/.well-known/manifest.json`,
516 | # `/.well-known/keybase.txt`), and therefore, access to its visible
517 | # content should not be blocked.
518 | #
519 | # https://www.mnot.net/blog/2010/04/07/well-known
520 | # https://tools.ietf.org/html/rfc5785
521 |
522 |
523 | RewriteEngine On
524 | RewriteCond %{REQUEST_URI} "!(^|/)\.well-known/([^./]+./?)+$" [NC]
525 | RewriteCond %{SCRIPT_FILENAME} -d [OR]
526 | RewriteCond %{SCRIPT_FILENAME} -f
527 | RewriteRule "(^|/)\." - [F]
528 |
529 |
530 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
531 |
532 | # Block access to files that can expose sensitive information.
533 | #
534 | # By default, block access to backup and source files that may be
535 | # left by some text editors and can pose a security risk when anyone
536 | # has access to them.
537 | #
538 | # http://feross.org/cmsploit/
539 | #
540 | # (!) Update the `` regular expression from below to
541 | # include any files that might end up on your production server and
542 | # can expose sensitive information about your website. These files may
543 | # include: configuration files, files that contain metadata about the
544 | # project (e.g.: project dependencies), build scripts, etc..
545 |
546 |
547 |
548 | # Apache < 2.3
549 |
550 | Order allow,deny
551 | Deny from all
552 | Satisfy All
553 |
554 |
555 | # Apache ≥ 2.3
556 |
557 | Require all denied
558 |
559 |
560 |
561 |
562 | # ----------------------------------------------------------------------
563 | # | HTTP Strict Transport Security (HSTS) |
564 | # ----------------------------------------------------------------------
565 |
566 | # Force client-side SSL redirection.
567 | #
568 | # If a user types `example.com` in their browser, even if the server
569 | # redirects them to the secure version of the website, that still leaves
570 | # a window of opportunity (the initial HTTP connection) for an attacker
571 | # to downgrade or redirect the request.
572 | #
573 | # The following header ensures that browser will ONLY connect to your
574 | # server via HTTPS, regardless of what the users type in the browser's
575 | # address bar.
576 | #
577 | # (!) Remove the `includeSubDomains` optional directive if the website's
578 | # subdomains are not using HTTPS.
579 | #
580 | # http://www.html5rocks.com/en/tutorials/security/transport-layer-security/
581 | # https://tools.ietf.org/html/draft-ietf-websec-strict-transport-sec-14#section-6.1
582 | # http://blogs.msdn.com/b/ieinternals/archive/2014/08/18/hsts-strict-transport-security-attacks-mitigations-deployment-https.aspx
583 |
584 | #
585 | # Header always set Strict-Transport-Security "max-age=16070400; includeSubDomains"
586 | #
587 |
588 | # ----------------------------------------------------------------------
589 | # | Reducing MIME type security risks |
590 | # ----------------------------------------------------------------------
591 |
592 | # Prevent some browsers from MIME-sniffing the response.
593 | #
594 | # This reduces exposure to drive-by download attacks and cross-origin
595 | # data leaks, and should be left uncommented, especially if the server
596 | # is serving user-uploaded content or content that could potentially be
597 | # treated as executable by the browser.
598 | #
599 | # http://www.slideshare.net/hasegawayosuke/owasp-hasegawa
600 | # http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx
601 | # https://msdn.microsoft.com/en-us/library/ie/gg622941.aspx
602 | # https://mimesniff.spec.whatwg.org/
603 |
604 |
605 | Header set X-Content-Type-Options "nosniff"
606 |
607 |
608 | # ----------------------------------------------------------------------
609 | # | Reflected Cross-Site Scripting (XSS) attacks |
610 | # ----------------------------------------------------------------------
611 |
612 | # (1) Try to re-enable the cross-site scripting (XSS) filter built
613 | # into most web browsers.
614 | #
615 | # The filter is usually enabled by default, but in some cases it
616 | # may be disabled by the user. However, in Internet Explorer for
617 | # example, it can be re-enabled just by sending the
618 | # `X-XSS-Protection` header with the value of `1`.
619 | #
620 | # (2) Prevent web browsers from rendering the web page if a potential
621 | # reflected (a.k.a non-persistent) XSS attack is detected by the
622 | # filter.
623 | #
624 | # By default, if the filter is enabled and browsers detect a
625 | # reflected XSS attack, they will attempt to block the attack
626 | # by making the smallest possible modifications to the returned
627 | # web page.
628 | #
629 | # Unfortunately, in some browsers (e.g.: Internet Explorer),
630 | # this default behavior may allow the XSS filter to be exploited,
631 | # thereby, it's better to inform browsers to prevent the rendering
632 | # of the page altogether, instead of attempting to modify it.
633 | #
634 | # https://hackademix.net/2009/11/21/ies-xss-filter-creates-xss-vulnerabilities
635 | #
636 | # (!) Do not rely on the XSS filter to prevent XSS attacks! Ensure that
637 | # you are taking all possible measures to prevent XSS attacks, the
638 | # most obvious being: validating and sanitizing your website's inputs.
639 | #
640 | # http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-iv-the-xss-filter.aspx
641 | # http://blogs.msdn.com/b/ieinternals/archive/2011/01/31/controlling-the-internet-explorer-xss-filter-with-the-x-xss-protection-http-header.aspx
642 | # https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29
643 |
644 | #
645 |
646 | # # (1) (2)
647 | # Header set X-XSS-Protection "1; mode=block"
648 |
649 | # # `mod_headers` cannot match based on the content-type, however,
650 | # # the `X-XSS-Protection` response header should be send only for
651 | # # HTML documents and not for the other resources.
652 |
653 | #
654 | # Header unset X-XSS-Protection
655 | #
656 |
657 | #
658 |
659 | # ----------------------------------------------------------------------
660 | # | Server-side technology information |
661 | # ----------------------------------------------------------------------
662 |
663 | # Remove the `X-Powered-By` response header that:
664 | #
665 | # * is set by some frameworks and server-side languages
666 | # (e.g.: ASP.NET, PHP), and its value contains information
667 | # about them (e.g.: their name, version number)
668 | #
669 | # * doesn't provide any value as far as users are concern,
670 | # and in some cases, the information provided by it can
671 | # be used by attackers
672 | #
673 | # (!) If you can, you should disable the `X-Powered-By` header from the
674 | # language / framework level (e.g.: for PHP, you can do that by setting
675 | # `expose_php = off` in `php.ini`)
676 | #
677 | # https://php.net/manual/en/ini.core.php#ini.expose-php
678 |
679 |
680 | Header unset X-Powered-By
681 |
682 |
683 | # ----------------------------------------------------------------------
684 | # | Server software information |
685 | # ----------------------------------------------------------------------
686 |
687 | # Prevent Apache from adding a trailing footer line containing
688 | # information about the server to the server-generated documents
689 | # (e.g.: error messages, directory listings, etc.)
690 | #
691 | # https://httpd.apache.org/docs/current/mod/core.html#serversignature
692 |
693 | ServerSignature Off
694 |
695 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
696 |
697 | # Prevent Apache from sending in the `Server` response header its
698 | # exact version number, the description of the generic OS-type or
699 | # information about its compiled-in modules.
700 | #
701 | # (!) The `ServerTokens` directive will only work in the main server
702 | # configuration file, so don't try to enable it in the `.htaccess` file!
703 | #
704 | # https://httpd.apache.org/docs/current/mod/core.html#servertokens
705 |
706 | #ServerTokens Prod
707 |
708 |
709 | # ######################################################################
710 | # # WEB PERFORMANCE #
711 | # ######################################################################
712 |
713 | # ----------------------------------------------------------------------
714 | # | Compression |
715 | # ----------------------------------------------------------------------
716 |
717 |
718 |
719 | # Force compression for mangled `Accept-Encoding` request headers
720 | # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html
721 |
722 |
723 |
724 | SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
725 | RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
726 |
727 |
728 |
729 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
730 |
731 | # Compress all output labeled with one of the following media types.
732 | #
733 | # (!) For Apache versions below version 2.3.7 you don't need to
734 | # enable `mod_filter` and can remove the ``
735 | # and `` lines as `AddOutputFilterByType` is still in
736 | # the core directives.
737 | #
738 | # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype
739 |
740 |
741 | AddOutputFilterByType DEFLATE "application/atom+xml" \
742 | "application/javascript" \
743 | "application/json" \
744 | "application/ld+json" \
745 | "application/manifest+json" \
746 | "application/rdf+xml" \
747 | "application/rss+xml" \
748 | "application/schema+json" \
749 | "application/vnd.geo+json" \
750 | "application/vnd.ms-fontobject" \
751 | "application/x-font-ttf" \
752 | "application/x-javascript" \
753 | "application/x-web-app-manifest+json" \
754 | "application/xhtml+xml" \
755 | "application/xml" \
756 | "font/eot" \
757 | "font/opentype" \
758 | "image/bmp" \
759 | "image/svg+xml" \
760 | "image/vnd.microsoft.icon" \
761 | "image/x-icon" \
762 | "text/cache-manifest" \
763 | "text/css" \
764 | "text/html" \
765 | "text/javascript" \
766 | "text/plain" \
767 | "text/vcard" \
768 | "text/vnd.rim.location.xloc" \
769 | "text/vtt" \
770 | "text/x-component" \
771 | "text/x-cross-domain-policy" \
772 | "text/xml"
773 |
774 |
775 |
776 | # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
777 |
778 | # Map the following filename extensions to the specified
779 | # encoding type in order to make Apache serve the file types
780 | # with the appropriate `Content-Encoding` response header
781 | # (do note that this will NOT make Apache compress them!).
782 | #
783 | # If these files types would be served without an appropriate
784 | # `Content-Enable` response header, client applications (e.g.:
785 | # browsers) wouldn't know that they first need to uncompress
786 | # the response, and thus, wouldn't be able to understand the
787 | # content.
788 | #
789 | # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding
790 |
791 |
792 | AddEncoding gzip svgz
793 |
794 |
795 |
796 |
797 | # ----------------------------------------------------------------------
798 | # | Content transformation |
799 | # ----------------------------------------------------------------------
800 |
801 | # Prevent intermediate caches or proxies (e.g.: such as the ones
802 | # used by mobile network providers) from modifying the website's
803 | # content.
804 | #
805 | # https://tools.ietf.org/html/rfc2616#section-14.9.5
806 | #
807 | # (!) If you are using `mod_pagespeed`, please note that setting
808 | # the `Cache-Control: no-transform` response header will prevent
809 | # `PageSpeed` from rewriting `HTML` files, and, if the
810 | # `ModPagespeedDisableRewriteOnNoTransform` directive isn't set
811 | # to `off`, also from rewriting other resources.
812 | #
813 | # https://developers.google.com/speed/pagespeed/module/configuration#notransform
814 |
815 | #
816 | # Header merge Cache-Control "no-transform"
817 | #
818 |
819 | # ----------------------------------------------------------------------
820 | # | ETags |
821 | # ----------------------------------------------------------------------
822 |
823 | # Remove `ETags` as resources are sent with far-future expires headers.
824 | #
825 | # https://developer.yahoo.com/performance/rules.html#etags
826 | # https://tools.ietf.org/html/rfc7232#section-2.3
827 |
828 | # `FileETag None` doesn't work in all cases.
829 |
830 | Header unset ETag
831 |
832 |
833 | FileETag None
834 |
835 | # ----------------------------------------------------------------------
836 | # | Expires headers |
837 | # ----------------------------------------------------------------------
838 |
839 | # Serve resources with far-future expires headers.
840 | #
841 | # (!) If you don't control versioning with filename-based
842 | # cache busting, you should consider lowering the cache times
843 | # to something like one week.
844 | #
845 | # https://httpd.apache.org/docs/current/mod/mod_expires.html
846 |
847 |
848 |
849 | ExpiresActive on
850 | ExpiresDefault "access plus 1 month"
851 |
852 | # CSS
853 |
854 | ExpiresByType text/css "access plus 1 year"
855 |
856 |
857 | # Data interchange
858 |
859 | ExpiresByType application/atom+xml "access plus 1 hour"
860 | ExpiresByType application/rdf+xml "access plus 1 hour"
861 | ExpiresByType application/rss+xml "access plus 1 hour"
862 |
863 | ExpiresByType application/json "access plus 0 seconds"
864 | ExpiresByType application/ld+json "access plus 0 seconds"
865 | ExpiresByType application/schema+json "access plus 0 seconds"
866 | ExpiresByType application/vnd.geo+json "access plus 0 seconds"
867 | ExpiresByType application/xml "access plus 0 seconds"
868 | ExpiresByType text/xml "access plus 0 seconds"
869 |
870 |
871 | # Favicon (cannot be renamed!) and cursor images
872 |
873 | ExpiresByType image/vnd.microsoft.icon "access plus 1 week"
874 | ExpiresByType image/x-icon "access plus 1 week"
875 |
876 | # HTML
877 |
878 | ExpiresByType text/html "access plus 0 seconds"
879 |
880 |
881 | # JavaScript
882 |
883 | ExpiresByType application/javascript "access plus 1 year"
884 | ExpiresByType application/x-javascript "access plus 1 year"
885 | ExpiresByType text/javascript "access plus 1 year"
886 |
887 |
888 | # Manifest files
889 |
890 | ExpiresByType application/manifest+json "access plus 1 week"
891 | ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
892 | ExpiresByType text/cache-manifest "access plus 0 seconds"
893 |
894 |
895 | # Media files
896 |
897 | ExpiresByType audio/ogg "access plus 1 month"
898 | ExpiresByType image/bmp "access plus 1 month"
899 | ExpiresByType image/gif "access plus 1 month"
900 | ExpiresByType image/jpeg "access plus 1 month"
901 | ExpiresByType image/png "access plus 1 month"
902 | ExpiresByType image/svg+xml "access plus 1 month"
903 | ExpiresByType image/webp "access plus 1 month"
904 | ExpiresByType video/mp4 "access plus 1 month"
905 | ExpiresByType video/ogg "access plus 1 month"
906 | ExpiresByType video/webm "access plus 1 month"
907 |
908 |
909 | # Web fonts
910 |
911 | # Embedded OpenType (EOT)
912 | ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
913 | ExpiresByType font/eot "access plus 1 month"
914 |
915 | # OpenType
916 | ExpiresByType font/opentype "access plus 1 month"
917 |
918 | # TrueType
919 | ExpiresByType application/x-font-ttf "access plus 1 month"
920 |
921 | # Web Open Font Format (WOFF) 1.0
922 | ExpiresByType application/font-woff "access plus 1 month"
923 | ExpiresByType application/x-font-woff "access plus 1 month"
924 | ExpiresByType font/woff "access plus 1 month"
925 |
926 | # Web Open Font Format (WOFF) 2.0
927 | ExpiresByType application/font-woff2 "access plus 1 month"
928 |
929 |
930 | # Other
931 |
932 | ExpiresByType text/x-cross-domain-policy "access plus 1 week"
933 |
934 |
935 |
936 | # ----------------------------------------------------------------------
937 | # | File concatenation |
938 | # ----------------------------------------------------------------------
939 |
940 | # Allow concatenation from within specific files.
941 | #
942 | # e.g.:
943 | #
944 | # If you have the following lines in a file called, for
945 | # example, `main.combined.js`:
946 | #
947 | #
948 | #
949 | #
950 | # Apache will replace those lines with the content of the
951 | # specified files.
952 |
953 | #
954 | #
955 | # Options +Includes
956 | # AddOutputFilterByType INCLUDES application/javascript \
957 | # application/x-javascript \
958 | # text/javascript
959 | # SetOutputFilter INCLUDES
960 | #
961 | #
962 | # Options +Includes
963 | # AddOutputFilterByType INCLUDES text/css
964 | # SetOutputFilter INCLUDES
965 | #
966 | #
967 |
968 | # ----------------------------------------------------------------------
969 | # | Filename-based cache busting |
970 | # ----------------------------------------------------------------------
971 |
972 | # If you're not using a build process to manage your filename version
973 | # revving, you might want to consider enabling the following directives
974 | # to route all requests such as `/style.12345.css` to `/style.css`.
975 | #
976 | # To understand why this is important and even a better solution than
977 | # using something like `*.css?v231`, please see:
978 | # http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
979 |
980 | #
981 | # RewriteEngine On
982 | # RewriteCond %{REQUEST_FILENAME} !-f
983 | # RewriteRule ^(.+)\.(\d+)\.(bmp|css|cur|gif|ico|jpe?g|js|png|svgz?|webp|webmanifest)$ $1.$3 [L]
984 | #
985 |
--------------------------------------------------------------------------------
/.sass-lint.yml:
--------------------------------------------------------------------------------
1 | #############################
2 | ## Sass Lint Configuration ##
3 | #############################
4 |
5 | options:
6 | formatter: stylish
7 | files:
8 | include: '**/*.s+(a|c)ss'
9 | rules:
10 | # Extends
11 | extends-before-mixins: 1
12 | extends-before-declarations: 1
13 | placeholder-in-extend: 1
14 |
15 | # Mixins
16 | mixins-before-declarations:
17 | - 1
18 | -
19 | exclude: 'mq'
20 |
21 | # Line Spacing
22 | one-declaration-per-line: 1
23 | empty-line-between-blocks:
24 | - 1
25 | -
26 | include: false
27 | single-line-per-selector: 1
28 |
29 | # Disallows
30 | no-color-keywords: 1
31 | no-color-literals:
32 | - 1
33 | -
34 | allow-rgba: true
35 | no-css-comments: 1
36 | no-debug: 1
37 | no-duplicate-properties: 1
38 | no-empty-rulesets: 1
39 | no-extends: 0
40 | no-ids: 1
41 | no-important: 1
42 | no-invalid-hex: 1
43 | no-mergeable-selectors:
44 | - 1
45 | -
46 | - whitelist: []
47 | no-misspelled-properties: 1
48 | no-qualifying-elements:
49 | - 1
50 | -
51 | - allow-element-with-attribute: true
52 | - allow-element-with-class: false
53 | - allow-element-with-id: false
54 | no-trailing-zero: 1
55 | no-transition-all: 1
56 | no-url-protocols: 1
57 | no-vendor-prefixes:
58 | - 1
59 | -
60 | - additional-identifiers: []
61 | - excluded-identifiers: []
62 | no-warn: 0
63 |
64 | # Nesting
65 | force-attribute-nesting: 1
66 | force-element-nesting: 1
67 | force-pseudo-nesting: 1
68 |
69 | # Name Formats
70 | function-name-format: 1
71 | mixin-name-format: 1
72 | placeholder-name-format: 1
73 | variable-name-format: 1
74 |
75 | # Style Guide
76 | border-zero:
77 | - 1
78 | -
79 | convention: 'none' # 0
80 | brace-style:
81 | - 1
82 | -
83 | - style: '1tbs'
84 | - allow-single-line: true
85 | clean-import-paths:
86 | - 1
87 | -
88 | - leading-underscore: false
89 | - filename-extension: false
90 | empty-args: 1
91 | hex-length:
92 | - 1
93 | -
94 | style: short # long
95 | hex-notation:
96 | - 1
97 | -
98 | style: lowercase # uppercase
99 | indentation:
100 | - 1
101 | -
102 | size: 2
103 | leading-zero: 1
104 | nesting-depth:
105 | - 2
106 | -
107 | max-depth: 3
108 | property-sort-order:
109 | - 1
110 | -
111 | order: 'alphabetical' # array of properties
112 | quotes:
113 | - 1
114 | -
115 | style: single # double
116 | shorthand-values:
117 | - 0
118 | -
119 | allowed-shorthands: [1, 2, 3]
120 | url-quotes: 1
121 | variable-for-property:
122 | - 1
123 | -
124 | properties: []
125 | zero-unit:
126 | - 1
127 | -
128 | include: false
129 |
130 | # Inner Spacing
131 | space-after-comma: 1
132 | space-before-colon: 1
133 | space-after-colon: 1
134 | space-before-brace: 1
135 | space-before-bang: 1
136 | space-after-bang: 1
137 | space-between-parens: 1
138 |
139 | # Final Items
140 | trailing-semicolon: 1
141 | final-newline: 1
142 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | # For more information about the configurations used
2 | # in this file, please see the Travis CI documentation:
3 | # http://docs.travis-ci.com
4 |
5 | after_success:
6 | - |
7 |
8 | # Automatically update the content from the `dist/` directory
9 | $(npm bin)/commit-changes --branch "master" \
10 | --commands "npm run build" \
11 | --commit-message "Update content from the \`dist\` directory [skip ci]"
12 |
13 | env:
14 | global:
15 |
16 | # The `secure` key contains three encrypted environment variables
17 | # (GH_TOKEN, GH_USER_EMAIL and GH_USER_NAME), the values of which
18 | # are used by the scripts that are automatically executed by Travis.
19 | #
20 | # Note: The `secure` key will only work for this repository, so if
21 | # you create your own fork, you will need to generate your own key:
22 | #
23 | # travis encrypt -r "/" \
24 | # GH_TOKEN="" \
25 | # GH_USER_EMAIL="" \
26 | # GH_USER_NAME=""
27 | #
28 | # To learn more about how to generate the:
29 | #
30 | # * `secure` key, see:
31 | # http://docs.travis-ci.com/user/encryption-keys/
32 | #
33 | # * GitHub access token, see:
34 | # https://help.github.com/articles/creating-an-access-token-for-command-line-use/
35 |
36 | - secure: "OQnRHkXKdvSujTPm0DSXJFrso0zKltkso0e8zF/2GLI7ouv60ELHhYCrWFuoeefSJFbiPeH/9GXnTAv7y+gC08Ba/DSlXGaHl4db5xU/7AazzQR4YaTks6z0CfvlftdlimGOY27tuDU8hMfqHJKybJGcEvFKCVJms/7udYYh+CA="
37 |
38 | git:
39 | depth: 10
40 |
41 | language: node_js
42 |
43 | node_js:
44 | - "0.12"
45 | - "4"
46 |
47 | sudo: false
48 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Mina Markham
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
[](http://forthebadge.com) [](http://forthebadge.com) [](http://forthebadge.com)
2 |
3 | # Sassy Starter [](https://waffle.io/minamarkham/sassy-starter)
4 |
5 | A starter toolkit based on [Scalable and Modular Architecture for CSS](http://smacss.com/) (SMACSS) and [Atomic Design](http://atomicdesign.bradfrost.com) for [Sass](http://sass-lang.com/) (SCSS) projects. Do what you'd like with it :)
6 |
7 | Styles are broken down into the following groups: **Base, Layout, Atoms, Molecules, Organisms, States, Themes, Utilities and Overrides**
8 |
9 | ## Getting Started
10 |
11 | 1. If needed, [install](http://blog.nodeknockout.com/post/65463770933/how-to-install-node-js-and-npm) `node` and `npm` (Node Package Manager).
12 | - If needed, install `gulp` with `npm install gulp -g`.
13 | - Clone this repo with `git clone https://github.com/minamarkham/sassy-starter` or download the zip.
14 | - In terminal, `cd` to the folder containing your project. Alternatively, you can type `cd ` and drag the location of the folder into your terminal and hit enter (on Macs).
15 | - In terminal, type `npm install`. If (and _only_ if) `npm install` isn't working, try `sudo npm install`. This should install all [dependencies](#dependencies).
16 | - In terminal, enter `gulp`.
17 | - Your browser should open at `http://localhost:3000`. You can access this same page on any device on the same wifi network and they'll see whats on your screen. It'll even sync scrolls and clicks!
18 | - Edit your code inside of the `src` folder.
19 | - Your complied and minified css, html, and javascript files will be created and updated in `dist/`. Never edit files within the `dist/` folder, as it gets deleted frequently.
20 | - Keep `gulp` running while you're making changes. When you want to stop the gulp task, hit `ctrl + C`.
21 |
22 | _For theming: add separate file (theme.scss) in`src/scss/themes/`, override the default `$theme` variable, and run `gulp themes`._
23 |
24 | ## Requirements
25 | - Node/NPM
26 | - LibSass
27 | - Gulp
28 |
29 | ## Features
30 | - Live reloading with BrowserSync
31 | - Image Minification
32 | - Github Pages deployment
33 | - Sass linting (based on [default](https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml) config)
34 | - Autoprefixer configuration
35 | - SMACSS and Atomic Design-based folder structure
36 | - `px` to `em`, `px` to `rem` and other useful functions.
37 | - Mixins for inlining media queries.
38 | * Useful CSS helper classes.
39 | * Default print styles, performance optimized.
40 | * "Delete-key friendly." Easy to strip out parts you don't need.
41 | - Includes:
42 | - [`Normalize.css`](https://necolas.github.com/normalize.css/)
43 | for CSS normalizations and common bug fixes
44 | - [`CSS Pesticide`](https://pesticide.io)
45 | for easy CSS debugging
46 | - [`jQuery`](https://jquery.com/) via CDN, with a local fallback
47 | - [`Modernizr`](http://modernizr.com/), via CDN, for feature
48 | detection
49 | - [`Apache Server Configs`](https://github.com/h5bp/server-configs-apache)
50 | that, among other, improve the web site's performance and security
51 |
52 | ## Dependencies
53 | ```
54 | "browser-sync": "^2.0.0-rc4",
55 | "colors": "^1.1.2",
56 | "del": "^2.0.2",
57 | "gulp-autoprefixer": "^2.1.0",
58 | "gulp-concat": "^2.4.3",
59 | "gulp-gh-pages": "^0.4.0",
60 | "gulp-imagemin": "^2.1.0",
61 | "gulp-jshint": "^1.9.0",
62 | "gulp-minify-css": "^0.3.12",
63 | "gulp-minify-html": "^0.1.8",
64 | "gulp-notify": "^2.2.0",
65 | "gulp-plumber": "^0.6.6",
66 | "gulp-rename": "^1.2.0",
67 | "gulp-sass": "^1.3.2",
68 | "gulp-sass-lint": "1.0.1",
69 | "gulp-size": "^1.2.0",
70 | "gulp-sourcemaps": "^1.5.2",
71 | "gulp-uglify": "^1.0.2",
72 | "imagemin-pngquant": "^4.0.0",
73 | "sassdoc": "^2.1.15",
74 | "vinyl-paths": "^2.0.0"
75 | ```
76 |
77 | ## Tasks
78 | - clean:dist
79 | - styles
80 | - browser-sync
81 | - deploy
82 | - js-app
83 | - js-libs
84 | - sass-lint
85 | - minify-html
86 | - watch
87 | - imagemin
88 | - stats
89 | - sassdoc
90 | - themes
91 | - default
92 | - clean:dist
93 | - browser-sync
94 | - js-app
95 | - js-libs
96 | - imgmin
97 | - minify-html
98 | - styles
99 | - watch
100 | - build
101 | - clean:dist
102 | - js-app
103 | - js-libs
104 | - imgmin
105 | - minify-html
106 | - styles
107 | - copy
108 | - audit
109 | - sass-lint
110 | - stats
111 |
112 | ## Directory structure
113 |
114 | ```
115 | ┌── .gitignore
116 | ├── .htaccess
117 | ├── .sass-lint.yml
118 | ├── .travis.yml
119 | ├── src
120 | │ ├── browserconfig.xml
121 | │ ├── crossdomain.xml
122 | │ ├── humans.txt
123 | │ ├── icons
124 | │ │ ├── apple-touch-icon-114x114-precomposed.png
125 | │ │ ├── apple-touch-icon-57x57-precomposed.png
126 | │ │ ├── apple-touch-icon-72x72-precomposed.png
127 | │ │ ├── apple-touch-icon-precomposed.png
128 | │ │ ├── apple-touch-icon.png
129 | │ │ ├── favicon.ico
130 | │ │ └── favicon.png
131 | │ ├── img
132 | │ ├── index.html
133 | │ ├── js
134 | │ ├── robots.txt
135 | │ └── scss
136 | │ ├── atoms
137 | │ │ └── _index.scss
138 | │ ├── base
139 | │ │ ├── _base.scss
140 | │ │ └── _index.scss
141 | │ ├── layout
142 | │ │ └── _index.scss
143 | │ ├── libs
144 | │ │ ├── _index.scss
145 | │ │ ├── _normalize.scss
146 | │ │ └── _pesticide.scss
147 | │ ├── molecules
148 | │ │ └── _index.scss
149 | │ ├── organisms
150 | │ │ └── _index.scss
151 | │ ├── overrides
152 | │ │ └── _index.scss
153 | │ ├── states
154 | │ │ ├── _index.scss
155 | │ │ └── _print.scss
156 | │ ├── themes
157 | │ │ └── rebeccapurple.scss
158 | │ ├── utilities
159 | │ │ ├── _colors.scss
160 | │ │ ├── _config.scss
161 | │ │ ├── _fonts.scss
162 | │ │ ├── _functions.scss
163 | │ │ ├── _index.scss
164 | │ │ ├── _mixins.scss
165 | │ │ └── _typography.scss
166 | │ ├── styles.scss
167 | │ └── _shame.scss
168 | ├── gulpfile.js
169 | └── package.json
170 | ```
171 |
172 | ## Bugs & Support
173 | Developed by [@MinaMarkham](http://twitter.com/MinaMarkham). Please list all bugs and feature requests in the Github issue tracker.
174 |
175 | ## Thanks & Resources
176 |
177 | This toolkit is based on the work of the following fine people & projects.
178 |
179 | - [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate)
180 | - [Scalable and Modular Architecture for CSS](http://smacss.com/book) (SMACSS)
181 | - [Atomic Design](http://atomicdesign.bradfrost.com)
182 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp'),
2 | sass = require('gulp-sass'),
3 | rename = require('gulp-rename'),
4 | cleanCSS = require('gulp-clean-css'),
5 | concat = require('gulp-concat'),
6 | uglify = require('gulp-uglify'),
7 | jshint = require('gulp-jshint'),
8 | prefix = require('gulp-autoprefixer'),
9 | browserSync = require('browser-sync'),
10 | reload = browserSync.reload,
11 | htmlmin = require('gulp-htmlmin'),
12 | size = require('gulp-size'),
13 | imagemin = require('gulp-imagemin'),
14 | pngquant = require('imagemin-pngquant'),
15 | plumber = require('gulp-plumber'),
16 | deploy = require('gulp-gh-pages'),
17 | notify = require('gulp-notify'),
18 | sassLint = require('gulp-sass-lint'),
19 | del = require('del'),
20 | vinylPaths = require('vinyl-paths'),
21 | sourcemaps = require('gulp-sourcemaps'),
22 | colors = require('colors'),
23 | sassdoc = require('sassdoc'),
24 | // Temporary solution until gulp 4
25 | // https://github.com/gulpjs/gulp/issues/355
26 | runSequence = require('run-sequence');
27 |
28 | var bases = {
29 | app: 'src/',
30 | dist: 'dist/',
31 | };
32 |
33 | colors.setTheme({
34 | silly: 'rainbow',
35 | input: 'grey',
36 | verbose: 'cyan',
37 | prompt: 'grey',
38 | info: 'green',
39 | data: 'grey',
40 | help: 'cyan',
41 | warn: 'yellow',
42 | debug: 'blue',
43 | error: 'red'
44 | });
45 |
46 | var displayError = function(error) {
47 | // Initial building up of the error
48 | var errorString = '[' + error.plugin.error.bold + ']';
49 | errorString += ' ' + error.message.replace("\n",''); // Removes new line at the end
50 |
51 | // If the error contains the filename or line number add it to the string
52 | if(error.fileName)
53 | errorString += ' in ' + error.fileName;
54 |
55 | if(error.lineNumber)
56 | errorString += ' on line ' + error.lineNumber.bold;
57 |
58 | // This will output an error like the following:
59 | // [gulp-sass] error message in file_name on line 1
60 | console.error(errorString);
61 | }
62 |
63 | var onError = function(err) {
64 | notify.onError({
65 | title: "Gulp",
66 | subtitle: "Failure!",
67 | message: "Error: <%= error.message %>",
68 | sound: "Basso"
69 | })(err);
70 | this.emit('end');
71 | };
72 |
73 | var sassOptions = {
74 | outputStyle: 'expanded'
75 | };
76 |
77 | var prefixerOptions = {
78 | browsers: ['last 2 versions']
79 | };
80 |
81 | // BUILD SUBTASKS
82 | // ---------------
83 |
84 | gulp.task('clean:dist', function() {
85 | return gulp.src(bases.dist)
86 | .pipe(vinylPaths(del));
87 | });
88 |
89 |
90 | gulp.task('styles', function() {
91 | return gulp.src(bases.app + 'scss/styles.scss')
92 | .pipe(plumber({errorHandler: onError}))
93 | .pipe(sourcemaps.init())
94 | .pipe(sass(sassOptions))
95 | .pipe(size({ gzip: true, showFiles: true }))
96 | .pipe(prefix(prefixerOptions))
97 | .pipe(rename('styles.css'))
98 | .pipe(gulp.dest(bases.dist + 'css'))
99 | .pipe(reload({stream:true}))
100 | .pipe(cleanCSS({debug: true}, function(details) {
101 | console.log(details.name + ': ' + details.stats.originalSize);
102 | console.log(details.name + ': ' + details.stats.minifiedSize);
103 | }))
104 | .pipe(size({ gzip: true, showFiles: true }))
105 | .pipe(rename({ suffix: '.min' }))
106 | .pipe(gulp.dest(bases.dist + 'css'))
107 | });
108 |
109 | gulp.task('themes', function() {
110 | return gulp.src(bases.app + 'scss/themes/*.scss')
111 | .pipe(plumber({errorHandler: onError}))
112 | .pipe(sourcemaps.init())
113 | .pipe(sass(sassOptions))
114 | .pipe(size({ gzip: true, showFiles: true }))
115 | .pipe(prefix(prefixerOptions))
116 | .pipe(gulp.dest(bases.dist + 'css/themes'))
117 | .pipe(reload({stream:true}))
118 | .pipe(cleanCSS({debug: true}, function(details) {
119 | console.log(details.name + ': ' + details.stats.originalSize);
120 | console.log(details.name + ': ' + details.stats.minifiedSize);
121 | }))
122 | .pipe(size({ gzip: true, showFiles: true }))
123 | .pipe(rename({ suffix: '.min' }))
124 | .pipe(gulp.dest(bases.dist + 'css/themes'))
125 | });
126 |
127 | gulp.task('browser-sync', function() {
128 | browserSync({
129 | server: {
130 | baseDir: bases.dist
131 | }
132 | });
133 | });
134 |
135 | gulp.task('deploy', function() {
136 | return gulp.src(bases.dist)
137 | .pipe(deploy());
138 | });
139 |
140 | gulp.task('js-app', function() {
141 | gulp.src(bases.app + 'js/*.js')
142 | .pipe(uglify())
143 | .pipe(size({ gzip: true, showFiles: true }))
144 | .pipe(concat('app.js'))
145 | .pipe(gulp.dest(bases.dist + 'js'))
146 | .pipe(reload({stream:true}));
147 | });
148 |
149 | gulp.task('js-libs', function() {
150 | gulp.src([bases.app + 'js/libs/*.js', '!' + bases.app + 'js/libs/modernizr.js'])
151 | .pipe(uglify())
152 | .pipe(size({ gzip: true, showFiles: true }))
153 | .pipe(concat('libs.js'))
154 | .pipe(gulp.dest(bases.dist + 'js'))
155 | .pipe(reload({stream:true}));
156 | });
157 |
158 |
159 | gulp.task('copy', function() {
160 |
161 | // copy modernizr to dist directly
162 | gulp.src(bases.app + 'js/libs/modernizr.js')
163 | .pipe(size({ gzip: true, showFiles: true }))
164 | .pipe(gulp.dest(bases.dist + 'js/libs'))
165 | .pipe(reload({stream:true}));
166 |
167 | // copy icons to dist directly
168 | gulp.src(bases.app + 'icons/**/*.*')
169 | .pipe(size({ gzip: true, showFiles: true }))
170 | .pipe(gulp.dest(bases.dist))
171 | .pipe(reload({stream:true}));
172 |
173 | // copy meta files to dist directly
174 | gulp.src([bases.app + '*.xml', bases.app + '*.txt'])
175 | .pipe(size({ gzip: true, showFiles: true }))
176 | .pipe(gulp.dest(bases.dist))
177 | .pipe(reload({stream:true}));
178 |
179 | });
180 |
181 | gulp.task('sass-lint', function() {
182 | gulp.src([bases.app + 'scss/**/*.scss', '!' + bases.app + 'scss/libs/**/*.scss', '!' + bases.app + 'scss/states/_print.scss'])
183 | .pipe(sassLint())
184 | .pipe(sassLint.format())
185 | .pipe(sassLint.failOnError());
186 | });
187 |
188 | gulp.task('minify-html', function() {
189 | gulp.src(bases.app + './*.html')
190 | .pipe(htmlmin({collapseWhitespace: true}))
191 | .pipe(gulp.dest(bases.dist))
192 | .pipe(reload({stream:true}));
193 | });
194 |
195 | gulp.task('watch', function() {
196 | gulp.watch(bases.app + 'scss/**/*.scss', ['styles']);
197 | gulp.watch(bases.app + './*.html', ['minify-html']);
198 | gulp.watch(bases.app + 'img/*', ['imagemin']);
199 | });
200 |
201 | gulp.task('imagemin', function() {
202 | return gulp.src(bases.app + 'img/*')
203 | .pipe(imagemin({
204 | progressive: true,
205 | svgoPlugins: [{removeViewBox: false}],
206 | use: [pngquant()]
207 | }))
208 | .pipe(gulp.dest(bases.dist + 'img'));
209 | });
210 |
211 | gulp.task('sassdoc', function () {
212 | var options = {
213 | dest: 'docs',
214 | verbose: true,
215 | display: {
216 | access: ['public', 'private'],
217 | alias: true,
218 | watermark: true,
219 | },
220 | groups: {
221 | 'undefined': 'Ungrouped',
222 | },
223 | basePath: 'https://github.com/SassDoc/sassdoc',
224 | };
225 | return gulp.src(bases.app + 'scss/**/*.scss')
226 | .pipe(sassdoc(options));
227 | });
228 |
229 | // BUILD TASKS
230 | // ------------
231 |
232 | gulp.task('default', function(done) {
233 | runSequence('clean:dist', 'browser-sync', 'js-app', 'js-libs', 'imagemin', 'minify-html', 'styles', 'themes', 'copy', 'watch', done);
234 | });
235 |
236 | gulp.task('build', function(done) {
237 | runSequence('clean:dist', 'js-app', 'js-libs', 'imagemin', 'minify-html', 'styles', 'copy', done);
238 | });
239 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sassy-starter",
3 | "title": "Sassy Starter",
4 | "description": "A starter toolkit based on Scalable and Modular Architecture for CSS (SMACSS) for Sass (SCSS) projects",
5 | "author": {
6 | "name": "Mina Markham",
7 | "url": "https://github.com/minamarkham"
8 | },
9 | "version": "2.1.0",
10 | "license": "MIT",
11 | "repository": {
12 | "type": "git",
13 | "url": "git://github.com/minamarkham/sassy-starter.git"
14 | },
15 | "homepage": "https://minamarkham.github.io/sassy-starter/",
16 | "keywords": [
17 | "sass",
18 | "scss",
19 | "doc",
20 | "boilerplate",
21 | "starter",
22 | "gulp",
23 | "smacss"
24 | ],
25 | "bugs": {
26 | "url": "https://github.com/minamarkham/sassy-starter/issues"
27 | },
28 | "dependencies": {},
29 | "devDependencies": {
30 | "browser-sync": "^2.0.0-rc4",
31 | "colors": "^1.1.2",
32 | "del": "^2.0.2",
33 | "gulp": "^3.9.0",
34 | "gulp-autoprefixer": "^2.1.0",
35 | "gulp-clean-css": "^2.0.7",
36 | "gulp-concat": "^2.4.3",
37 | "gulp-gh-pages": "^0.4.0",
38 | "gulp-htmlmin": "^2.0.0",
39 | "gulp-imagemin": "^2.1.0",
40 | "gulp-jshint": "^1.9.0",
41 | "gulp-notify": "^2.2.0",
42 | "gulp-plumber": "^0.6.6",
43 | "gulp-rename": "^1.2.0",
44 | "gulp-sass": "^2.3.1",
45 | "gulp-sass-lint": "1.0.1",
46 | "gulp-size": "^1.2.0",
47 | "gulp-sourcemaps": "^1.5.2",
48 | "gulp-uglify": "^1.0.2",
49 | "imagemin-pngquant": "^4.0.0",
50 | "run-sequence": "^1.1.4",
51 | "sassdoc": "^2.1.15",
52 | "vinyl-paths": "^2.0.0"
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/sache.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Sassy Starter",
3 | "description": "A starter toolkit based on Scalable and Modular Architecture for CSS (SMACSS) for Sass (SCSS) projects. Do what you'd like with it :)",
4 | "tags": ["sass", "starter kit", "boilerplate", "mixin library", "gulp", "smacss"]
5 | }
6 |
--------------------------------------------------------------------------------
/src/browserconfig.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/crossdomain.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
15 |
16 |
--------------------------------------------------------------------------------
/src/humans.txt:
--------------------------------------------------------------------------------
1 | # humanstxt.org/
2 | # The humans responsible & technology colophon
3 |
4 | # TEAM
5 |
6 | -- --
7 |
8 | # THANKS
9 |
10 |
11 |
12 | # TECHNOLOGY COLOPHON
13 |
14 | CSS3, HTML5
15 | Apache Server Configs, jQuery, Modernizr, Normalize.css
16 |
--------------------------------------------------------------------------------
/src/icons/apple-touch-icon-114x114-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/minamarkham/sassy-starter/75502a54947542c7b4094a07798bc1f7de709cd7/src/icons/apple-touch-icon-114x114-precomposed.png
--------------------------------------------------------------------------------
/src/icons/apple-touch-icon-57x57-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/minamarkham/sassy-starter/75502a54947542c7b4094a07798bc1f7de709cd7/src/icons/apple-touch-icon-57x57-precomposed.png
--------------------------------------------------------------------------------
/src/icons/apple-touch-icon-72x72-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/minamarkham/sassy-starter/75502a54947542c7b4094a07798bc1f7de709cd7/src/icons/apple-touch-icon-72x72-precomposed.png
--------------------------------------------------------------------------------
/src/icons/apple-touch-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/minamarkham/sassy-starter/75502a54947542c7b4094a07798bc1f7de709cd7/src/icons/apple-touch-icon-precomposed.png
--------------------------------------------------------------------------------
/src/icons/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/minamarkham/sassy-starter/75502a54947542c7b4094a07798bc1f7de709cd7/src/icons/apple-touch-icon.png
--------------------------------------------------------------------------------
/src/icons/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/minamarkham/sassy-starter/75502a54947542c7b4094a07798bc1f7de709cd7/src/icons/favicon.ico
--------------------------------------------------------------------------------
/src/icons/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/minamarkham/sassy-starter/75502a54947542c7b4094a07798bc1f7de709cd7/src/icons/favicon.png
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | Sassy Starter
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 | Hello, Gorgeous!
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/src/js/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/minamarkham/sassy-starter/75502a54947542c7b4094a07798bc1f7de709cd7/src/js/.gitkeep
--------------------------------------------------------------------------------
/src/robots.txt:
--------------------------------------------------------------------------------
1 | # www.robotstxt.org/
2 |
3 | # Allow crawling of all content
4 | User-agent: *
5 | Disallow:
6 |
--------------------------------------------------------------------------------
/src/scss/_shame.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // $Shame
3 | // @see http://csswizardry.com/2013/04/shame-css/
4 | // Thanks https://github.com/heroheman/shepherd/blob/master/sass/_shame.scss
5 | // ==========================================================================
6 |
7 | // ==========================================================================
8 | // because hacks happen.
9 | //
10 | // be very specific about what each piece of code is doing, and
11 | // how to better fix it later
12 | // ==========================================================================
13 |
14 | // Try: $ git blame _shame.scss
15 |
16 | // Rules:
17 | // ---------------
18 | // 1. If it’s a hack, it goes in _shame.scss.
19 | // 2. Document all hacks fully:
20 | // 3. What part of the codebase does it relate to?
21 | // 4. Why was this needed?
22 | // 5. How does this fix it?
23 | // 6. How might you fix it properly, given more time?
24 | // 7. Do not blame the developer; if they explained why they had to do it then their reasons are probably (hopefully) valid.
25 | // 8. Try and clean _shame.scss up when you have some down time.
26 |
27 | // Example:
28 | // ---------------
29 | // Nav specificity fix.
30 |
31 | // Someone used an ID in the header code (`#header a{}`) which trumps the
32 | // nav selectors (`.site-nav a{}`). Use !important to override it until I
33 | // have time to refactor the header stuff.
34 |
35 | // .site-nav a { color:#BADA55!important; }
36 |
--------------------------------------------------------------------------------
/src/scss/atoms/_index.scss:
--------------------------------------------------------------------------------
1 | // Atoms
2 | //
3 | // If atoms are the basic building blocks of matter, then the atoms of
4 | // our interfaces serve as the foundational building blocks that
5 | // comprise all our user interfaces. Therefore these atoms would include
6 | // basic HTML tags like form labels, inputs, buttons, and other elements
7 | // that can’t be broken down any further without ceasing to be functional.
8 | //
9 | // @source - http://atomicdesign.bradfrost.com/chapter-2/
10 |
--------------------------------------------------------------------------------
/src/scss/base/_base.scss:
--------------------------------------------------------------------------------
1 | @viewport { width: device-width; }
2 |
3 | html {
4 | background-color: $color-background;
5 | box-sizing: border-box;
6 | height: 100%;
7 | }
8 |
9 | * {
10 | &:before,
11 | &:after { box-sizing: inherit; }
12 | }
13 |
14 | body {
15 | -webkit-font-smoothing: antialiased;
16 | color: $color-text;
17 | font-family: $font-family-default;
18 | min-height: 100%;
19 | overflow-x: hidden;
20 | text-rendering: optimizeLegibility;
21 | }
22 |
23 | a {
24 | background: transparent;
25 | color: $color-link;
26 | text-decoration: none;
27 | transition: color .2s;
28 | }
29 |
30 | img {
31 | height: auto;
32 | max-width: 100%;
33 | }
34 |
35 | h1,
36 | h2,
37 | h3,
38 | h4,
39 | h5,
40 | h6 {
41 | font-family: $font-family-display;
42 | font-weight: normal;
43 | }
44 |
--------------------------------------------------------------------------------
/src/scss/base/_index.scss:
--------------------------------------------------------------------------------
1 | // @source http://smacss.com/book/type-base
2 | //
3 | // Base Rules
4 | //
5 | // A Base rule is applied to an element using an element selector, a
6 | // descendent selector, or a child selector, along with any pseudo-classes.
7 | // It doesn’t include any class or ID selectors. It is defining the default
8 | // styling for how that element should look in all occurrences on the page.
9 |
10 | // ==========================================================================
11 | // $Base
12 | // ==========================================================================
13 | @import 'base';
14 |
--------------------------------------------------------------------------------
/src/scss/layout/_index.scss:
--------------------------------------------------------------------------------
1 | // @source http://smacss.com/book/type-layout
2 | //
3 | // Layout Rules
4 | //
5 | // Layout styles can also be divided into major and minor styles based on
6 | // reuse. Major layout styles such as header and footer are traditionally
7 | // styled using ID selectors but take the time to think about the elements
8 | // that are common across all components of the page and use class selectors
9 | // where appropriate.
10 |
--------------------------------------------------------------------------------
/src/scss/libs/_index.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // Third-Party Styles
3 | // ==========================================================================
4 |
5 | // Convert vendor styles to SCSS (basically just change the extension
6 | // to ".scss" and add "_" to the beginning) and import them here.
7 |
8 | // ==========================================================================
9 | // $CSS Pesticide
10 | // ==========================================================================
11 | // Can always be included as it only renders css if the
12 | // variable $pesticide-debug is set to "true"
13 |
14 | @import 'pesticide';
15 |
16 | // ==========================================================================
17 | // $Normalize
18 | // ==========================================================================
19 |
20 | @import 'normalize';
21 |
--------------------------------------------------------------------------------
/src/scss/libs/_normalize.scss:
--------------------------------------------------------------------------------
1 | // =============================================================================
2 | // Normalize.scss based on Nicolas Gallagher and Jonathan Neal's
3 | // normalize.css v2.1.3 | MIT License | git.io/normalize
4 | // =============================================================================
5 |
6 | // =============================================================================
7 | // Normalize.scss settings
8 | // =============================================================================
9 |
10 |
11 | // Set to true if you want to add support for IE6 and IE7
12 | // Notice: setting to true might render some elements
13 | // slightly differently than when set to false
14 | $legacy_support_for_ie: false !default; // Used also in Compass
15 |
16 |
17 | // Set the default font family here so you don't have to override it later
18 | $normalized_font_family: sans-serif !default;
19 |
20 | $normalize_headings: true !default;
21 |
22 | $h1_font_size: 2em !default;
23 | $h2_font_size: 1.5em !default;
24 | $h3_font_size: 1.17em !default;
25 | $h4_font_size: 1em !default;
26 | $h5_font_size: 0.83em !default;
27 | $h6_font_size: 0.75em !default;
28 |
29 | $h1_margin: 0.67em 0 !default;
30 | $h2_margin: 0.83em 0 !default;
31 | $h3_margin: 1em 0 !default;
32 | $h4_margin: 1.33em 0 !default;
33 | $h5_margin: 1.67em 0 !default;
34 | $h6_margin: 2.33em 0 !default;
35 |
36 | $background: #fff !default;
37 | $color: #000 !default;
38 |
39 | // =============================================================================
40 | // HTML5 display definitions
41 | // =============================================================================
42 |
43 | // Corrects block display not defined in IE6/7/8/9 & FF3
44 |
45 | article,
46 | aside,
47 | details,
48 | figcaption,
49 | figure,
50 | footer,
51 | header,
52 | hgroup,
53 | nav,
54 | section,
55 | summary {
56 | display: block;
57 | }
58 |
59 | // Corrects inline-block display not defined in IE6/7/8/9 & FF3
60 |
61 | audio,
62 | canvas,
63 | video {
64 | display: inline-block;
65 | @if $legacy_support_for_ie {
66 | *display: inline;
67 | *zoom: 1;
68 | }
69 | }
70 |
71 | // 1. Prevents modern browsers from displaying 'audio' without controls
72 | // 2. Remove excess height in iOS5 devices
73 |
74 | audio:not([controls]) {
75 | display: none; // 1
76 | height: 0; // 2
77 | }
78 |
79 | //
80 | // Address `[hidden]` styling not present in IE 8/9.
81 | // Hide the `template` element in IE, Safari, and Firefox < 22.
82 | //
83 |
84 | [hidden], template {
85 | display: none;
86 | }
87 |
88 | // =============================================================================
89 | // Base
90 | // =============================================================================
91 |
92 | // 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
93 | // http://clagnut.com/blog/348/#c790
94 | // 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
95 | // www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
96 |
97 | html {
98 | @if $legacy_support_for_ie {
99 | font-size: 100%; // 1
100 | }
101 | background: $background;
102 | color: $color;
103 | -webkit-text-size-adjust: 100%; // 2
104 | -ms-text-size-adjust: 100%; // 2
105 | }
106 |
107 | // Addresses font-family inconsistency between 'textarea' and other form elements.
108 |
109 | html,
110 | button,
111 | input,
112 | select,
113 | textarea {
114 | font-family: $normalized_font_family;
115 | }
116 |
117 | // Addresses margins handled incorrectly in IE6/7
118 |
119 | body {
120 | margin: 0;
121 | }
122 |
123 | // =============================================================================
124 | // Links
125 | // =============================================================================
126 |
127 | // 1. Remove the gray background color from active links in IE 10.
128 | // 2. Addresses outline displayed oddly in Chrome
129 | // 3. Improves readability when focused and also mouse hovered in all browsers
130 | // people.opera.com/patrickl/experiments/keyboard/test
131 |
132 | a {
133 | // 1
134 |
135 | background: transparent;
136 |
137 | // 2
138 |
139 | &:focus {
140 | outline: thin dotted;
141 | }
142 |
143 | // 3
144 |
145 | &:hover,
146 | &:active {
147 | outline: 0;
148 | }
149 | }
150 |
151 | // =============================================================================
152 | // Typography
153 | // =============================================================================
154 |
155 | // Addresses font sizes and margins set differently in IE6/7
156 | // Addresses font sizes within 'section' and 'article' in FF4+, Chrome, S5
157 |
158 | @if $normalize_headings == true {
159 | h1 {
160 | font-size: $h1_font_size;
161 | margin: $h1_margin;
162 | }
163 |
164 | h2 {
165 | font-size: $h2_font_size;
166 | margin: $h2_margin;
167 | }
168 |
169 | h3 {
170 | font-size: $h3_font_size;
171 | margin: $h3_margin;
172 | }
173 |
174 | h4 {
175 | font-size: $h4_font_size;
176 | margin: $h4_margin;
177 | }
178 |
179 | h5 {
180 | font-size: $h5_font_size;
181 | margin: $h5_margin;
182 | }
183 |
184 | h6 {
185 | font-size: $h6_font_size;
186 | margin: $h6_margin;
187 | }
188 | }
189 |
190 | @if $legacy_support_for_ie {
191 | blockquote {
192 | margin: 1em 40px;
193 | }
194 | }
195 |
196 | // Addresses styling not present in S5, Chrome
197 |
198 | dfn {
199 | font-style: italic;
200 | }
201 |
202 | // Addresses styling not present in IE6/7/8/9
203 |
204 | mark {
205 | background: #ff0;
206 | color: #000;
207 | }
208 |
209 | // Addresses margins set differently in IE6/7
210 | @if $legacy_support_for_ie {
211 | p,
212 | pre {
213 | margin: 1em 0;
214 | }
215 | }
216 |
217 | // Corrects font family set oddly in IE6, S4/5, Chrome
218 | // en.wikipedia.org/wiki/User:Davidgothberg/Test59
219 |
220 | code,
221 | kbd,
222 | pre,
223 | samp {
224 | font-family: monospace, serif;
225 | @if $legacy_support_for_ie {
226 | _font-family: 'courier new', monospace;
227 | }
228 | font-size: 1em;
229 | }
230 |
231 | // Improves readability of pre-formatted text in all browsers
232 |
233 | pre {
234 | white-space: pre;
235 | white-space: pre-wrap;
236 | word-wrap: break-word;
237 | }
238 |
239 | // Set consistent quote types.
240 |
241 | q {
242 | quotes: "\201C" "\201D" "\2018" "\2019";
243 | }
244 |
245 | // 1. Addresses CSS quotes not supported in IE6/7
246 | // 2. Addresses quote property not supported in S4
247 |
248 | // 1
249 | @if $legacy_support_for_ie {
250 | q {
251 | quotes: none;
252 | }
253 | }
254 |
255 | // 2
256 | q {
257 | &:before,
258 | &:after {
259 | content: '';
260 | content: none;
261 | }
262 | }
263 |
264 | // Address inconsistent and variable font size in all browsers.
265 |
266 | small {
267 | font-size: 80%;
268 | }
269 |
270 | // Prevents sub and sup affecting line-height in all browsers
271 | // gist.github.com/413930
272 |
273 | sub,
274 | sup {
275 | font-size: 75%;
276 | line-height: 0;
277 | position: relative;
278 | vertical-align: baseline;
279 | }
280 |
281 | sup {
282 | top: -0.5em;
283 | }
284 |
285 | sub {
286 | bottom: -0.25em;
287 | }
288 |
289 | // =============================================================================
290 | // Lists
291 | // =============================================================================
292 |
293 | // Addresses margins set differently in IE6/7
294 | @if $legacy_support_for_ie {
295 | dl,
296 | menu,
297 | ol,
298 | ul {
299 | margin: 1em 0;
300 | }
301 | }
302 |
303 | @if $legacy_support_for_ie {
304 | dd {
305 | margin: 0 0 0 40px;
306 | }
307 | }
308 |
309 | // Addresses paddings set differently in IE6/7
310 | @if $legacy_support_for_ie {
311 | menu,
312 | ol,
313 | ul {
314 | padding: 0 0 0 40px;
315 | }
316 | }
317 |
318 | // Corrects list images handled incorrectly in IE7
319 |
320 | nav {
321 | ul,
322 | ol {
323 | @if $legacy_support_for_ie {
324 | list-style-image: none;
325 | }
326 | }
327 | }
328 |
329 | // =============================================================================
330 | // Embedded content
331 | // =============================================================================
332 |
333 | // 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
334 | // 2. Improves image quality when scaled in IE7
335 | // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
336 |
337 | img {
338 | border: 0; // 1
339 | @if $legacy_support_for_ie {
340 | -ms-interpolation-mode: bicubic; // 2
341 | }
342 | }
343 |
344 | // Corrects overflow displayed oddly in IE9
345 |
346 | svg:not(:root) {
347 | overflow: hidden;
348 | }
349 |
350 | // =============================================================================
351 | // Figures
352 | // =============================================================================
353 |
354 | // Addresses margin not present in IE6/7/8/9, S5, O11
355 |
356 | figure {
357 | margin: 0;
358 | }
359 |
360 | // =============================================================================
361 | // Forms
362 | // =============================================================================
363 |
364 | // Corrects margin displayed oddly in IE6/7
365 | @if $legacy_support_for_ie {
366 | form {
367 | margin: 0;
368 | }
369 | }
370 |
371 | // Define consistent border, margin, and padding
372 |
373 | fieldset {
374 | border: 1px solid #c0c0c0;
375 | margin: 0 2px;
376 | padding: 0.35em 0.625em 0.75em;
377 | }
378 |
379 | // 1. Corrects color not being inherited in IE6/7/8/9
380 | // 2. Remove padding so people aren't caught out if they zero out fieldsets.
381 | // 3. Corrects text not wrapping in FF3
382 | // 4. Corrects alignment displayed oddly in IE6/7
383 |
384 | legend {
385 | border: 0; // 1
386 | padding: 0; // 2
387 | white-space: normal; // 3
388 | @if $legacy_support_for_ie {
389 | *margin-left: -7px; // 4
390 | }
391 | }
392 |
393 | // 1. Correct font family not being inherited in all browsers.
394 | // 2. Corrects font size not being inherited in all browsers
395 | // 3. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
396 | // 4. Improves appearance and consistency in all browsers
397 |
398 | button,
399 | input,
400 | select,
401 | textarea {
402 | font-family: inherit; // 1
403 | font-size: 100%; // 2
404 | margin: 0; // 3
405 | vertical-align: baseline; // 4
406 | @if $legacy_support_for_ie {
407 | *vertical-align: middle; // 4
408 | }
409 | }
410 |
411 | // Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
412 |
413 | button, input {
414 | line-height: normal;
415 | }
416 |
417 | // Address inconsistent `text-transform` inheritance for `button` and `select`.
418 | // All other form control elements do not inherit `text-transform` values.
419 | // Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
420 | // Correct `select` style inheritance in Firefox 4+ and Opera.
421 |
422 | button,
423 | select {
424 | text-transform: none;
425 | }
426 |
427 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
428 | // and `video` controls
429 | // 2. Corrects inability to style clickable 'input' types in iOS
430 | // 3. Improves usability and consistency of cursor style between image-type
431 | // 'input' and others
432 | // 4. Removes inner spacing in IE7 without affecting normal text inputs
433 | // Known issue: inner spacing remains in IE6
434 |
435 | button,
436 | html input[type="button"], // 1
437 | input[type="reset"],
438 | input[type="submit"] {
439 | -webkit-appearance: button; // 2
440 | cursor: pointer; // 3
441 | @if $legacy_support_for_ie {
442 | *overflow: visible; // 4
443 | }
444 | }
445 |
446 | // Re-set default cursor for disabled elements
447 |
448 | button[disabled],
449 | input[disabled] {
450 | cursor: default;
451 | }
452 |
453 | // Removes inner padding and border in FF3+
454 | // www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
455 |
456 | button, input {
457 | &::-moz-focus-inner {
458 | border: 0;
459 | padding: 0;
460 | }
461 | }
462 |
463 | // 1. Removes default vertical scrollbar in IE6/7/8/9
464 | // 2. Improves readability and alignment in all browsers
465 |
466 | textarea {
467 | overflow: auto; // 1
468 | vertical-align: top; // 2
469 | }
470 |
471 | // =============================================================================
472 | // Tables
473 | // =============================================================================
474 |
475 | // Remove most spacing between table cells
476 |
477 | table {
478 | border-collapse: collapse;
479 | border-spacing: 0;
480 | }
481 |
482 | input {
483 | // 1. Addresses appearance set to searchfield in S5, Chrome
484 | // 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
485 | &[type="search"] {
486 | -webkit-appearance: textfield; // 1
487 | -moz-box-sizing: content-box;
488 | -webkit-box-sizing: content-box; // 2
489 | box-sizing: content-box;
490 |
491 | // Remove inner padding and search cancel button in Safari 5 and Chrome
492 | // on OS X.
493 | &::-webkit-search-cancel-button,
494 | &::-webkit-search-decoration {
495 | -webkit-appearance: none;
496 | }
497 | }
498 |
499 | // 1. Address box sizing set to `content-box` in IE 8/9/10.
500 | // 2. Remove excess padding in IE 8/9/10.
501 | // 3. Removes excess padding in IE7
502 | // Known issue: excess padding remains in IE6
503 | &[type="checkbox"],
504 | &[type="radio"] {
505 | box-sizing: border-box; // 1
506 | padding: 0; // 2
507 | @if $legacy_support_for_ie {
508 | *height: 13px; // 3
509 | *width: 13px; // 3
510 | }
511 | }
512 | }
513 |
--------------------------------------------------------------------------------
/src/scss/libs/_pesticide.scss:
--------------------------------------------------------------------------------
1 | // pesticide v0.1.0 . @mrmrs . MIT
2 |
3 | $pesticide-debug-outline: true !default;
4 | $pesticide-debug-depth: true !default;
5 |
6 | @if $pesticide-debug-outline == true {
7 | body { outline: 1px solid #2980b9 !important; }
8 | article { outline: 1px solid #3498db !important; }
9 | nav { outline: 1px solid #0088c3 !important; }
10 | aside { outline: 1px solid #33a0ce !important; }
11 | section { outline: 1px solid #66b8da !important; }
12 | header { outline: 1px solid #99cfe7 !important; }
13 | footer { outline: 1px solid #cce7f3 !important; }
14 | h1 { outline: 1px solid #162544 !important; }
15 | h2 { outline: 1px solid #314e6e !important; }
16 | h3 { outline: 1px solid #3e5e85 !important; }
17 | h4 { outline: 1px solid #449baf !important; }
18 | h5 { outline: 1px solid #c7d1cb !important; }
19 | h6 { outline: 1px solid #4371d0 !important; }
20 | main { outline: 1px solid #2f4f90 !important; }
21 | address { outline: 1px solid #1a2c51 !important; }
22 | div { outline: 1px solid #036cdb !important; }
23 | p { outline: 1px solid #ac050b !important; }
24 | hr { outline: 1px solid #ff063f !important; }
25 | pre { outline: 1px solid #850440 !important; }
26 | blockquote { outline: 1px solid #f1b8e7 !important; }
27 | ol { outline: 1px solid #ff050c !important; }
28 | ul { outline: 1px solid #d90416 !important; }
29 | li { outline: 1px solid #d90416 !important; }
30 | dl { outline: 1px solid #fd3427 !important; }
31 | dt { outline: 1px solid #ff0043 !important; }
32 | dd { outline: 1px solid #e80174 !important; }
33 | figure { outline: 1px solid #ff00bb !important; }
34 | figcaption { outline: 1px solid #bf0032 !important; }
35 | table { outline: 1px solid #00cc99 !important; }
36 | caption { outline: 1px solid #37ffc4 !important; }
37 | thead { outline: 1px solid #98daca !important; }
38 | tbody { outline: 1px solid #64a7a0 !important; }
39 | tfoot { outline: 1px solid #22746b !important; }
40 | tr { outline: 1px solid #86c0b2 !important; }
41 | th { outline: 1px solid #a1e7d6 !important; }
42 | td { outline: 1px solid #3f5a54 !important; }
43 | col { outline: 1px solid #6c9a8f !important; }
44 | colgroup { outline: 1px solid #6c9a9d !important; }
45 | button { outline: 1px solid #da8301 !important; }
46 | datalist { outline: 1px solid #c06000 !important; }
47 | fieldset { outline: 1px solid #d95100 !important; }
48 | form { outline: 1px solid #d23600 !important; }
49 | input { outline: 1px solid #fca600 !important; }
50 | keygen { outline: 1px solid #b31e00 !important; }
51 | label { outline: 1px solid #ee8900 !important; }
52 | legend { outline: 1px solid #de6d00 !important; }
53 | meter { outline: 1px solid #e8630c !important; }
54 | optgroup { outline: 1px solid #b33600 !important; }
55 | option { outline: 1px solid #ff8a00 !important; }
56 | output { outline: 1px solid #ff9619 !important; }
57 | progress { outline: 1px solid #e57c00 !important; }
58 | select { outline: 1px solid #e26e0f !important; }
59 | textarea { outline: 1px solid #cc5400 !important; }
60 | details { outline: 1px solid #33848f !important; }
61 | summary { outline: 1px solid #60a1a6 !important; }
62 | command { outline: 1px solid #438da1 !important; }
63 | menu { outline: 1px solid #449da6 !important; }
64 | del { outline: 1px solid #bf0000 !important; }
65 | ins { outline: 1px solid #400000 !important; }
66 | img { outline: 1px solid #22746b !important; }
67 | iframe { outline: 1px solid #64a7a0 !important; }
68 | embed { outline: 1px solid #98daca !important; }
69 | object { outline: 1px solid #00cc99 !important; }
70 | param { outline: 1px solid #37ffc4 !important; }
71 | video { outline: 1px solid #6ee866 !important; }
72 | audio { outline: 1px solid #027353 !important; }
73 | source { outline: 1px solid #012426 !important; }
74 | canvas { outline: 1px solid #a2f570 !important; }
75 | track { outline: 1px solid #59a600 !important; }
76 | map { outline: 1px solid #7be500 !important; }
77 | area { outline: 1px solid #305900 !important; }
78 | a { outline: 1px solid #ff62ab !important; }
79 | em { outline: 1px solid #800b41 !important; }
80 | strong { outline: 1px solid #ff1583 !important; }
81 | i { outline: 1px solid #803156 !important; }
82 | b { outline: 1px solid #cc1169 !important; }
83 | u { outline: 1px solid #ff0430 !important; }
84 | s { outline: 1px solid #f805e3 !important; }
85 | small { outline: 1px solid #d107b2 !important; }
86 | abbr { outline: 1px solid #4a0263 !important; }
87 | q { outline: 1px solid #240018 !important; }
88 | cite { outline: 1px solid #64003c !important; }
89 | dfn { outline: 1px solid #b4005a !important; }
90 | sub { outline: 1px solid #dba0c8 !important; }
91 | sup { outline: 1px solid #cc0256 !important; }
92 | time { outline: 1px solid #d6606d !important; }
93 | code { outline: 1px solid #e04251 !important; }
94 | kbd { outline: 1px solid #5e001f !important; }
95 | samp { outline: 1px solid #9c0033 !important; }
96 | var { outline: 1px solid #d90047 !important; }
97 | mark { outline: 1px solid #ff0053 !important; }
98 | bdi { outline: 1px solid #bf3668 !important; }
99 | bdo { outline: 1px solid #6f1400 !important; }
100 | ruby { outline: 1px solid #ff7b93 !important; }
101 | rt { outline: 1px solid #ff2f54 !important; }
102 | rp { outline: 1px solid #803e49 !important; }
103 | span { outline: 1px solid #cc2643 !important; }
104 | br { outline: 1px solid #db687d !important; }
105 | wbr { outline: 1px solid #db175b !important; }
106 | }
107 |
108 | @if $pesticide-debug-depth == true {
109 | body { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(17,34,99,0.25) }
110 | article { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
111 | nav { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
112 | aside { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
113 | section { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
114 | header { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
115 | footer { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
116 | h1 { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
117 | h2 { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
118 | h3 { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
119 | h4 { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
120 | h5 { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
121 | h6 { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
122 | main { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
123 | address { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
124 | div { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
125 | p { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
126 | hr { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
127 | pre { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
128 | blockquote { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
129 | ol { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
130 | ul { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
131 | li { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
132 | dl { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
133 | dt { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
134 | dd { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
135 | figure { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
136 | figcaption { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
137 | table { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
138 | caption { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
139 | thead { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
140 | tbody { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
141 | tfoot { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
142 | tr { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
143 | th { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
144 | td { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
145 | col { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
146 | colgroup { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
147 | button { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
148 | datalist { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
149 | fieldset { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
150 | form { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
151 | input { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
152 | keygen { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
153 | label { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
154 | legend { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
155 | meter { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
156 | optgroup { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
157 | option { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
158 | output { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
159 | progress { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
160 | select { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
161 | textarea { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
162 | details { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
163 | summary { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
164 | command { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
165 | menu { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
166 | del { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
167 | ins { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
168 | img { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
169 | iframe { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
170 | embed { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
171 | object { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
172 | param { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
173 | video { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
174 | audio { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
175 | source { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
176 | canvas { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
177 | track { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
178 | map { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
179 | area { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
180 | a { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
181 | em { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
182 | strong { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
183 | i { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
184 | b { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
185 | u { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
186 | s { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
187 | small { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
188 | abbr { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
189 | q { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
190 | cite { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
191 | dfn { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
192 | sub { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
193 | sup { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
194 | time { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
195 | code { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
196 | kbd { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
197 | samp { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
198 | var { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
199 | mark { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
200 | bdi { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
201 | bdo { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
202 | ruby { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
203 | rt { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
204 | rp { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
205 | span { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
206 | br { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
207 | wbr { box-shadow: 0 0 1rem rgba(0,0,0,.6); background-color: rgba(255,255,255,0.25) }
208 | }
209 |
--------------------------------------------------------------------------------
/src/scss/molecules/_index.scss:
--------------------------------------------------------------------------------
1 | // Molecules
2 | //
3 | // In chemistry, molecules are groups of atoms bonded
4 | // together that resultantly take on new properties.
5 | // In interfaces, molecules are relatively simple groups of
6 | // UI elements functioning together as a unit. For example,
7 | // a form label, search input, and button can combine them
8 | // together to create a search form molecule.
9 | //
10 | // @source - http://atomicdesign.bradfrost.com/chapter-2/
11 |
--------------------------------------------------------------------------------
/src/scss/organisms/_index.scss:
--------------------------------------------------------------------------------
1 | // Organisms
2 | //
3 | // Organisms can consist of similar or different molecule types.
4 | // A header organism might consist of dissimilar elements such as
5 | // a logo image, primary navigation list, and search form.
6 | //
7 | // @source - http://atomicdesign.bradfrost.com/chapter-2/
8 |
--------------------------------------------------------------------------------
/src/scss/overrides/_index.scss:
--------------------------------------------------------------------------------
1 | // Overrides
2 | //
3 | // [These styles override] all other layers, and has the power
4 | // to override anything at all that has gone before it. It is
5 | // inelegant and heavy-handed, and contains utility and helper
6 | // classes, and hacks.
7 | //
8 | // @source - http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
9 |
--------------------------------------------------------------------------------
/src/scss/states/_index.scss:
--------------------------------------------------------------------------------
1 | // @source http://smacss.com/book/type-state
2 | //
3 | // State Rules
4 | //
5 | // A state is something that augments and overrides all other styles.
6 | // For example, an accordion section may be in a collapsed or expanded state.
7 | // A message may be in a success or error state.
8 | //
9 | // States are generally applied to the same element as a layout rule or
10 | // applied to the same element as a base module class.
11 |
12 | // ==========================================================================
13 | // $States
14 | // ==========================================================================
15 |
--------------------------------------------------------------------------------
/src/scss/states/_print.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // $Print
3 | // Inlined to avoid required HTTP connection: h5bp.com/r
4 | // ==========================================================================
5 |
6 | @media print {
7 | *{
8 | &:before,
9 | &:after {
10 | background: transparent !important;
11 | color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
12 | box-shadow: none !important;
13 | text-shadow: none !important;
14 | }
15 | }
16 | a,
17 | a:visited {
18 | text-decoration: underline;
19 | }
20 |
21 | a[href]:after {
22 | content: " (" attr(href) ")";
23 | }
24 |
25 | abbr[title]:after {
26 | content: " (" attr(title) ")";
27 | }
28 |
29 | // Don't show links that are fragment identifiers,
30 | // or use the `javascript:` pseudo protocol
31 |
32 | a[href^="#"]:after,
33 | a[href^="javascript:"]:after {
34 | content: "";
35 | }
36 |
37 | pre,
38 | blockquote {
39 | border: 1px solid #999;
40 | page-break-inside: avoid;
41 | }
42 |
43 | // Printing Tables:
44 | // http://css-discuss.incutio.com/wiki/Printing_Tables
45 |
46 | thead { display: table-header-group; }
47 |
48 | tr,
49 | img { page-break-inside: avoid; }
50 |
51 | img { max-width: 100% !important; }
52 |
53 | p,
54 | h2,
55 | h3 {
56 | orphans: 3;
57 | widows: 3;
58 | }
59 |
60 | h2,
61 | h3 {
62 | page-break-after: avoid;
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/src/scss/styles.scss:
--------------------------------------------------------------------------------
1 | @charset 'utf-8';
2 |
3 | // ==========================================================================
4 | // Sassy Starter by Mina Markham
5 | // A SMACSS-based starter toolkit for SCSS projects
6 | //
7 | // The toolkit uses recommendations from Scalable and Modular Architecture for CSS (SMACSS)
8 | // @link http://smacss.com/book
9 | //
10 | // Site: https://minamarkham.github.io/sassy-starter
11 | // Author: Mina Markham
12 | // Email: mina@mina.codes
13 | // Date: 10/25/15
14 | // ==========================================================================
15 |
16 | // CSS Debugging
17 | //
18 | // Toggle layout debugging with CSS Pesticide.
19 | //
20 | // $pesticide-debug-outline - {boolean} adds outlines to all elements.
21 | // $pesticide-debug-depth - {boolean} adds shadows to all elements.
22 | // @source - http://pesticide.io/
23 |
24 | $pesticide-debug-outline: false;
25 | $pesticide-debug-depth: false;
26 |
27 | // ==========================================================================
28 | // $Libs
29 | // ==========================================================================
30 | @import 'libs/index';
31 |
32 | // ==========================================================================
33 | // $Utilities
34 | // ==========================================================================
35 | @import 'utilities/index';
36 |
37 | // ==========================================================================
38 | // $Base
39 | // ==========================================================================
40 | @import 'base/index';
41 |
42 | // ==========================================================================
43 | // $Layout
44 | // ==========================================================================
45 | @import 'layout/index';
46 |
47 | // ==========================================================================
48 | // $Atoms
49 | // ==========================================================================
50 | @import 'atoms/index';
51 |
52 | // ==========================================================================
53 | // $Molecules
54 | // ==========================================================================
55 | @import 'molecules/index';
56 |
57 | // ==========================================================================
58 | // $Organisms
59 | // ==========================================================================
60 | @import 'organisms/index';
61 |
62 | // ==========================================================================
63 | // $States
64 | // ==========================================================================
65 | @import 'states/index';
66 |
67 | // ==========================================================================
68 | // $Overrides
69 | // ==========================================================================
70 | @import 'overrides/index';
71 |
72 | // ==========================================================================
73 | // $Print
74 | // ==========================================================================
75 | @import 'states/print';
76 |
77 | // ==========================================================================
78 | // $Fonts
79 | // ==========================================================================
80 | @import 'utilities/fonts';
81 |
82 | // ==========================================================================
83 | // $Shame
84 | // ==========================================================================
85 | @import 'shame';
86 |
--------------------------------------------------------------------------------
/src/scss/themes/rebeccapurple.scss:
--------------------------------------------------------------------------------
1 | // Themes
2 | //
3 | // Themes can affect any of the primary types. They can
4 | // override base styles like default link colours. They can change
5 | // module elements such as colours and borders. They can affect
6 | // layout with different arrangements. They can also alter how states look.
7 | //
8 | // @source http://smacss.com/book/type-theme
9 |
10 | $theme: rebeccapurple;
11 |
12 | @import '../styles';
13 |
--------------------------------------------------------------------------------
/src/scss/utilities/_colors.scss:
--------------------------------------------------------------------------------
1 | // Color Palette
2 | // examples based on the official Sass styleguide
3 |
4 | // descriptive colors
5 | // =============
6 |
7 | $hopbush: #c69;
8 | $bouquet: #b37399;
9 | $venus: #998099;
10 | $patina: #699;
11 | $nebula: #d2e1dd;
12 | $white: #fff;
13 | $dawn-pink: #f2ece4;
14 | $wafer: #e1d7d2;
15 | $iron: #dadbdf;
16 | $regent-grey: #808c99;
17 | $pale-sky: #6b717f;
18 | $midnight-blue: #036;
19 | $black: #000;
20 |
21 | // main color palette
22 | // =============
23 | $color-primary: $hopbush;
24 | $color-secondary: $bouquet;
25 | $color-accent: $patina;
26 | $color-shadow: rgba($black, .125);
27 | $color-note: #666;
28 |
29 | // Common colors
30 | $color-background: $white;
31 | $color-background-shade: $iron;
32 | $color-background-invert: $hopbush;
33 | $color-text: darken($pale-sky, 15);
34 | $color-text-weak: $regent-grey;
35 | $color-text-strong: $midnight-blue;
36 | $color-text-heading: $regent-grey;
37 | $color-text-invert: rgba($color-background, .75);
38 | $color-text-strong-invert: $color-background;
39 |
40 | // Links
41 | $color-link: $color-primary;
42 | $color-link-hover: $midnight-blue;
43 | $color-link-visited: $bouquet;
44 |
45 | // Code
46 | $color-code: #333;
47 | $color-code-background: #f3f3f3;
48 | $color-pre: #d4d4d4;
49 | $color-pre-background: #333;
50 |
51 | // Selections
52 | $color-selection: #b3d4fc;
53 |
54 | // Messages
55 | $color-message: #f4ecbb;
56 | $color-success: #2cde2c;
57 | $color-warning: #cf8600;
58 | $color-important: #d00;
59 | $color-notice: #66b;
60 |
--------------------------------------------------------------------------------
/src/scss/utilities/_config.scss:
--------------------------------------------------------------------------------
1 | // Variables
2 |
3 | // Configurations
4 |
5 | // $fix-mqs
6 | //
7 | // Define width for browsers w/out media query support
8 | //
9 | // $fix-mqs - {boolean}
10 | // @source - http://jakearchibald.github.com/sass-ie/
11 |
12 | $fix-mqs: false !default;
13 |
14 | // $old-ie
15 | //
16 | // Turn on/off IE specific styles
17 | //
18 | // $old-ie - {boolean}
19 | // @source - http://jakearchibald.github.com/sass-ie/
20 |
21 | $old-ie: false !default;
22 |
23 | // $breakpoints
24 | //
25 | // Define major breakpoints
26 | // There are no common breakpoints; examples based on the official Sass styleguide
27 | // You'll need to define your own breakpoints to suit your design
28 | //
29 | // $breakpoints - {map}
30 |
31 | $breakpoints: (
32 | xsmall: null,
33 | small: 480,
34 | medium: 768,
35 | large: 1024,
36 | xlarge: 1280,
37 | );
38 |
39 | // $zindex
40 | //
41 | // Define z-indexes for various elements
42 | //
43 | // $zindex - {map}
44 | // @source - http://www.sitepoint.com/using-sass-maps/
45 |
46 | $zindex: (
47 | overlay: 9000,
48 | dropdown: 8000,
49 | nav: 7000,
50 | header: 6000,
51 | footer: 5000,
52 | pseduo: 4000,
53 | default: 1,
54 | bottomless-pit: -10000
55 | );
56 |
--------------------------------------------------------------------------------
/src/scss/utilities/_fonts.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // $FONT-FACE
3 | // ==========================================================================
4 |
5 | @if variable-exists(google-fonts-url) {
6 | @import url($google-fonts-url);
7 | }
8 |
9 | @if variable-exists(typefaces) {
10 | @each $file, $option in $typefaces {
11 | @font-face {
12 | font-family: map-get(map-get($typefaces, $file), family);
13 | font-style: map-get(map-get($typefaces, $file), style);
14 | font-weight: map-get(map-get($typefaces, $file), weight);
15 | src: url('../fonts/#{$file}.ttf') format('truetype'),
16 | url('../fonts/#{$file}.woff') format('woff'),
17 | url('../fonts/#{$file}.woff2') format('woff2');
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/scss/utilities/_functions.scss:
--------------------------------------------------------------------------------
1 | // Functions
2 |
3 | // Unit Conversion
4 |
5 | // strip-unit($num)
6 | //
7 | // Strip units from values.
8 | //
9 | // $num - Value to be stripped.
10 | // @returns - number
11 | // @source - http://hugogiraudel.com/2013/08/12/sass-functions
12 |
13 | @function strip-unit($num) {
14 | @return $num / ($num * 0 + 1);
15 | }
16 |
17 | // em()
18 | //
19 | // Convert pixel values to ems.
20 | //
21 | // $target - Value to convert to ems.
22 | // $context - The context the conversion is based on. Defaults to `$base-font-size`
23 | // @requires - `$base-font-size` / `@strip-units`
24 | // @returns - number
25 | // @source - http://www.pjmccormick.com/sweet-sass-function-convert-px-em
26 |
27 | @function em($target, $context: $base-font-size) {
28 | @if not unitless($target) {
29 | $target: strip-units($target);
30 | }
31 | @if not unitless($context) {
32 | $context: strip-units($context);
33 | }
34 | @if $target == 0 { @return 0 }
35 | @return $target / $context + 0em;
36 | }
37 | // rem()
38 | //
39 | // Convert pixel values to rems.
40 | //
41 | // $target - Value to convert to ems.
42 | // $context - The context the conversion is based on. Defaults to `$base-font-size`
43 | // @requires - `$base-font-size` / `@strip-units`
44 | // @returns - number
45 | // @source - http://www.pjmccormick.com/sweet-sass-function-convert-px-em
46 |
47 | @function rem($target, $context: $base-font-size) {
48 | @if not unitless($target) {
49 | $target: strip-units($target);
50 | }
51 | @if not unitless($context) {
52 | $context: strip-units($context);
53 | }
54 | @if $target == 0 { @return 0 }
55 | @return $target / $context + 0rem;
56 | }
57 |
58 | // px()
59 | //
60 | // Convery em values to pixels.
61 | //
62 | // $target - Value to convert to ems.
63 | // $context - The context the conversion is based on. Defaults to `$base-font-size`
64 | // @requires - `$base-font-size` / `@strip-units`
65 | // @returns - number
66 | // @source - http://www.pjmccormick.com/sweet-sass-function-convert-px-em
67 |
68 | @function px($target, $context: $base-font-size) {
69 | @if not unitless($target) {
70 | $pxval: strip-units($target);
71 | }
72 | @if not unitless($context) {
73 | $base: strip-units($context);
74 | }
75 | @if $target == 0 { @return 0 }
76 | @return $target * $context + 0px;
77 | }
78 |
79 | // Map Functions
80 | //
81 | // Styleguide 11.2
82 |
83 | // map-has-nested-keys($map)
84 | //
85 | // $map - Parent map to get values from.
86 | // @returns - boolean
87 | // @source - http://www.sitepoint.com/better-solution-managing-z-index-sass/
88 |
89 | @function map-has-nested-keys($map, $keys...) {
90 | @each $key in $keys {
91 | @if not map-has-key($map, $key) {
92 | @return false;
93 | }
94 | $map: map-get($map, $key);
95 | } @return true;
96 | }
97 |
98 | // map-deep-get($map)
99 | //
100 | // $map - Parent map to get values from.
101 | // @returns - `$map`
102 | // @source - http://www.sitepoint.com/better-solution-managing-z-index-sass/
103 |
104 | @function map-deep-get($map, $keys...) {
105 | @each $key in $keys {
106 | $map: map-get($map, $key);
107 | } @return $map;
108 | }
109 |
110 | // z()
111 | //
112 | // @requires - `@map-has-nested-keys` / `@map-deep-get` / `$zindex`
113 | // @returns - `map-deep-get($zindex, $indexes...)`
114 | // @source - http://www.sitepoint.com/extra-map-functions-sass/
115 |
116 | @function z($indexes...) {
117 | @if not map-has-nested-keys($zindex, $indexes...) {
118 | @warn 'No index found for `#{inspect($indexes...)}` in $zindex map. Property omitted.';
119 | } @return map-deep-get($zindex, $indexes...);
120 | }
121 |
122 | // bp()
123 | //
124 | // @requires - `@map-has-nested-keys` / `@map-deep-get` / `$breakpoints`
125 | // @returns - `map-deep-get($breakpoints, $point...)`
126 | // @source - http://www.sitepoint.com/extra-map-functions-sass/
127 |
128 | @function bp($point...) {
129 | @if not map-has-nested-keys($breakpoints, $point...) {
130 | @warn 'No breakpoint found for `#{inspect($point...)}` in $breakpoints map. Property omitted.';
131 | } @return map-deep-get($breakpoints, $point...);
132 | }
133 |
--------------------------------------------------------------------------------
/src/scss/utilities/_index.scss:
--------------------------------------------------------------------------------
1 | // ==========================================================================
2 | // $Global Settings
3 | // ==========================================================================
4 | @import 'config';
5 | @import 'colors';
6 | @import 'typography';
7 |
8 | // ==========================================================================
9 | // $Functions
10 | // ==========================================================================
11 | @import 'functions';
12 |
13 | // ==========================================================================
14 | // $Mixins
15 | // ==========================================================================
16 | @import 'mixins';
17 |
--------------------------------------------------------------------------------
/src/scss/utilities/_mixins.scss:
--------------------------------------------------------------------------------
1 | // Mixins
2 |
3 | // Reset List
4 | //
5 | // Resets default list styling.
6 | //
7 | // @usage - `@include reset-list`
8 | //
9 | // Styleguide 10.1
10 |
11 | @mixin reset-list {
12 | list-style: none;
13 | margin: 0;
14 | padding: 0;
15 | }
16 |
17 | // Hovers
18 | //
19 | // Create pseduo-classes for `:hover`, `:active`, and `:focus`.
20 | //
21 | // @usage - `@include hover`
22 | //
23 | // Styleguide 10.3
24 |
25 | @mixin hover {
26 | &:hover,
27 | &:active,
28 | &:focus { @content; }
29 | }
30 |
31 | // Feature Detection
32 | //
33 | // $feature - Feature-specific class, i.e. `cssgradients`.
34 | // @usage - `@include supported($feature)`
35 | // @usage - `@include not-supported($feature)`
36 |
37 | @mixin supported($feature) {
38 | .#{$feature} & {
39 | @content;
40 | }
41 | }
42 |
43 | @mixin not-supported($feature) {
44 | .no-js &,
45 | .no-#{$feature} & {
46 | @content;
47 | }
48 | }
49 |
50 | // Media Queries
51 | //
52 | // Allows you to use inline media queries. Includes options for `$fix-mqs`.
53 | //
54 | // $breakpoint - Desired breakpoint. Can be variable or unit.
55 | // $query - Defaults to `min-width`.
56 | // $type - Defaults to `screen`.
57 |
58 | @mixin mq($breakpoint, $query: 'min-width', $type: 'screen') {
59 | @if $fix-mqs {
60 | @if $fix-mqs >= $breakpoint { @content; }
61 | } @else {
62 | @media #{$type} and (#{$query}: #{$breakpoint}) { @content; }
63 | }
64 | }
65 |
66 | // Clearfix
67 | //
68 | // Nicolas Gallagher's micro clearfix hack
69 | //
70 | // @source - http://nicolasgallagher.com/micro-clearfix-hack/
71 |
72 | @mixin clearfix {
73 | *zoom: 1;
74 |
75 | &:before,
76 | &:after {
77 | content: '';
78 | display: table;
79 | }
80 |
81 | &:after { clear: both; }
82 | }
83 |
84 | // Hide Text
85 | //
86 | // @usage - `@include hide-text`
87 |
88 | @mixin hide-text {
89 | overflow: hidden;
90 | text-indent: 101%;
91 | white-space: nowrap;
92 | }
93 |
94 | // Hidden
95 | //
96 | // Hide from both screenreaders and browsers
97 | //
98 | // @usage - `@include hidden`
99 |
100 | @mixin hidden {
101 | display: none !important;
102 | visibility: hidden;
103 | }
104 |
105 | // Visually Hidden
106 | //
107 | // Hide only visually, but have it available for screenreaders
108 | //
109 | // @usage - `@include visuallyhidden`
110 |
111 | @mixin visuallyhidden {
112 | border: 0;
113 | clip: rect(0 0 0 0);
114 | height: 1px;
115 | margin: -1px;
116 | overflow: hidden;
117 | padding: 0;
118 | position: absolute;
119 | width: 1px;
120 |
121 | // Extends the .visuallyhidden class to allow the element to be focusable
122 | // when navigated to via the keyboard: h5bp.com/p
123 |
124 | &.focusable {
125 | &:active,
126 | &:focus {
127 | clip: auto;
128 | height: auto;
129 | margin: 0;
130 | overflow: visible;
131 | position: static;
132 | width: auto;
133 | }
134 | }
135 | }
136 |
137 | // Invisible
138 | //
139 | // Hide visually and from screenreaders, but maintain layout
140 | //
141 | // @usage - `@include invisible`
142 |
143 | @mixin invisible { visibility: hidden; }
144 |
--------------------------------------------------------------------------------
/src/scss/utilities/_typography.scss:
--------------------------------------------------------------------------------
1 | // Typography
2 |
3 | // $base-font-size
4 | //
5 | // Base font size in used in _mixins.scss
6 | //
7 | // $base-font-size - {number}
8 |
9 | $base-font-size: 16;
10 |
11 | // $base-line-height
12 | //
13 | // Base line-height in used in _mixins.scss
14 | //
15 | // $base-line-height - {number}
16 |
17 | $base-line-height: 24;
18 |
19 | // Font Stacks
20 |
21 | // $typefaces
22 | //
23 | // Configuration of webfonts imports.
24 | //
25 | // $typefaces - {map}
26 | // @family - {string}
27 | // @weight - {integer} or {keyword} i.e. 800, bold
28 | // @style - {keyword} i.e. normal, italic
29 |
30 | //$typefaces: (
31 | // 'FILENAME': (
32 | // family: 'fontname',
33 | // weight: 100,
34 | // style: normal,
35 | // ),
36 | //);
37 |
38 | // $font-family-sans-fallback
39 | //
40 | // Define font stack used for sans-serifs.
41 | //
42 | // $font-family-sans-fallback - {list}
43 |
44 | $font-family-sans-fallback: 'Arial', sans-serif;
45 |
46 | // $font-family-sans
47 | //
48 | // Define font stack used for sans-serifs.
49 | //
50 | // $font-family-sans - {list}
51 | // @requires - `$font-family-sans-fallback`
52 |
53 | $font-family-sans: 'Helvetica Neue', 'Helvetica', $font-family-sans-fallback;
54 |
55 | // $font-family-serif
56 | //
57 | // Define font stack used for serifs.
58 | //
59 | // $font-family-serif - {list}
60 |
61 | $font-family-serif: 'Georgia', 'Cambria', 'Times New Roman', 'Times', serif;
62 |
63 | // $font-family-monospace
64 | //
65 | // Define font stack used for monospaced copy.
66 | //
67 | // $font-family-monospace - {list}
68 |
69 | $font-family-monospace: 'Inconsolata', 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'Courier', monospace;
70 |
71 | // $font-family-display
72 | //
73 | // Define font stack used for headings.
74 | //
75 | // $font-family-display - {list}
76 |
77 | $font-family-display: $font-family-sans;
78 |
79 | // $font-family-default
80 | //
81 | // Define font stack used for paragraphs.
82 | //
83 | // $font-family-default - {string}
84 | // @requires - `$font-family-sans`
85 |
86 | $font-family-default: $font-family-sans;
87 |
--------------------------------------------------------------------------------