wunderfront 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/lib/wunderfront.rb +33 -0
- data/stylesheets/_wunderfront.scss +3 -0
- data/stylesheets/wunderfront/utilities/_helpers.scss +48 -0
- data/stylesheets/wunderfront/utilities/_mixins.scss +124 -0
- data/stylesheets/wunderfront/utilities/_variables.scss +61 -0
- data/templates/project/Gemfile.txt +6 -0
- data/templates/project/manifest.rb +30 -0
- metadata +79 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: cfd17b5c5110a1731bad7c2555f584838cb93c71
|
4
|
+
data.tar.gz: b860cd861f4bba505a3aa79fea5c38f92849f68c
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 3900144fad0b5a61ce454051b960ae404c3ab2de953a0ab0098d772e63bd34d64f5d6741fda49d669086837386135413db3d5d0bddfbf4ef7c6c05431531b188
|
7
|
+
data.tar.gz: fe1ff6d70caa401284a47a025b413d45cf9c8f8c088cc0d7be97f44678e0dfaa9f3fb37aa4d2eefeb06055ebb0bb607a6f85f1f0fefae974b4ce39969d2ae22a
|
data/lib/wunderfront.rb
ADDED
@@ -0,0 +1,33 @@
|
|
1
|
+
# All gems that are required for this extension to work should go here.
|
2
|
+
# These are the requires you would normally put in your config.rb file
|
3
|
+
# By default, you should always included Compass. Do not include your
|
4
|
+
# extension.
|
5
|
+
require 'sass'
|
6
|
+
require 'compass'
|
7
|
+
|
8
|
+
# This tells Compass what your Compass extension is called, and where to find
|
9
|
+
# its files
|
10
|
+
# Replace 'styleguide' with the name of your style guide. Spaces allowed.
|
11
|
+
base_directory = File.join(File.dirname(__FILE__), '..')
|
12
|
+
stylesheets_dir = File.join(base_directory, 'stylesheets')
|
13
|
+
templates_dir = File.join(base_directory, 'templates')
|
14
|
+
Compass::Frameworks.register('wunderfront', :stylesheets_directory => stylesheets_dir, :templates_directory => templates_dir)
|
15
|
+
|
16
|
+
# Version and date of version for your Compass extension.
|
17
|
+
# Replace Extemsopm with the name of your style guide
|
18
|
+
# Letters, numbers, and underscores only
|
19
|
+
# Version is a number. If a version contains alphas, it will be created as
|
20
|
+
# a prerelease version
|
21
|
+
# Date is in the form of YYYY-MM-DD
|
22
|
+
module Wunderfront
|
23
|
+
VERSION = "0.0.1"
|
24
|
+
DATE = "2014-04-11"
|
25
|
+
end
|
26
|
+
|
27
|
+
# This is where any custom SassScript should be placed. The functions will be
|
28
|
+
# available on require of your extension without the need for users to import
|
29
|
+
# any partials. Uncomment below.
|
30
|
+
|
31
|
+
# module Sass::Script::Functions
|
32
|
+
#
|
33
|
+
# end
|
@@ -0,0 +1,48 @@
|
|
1
|
+
//
|
2
|
+
// Helpers - Helping classes
|
3
|
+
// =============================================================================
|
4
|
+
|
5
|
+
@if $wk-produce-css-classes {
|
6
|
+
// CSS image replacement
|
7
|
+
.hide-text {
|
8
|
+
@include hide-text();
|
9
|
+
}
|
10
|
+
|
11
|
+
// Hide only visually, but have it available for screenreaders: h5bp.com/v
|
12
|
+
.element-invisible,
|
13
|
+
.visuallyhidden {
|
14
|
+
@include element-invisible();
|
15
|
+
}
|
16
|
+
|
17
|
+
// Extends the .visuallyhidden class to allow the element to be focusable
|
18
|
+
// when navigated to via the keyboard: h5bp.com/p
|
19
|
+
.element-invisible.focusable,
|
20
|
+
.visuallyhidden.focusable {
|
21
|
+
@include element-invisible-focusable();
|
22
|
+
}
|
23
|
+
|
24
|
+
.element-visible {
|
25
|
+
@include element-invisible-off();
|
26
|
+
}
|
27
|
+
|
28
|
+
// Toggling content
|
29
|
+
.hide {
|
30
|
+
display: none;
|
31
|
+
}
|
32
|
+
.show {
|
33
|
+
display: block;
|
34
|
+
}
|
35
|
+
|
36
|
+
// Hide visually and from screenreaders, but maintain layout
|
37
|
+
.invisible {
|
38
|
+
visibility: hidden;
|
39
|
+
}
|
40
|
+
|
41
|
+
.clearfix {
|
42
|
+
@include clearfix();
|
43
|
+
}
|
44
|
+
|
45
|
+
.clear {
|
46
|
+
clear: both;
|
47
|
+
}
|
48
|
+
}
|
@@ -0,0 +1,124 @@
|
|
1
|
+
//
|
2
|
+
// Mixins - Useful mixins to achieve several functionalities
|
3
|
+
// =============================================================================
|
4
|
+
|
5
|
+
@import "compass/utilities";
|
6
|
+
|
7
|
+
//
|
8
|
+
// Markup free clearing
|
9
|
+
// http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/
|
10
|
+
//
|
11
|
+
|
12
|
+
@mixin cf {
|
13
|
+
overflow: hidden; // New formatting context in better browsers
|
14
|
+
*overflow: visible; // Protect IE7 and older from the overflow property
|
15
|
+
*zoom: 1; // Give IE hasLayout, a new formatting context equivalent
|
16
|
+
}
|
17
|
+
|
18
|
+
|
19
|
+
//
|
20
|
+
// Image replacement
|
21
|
+
// Kellum Method: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
|
22
|
+
// Additional helpers from http://html5boilerplate.com/docs/css/
|
23
|
+
// This is also included as a SASS mixin, see: sass/custom.rb
|
24
|
+
//
|
25
|
+
|
26
|
+
@mixin ir {
|
27
|
+
// Kellum Method
|
28
|
+
display: block !important;
|
29
|
+
text-indent: 100%;
|
30
|
+
white-space: nowrap;
|
31
|
+
overflow: hidden;
|
32
|
+
// Additional helpers
|
33
|
+
border: 0; // Remove the default border from elements like <button>
|
34
|
+
font: 0/0 a; // Crush the text down to take up no space
|
35
|
+
text-shadow: none; // Remove any text shadows
|
36
|
+
color: transparent; // Hide any residual text in Safari 4 and any mobile devices that may need it
|
37
|
+
background-color: transparent; // Hide the default background color on elements like <button>
|
38
|
+
}
|
39
|
+
|
40
|
+
|
41
|
+
//
|
42
|
+
// element-invisible improved and more robust
|
43
|
+
//
|
44
|
+
@mixin element-invisible {
|
45
|
+
border: 0;
|
46
|
+
height: 1px;
|
47
|
+
overflow: hidden;
|
48
|
+
padding: 0;
|
49
|
+
position: absolute !important;
|
50
|
+
width: 1px;
|
51
|
+
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
52
|
+
clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax
|
53
|
+
}
|
54
|
+
clip: rect(1px, 1px, 1px, 1px);
|
55
|
+
}
|
56
|
+
|
57
|
+
|
58
|
+
//
|
59
|
+
// Turns off the element-invisible effect
|
60
|
+
//
|
61
|
+
@mixin element-invisible-off {
|
62
|
+
position: static !important;
|
63
|
+
clip: auto;
|
64
|
+
height: auto;
|
65
|
+
width: auto;
|
66
|
+
overflow: auto;
|
67
|
+
}
|
68
|
+
|
69
|
+
@mixin element-invisible-focusable {
|
70
|
+
@include element-invisible;
|
71
|
+
|
72
|
+
&:active,
|
73
|
+
&:focus {
|
74
|
+
@include element-invisible-off;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
|
79
|
+
//
|
80
|
+
// Shift content offscreen, can be usefull when you reall need to do this
|
81
|
+
//
|
82
|
+
@mixin offscreen {
|
83
|
+
position: absolute;
|
84
|
+
top: -99999em;
|
85
|
+
width: 1px;
|
86
|
+
height: 1px;
|
87
|
+
overflow: hidden;
|
88
|
+
outline: 0;
|
89
|
+
}
|
90
|
+
|
91
|
+
|
92
|
+
//
|
93
|
+
// Hide content from all users
|
94
|
+
//
|
95
|
+
@mixin element-hidden {
|
96
|
+
display: none;
|
97
|
+
}
|
98
|
+
|
99
|
+
|
100
|
+
//
|
101
|
+
// The word "Unpublished" displayed underneath unpublished nodes and comments
|
102
|
+
//
|
103
|
+
@mixin unpublished {
|
104
|
+
color: pink; // target browsers that do not support rgba
|
105
|
+
color: rgba(239, 170, 170, 0.4);
|
106
|
+
font-family: $impact;
|
107
|
+
font-size: 50px;
|
108
|
+
font-weight: 700;
|
109
|
+
line-height: 1.2;
|
110
|
+
height: 0;
|
111
|
+
margin: 0;
|
112
|
+
padding: 0;
|
113
|
+
overflow: visible;
|
114
|
+
text-align: center;
|
115
|
+
text-transform: uppercase;
|
116
|
+
word-wrap: break-word;
|
117
|
+
|
118
|
+
@if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
|
119
|
+
.ie6-7 &>* {
|
120
|
+
position: relative; // Otherwise these elements will appear below the "Unpublished" text.
|
121
|
+
}
|
122
|
+
}
|
123
|
+
}
|
124
|
+
|
@@ -0,0 +1,61 @@
|
|
1
|
+
// -----------------------------------------------------------------------------
|
2
|
+
// Config
|
3
|
+
// -----------------------------------------------------------------------------
|
4
|
+
$wk-produce-css-classes: false !default;
|
5
|
+
|
6
|
+
// -----------------------------------------------------------------------------
|
7
|
+
// Colors
|
8
|
+
// -----------------------------------------------------------------------------
|
9
|
+
$page: #fff; // to match the page background, default is white
|
10
|
+
$border: #ccc; // all borders set in global.styles - tables, fieldset, primary links
|
11
|
+
$highlight: #c00; // required mark, form error highlight, "new" label on comments
|
12
|
+
$ultralight: #f5f5f5; // table row even, primary link inactive tabs
|
13
|
+
$light: #eee; // table row odd active, primary link inactive hover
|
14
|
+
$medium_light: #ebebeb; // table row even active
|
15
|
+
$medium_dark: #e5e5e5; // table thead
|
16
|
+
$debug: rgba(255, 192, 203, 0.5); // Full width wrapper test
|
17
|
+
|
18
|
+
$thead: $medium_dark;
|
19
|
+
$tr_odd: $page;
|
20
|
+
$tr_even: $ultralight;
|
21
|
+
$tr_odd_active: $light;
|
22
|
+
$tr_even_active: $medium_light;
|
23
|
+
|
24
|
+
$primary_task: $ultralight;
|
25
|
+
$primary_task_hover: $light;
|
26
|
+
$primary_task_active: $page;
|
27
|
+
|
28
|
+
|
29
|
+
// Brand colours
|
30
|
+
|
31
|
+
$WunderPink: #e10075;
|
32
|
+
$WunderBlue: #58b8d1;
|
33
|
+
$WunderOrange: #ff962c;
|
34
|
+
$WunderGreen: #88B700;
|
35
|
+
|
36
|
+
$WunderGreyDark: #45535f;
|
37
|
+
$WunderGreyLight: #c0ccd6;
|
38
|
+
|
39
|
+
$WunderWhite: #f3edf0;
|
40
|
+
|
41
|
+
$WunderShadowDark: rgba(0,0,0,0.64);
|
42
|
+
$WunderShadowLight: rgba(0,0,0,0.3);
|
43
|
+
|
44
|
+
|
45
|
+
// -----------------------------------------------------------------------------
|
46
|
+
// Fonts
|
47
|
+
// -----------------------------------------------------------------------------
|
48
|
+
|
49
|
+
$sans-serif-small: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
50
|
+
$sans-serif-large: Verdana, Geneva, 'DejaVu Sans', Arial, Helvetica, sans-serif;
|
51
|
+
$sans-serif-arial-helvetica: Arial, Helvetica, sans-serif;
|
52
|
+
$calibri-candara: Calibri, Candara, Arial, Helvetica, sans-serif;
|
53
|
+
$serif-small: Garamond, Perpetua, 'Times New Roman', serif;
|
54
|
+
$serif-large: Georgia, Baskerville, Palatino, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
|
55
|
+
$modern-myriad: 'Segoe UI', 'Myriad Pro', Myriad, Arial, Helvetica, sans-serif;
|
56
|
+
$lucida: 'Lucida Sans Unicode', 'Lucida Sans', 'Lucida Grande', Verdana, Geneva, sans-serif;
|
57
|
+
$impact: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', sans-serif;
|
58
|
+
$mono: Consolas, Monaco, 'Courier New', Courier, monospace, sans-serif;
|
59
|
+
|
60
|
+
$WunderFont: "Droid Sans",Arial,sans-serif;
|
61
|
+
$WunderFontHeader: "Museo Slab",Arial,sans-serif;
|
@@ -0,0 +1,30 @@
|
|
1
|
+
description "WunderFront"
|
2
|
+
|
3
|
+
skip_compilation!
|
4
|
+
|
5
|
+
discover :javascripts
|
6
|
+
discover :images
|
7
|
+
discover :fonts
|
8
|
+
|
9
|
+
# file 'Gemfile.txt', :to => 'Gemfile'
|
10
|
+
file 'editorconfig.txt', :to => '.editorconfig'
|
11
|
+
file 'jshintrc.txt', :to => '.jshintrc'
|
12
|
+
file 'csslintrc.txt', :to => '.csslintrc'
|
13
|
+
|
14
|
+
help %Q{
|
15
|
+
Please contact :Lewis Nyman with questions:
|
16
|
+
|
17
|
+
lewis.nyman@wunderkraut.com
|
18
|
+
}
|
19
|
+
|
20
|
+
welcome_message %Q{
|
21
|
+
|
22
|
+
WunderFront
|
23
|
+
|
24
|
+
The awesome template for WunderFront.
|
25
|
+
|
26
|
+
To use the WunderFront, include the following at the top of your Sass file:
|
27
|
+
|
28
|
+
@import "wunderfront";
|
29
|
+
|
30
|
+
}
|
metadata
ADDED
@@ -0,0 +1,79 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: wunderfront
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Lewis Nyman
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2014-04-11 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: sass
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - '>='
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 3.2.3
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - '>='
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: 3.2.3
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: compass
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - '>='
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: 0.12.1
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - '>='
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: 0.12.1
|
41
|
+
description: A frontend toolkit for building websites under the WunderKraut brand.
|
42
|
+
email:
|
43
|
+
- lewis.nyman@wunderkraut.com
|
44
|
+
executables: []
|
45
|
+
extensions: []
|
46
|
+
extra_rdoc_files: []
|
47
|
+
files:
|
48
|
+
- lib/wunderfront.rb
|
49
|
+
- stylesheets/_wunderfront.scss
|
50
|
+
- stylesheets/wunderfront/utilities/_helpers.scss
|
51
|
+
- stylesheets/wunderfront/utilities/_mixins.scss
|
52
|
+
- stylesheets/wunderfront/utilities/_variables.scss
|
53
|
+
- templates/project/Gemfile.txt
|
54
|
+
- templates/project/manifest.rb
|
55
|
+
homepage: https://github.com/lewisnyman/wunderfront-toolkit
|
56
|
+
licenses:
|
57
|
+
- MIT
|
58
|
+
metadata: {}
|
59
|
+
post_install_message:
|
60
|
+
rdoc_options: []
|
61
|
+
require_paths:
|
62
|
+
- lib
|
63
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
64
|
+
requirements:
|
65
|
+
- - '>='
|
66
|
+
- !ruby/object:Gem::Version
|
67
|
+
version: '0'
|
68
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
69
|
+
requirements:
|
70
|
+
- - '>='
|
71
|
+
- !ruby/object:Gem::Version
|
72
|
+
version: 1.3.6
|
73
|
+
requirements: []
|
74
|
+
rubyforge_project: wunderfront
|
75
|
+
rubygems_version: 2.0.3
|
76
|
+
signing_key:
|
77
|
+
specification_version: 4
|
78
|
+
summary: A frontend toolkit for building websites under the WunderKraut brand.
|
79
|
+
test_files: []
|