Commit 67069b87 authored by David Haynes's avatar David Haynes 🙆
Browse files

Create masonstrap directory + grunt recognition

- less files customized
- if you want to make changes, grunt allows you to do so (maybe a readme writeup?)
parent 388c96e5
......@@ -25,7 +25,7 @@ module.exports = function (grunt) {
amelia:{}, cerulean:{}, cosmo:{}, cyborg:{}, darkly:{},
flatly:{}, journal:{}, lumen:{}, paper:{}, readable:{},
sandstone:{}, simplex:{}, slate:{}, spacelab:{}, superhero:{},
united:{}, yeti:{}, custom:{}
united:{}, yeti:{}, masonstrap:{}
},
clean: {
build: {
......@@ -93,7 +93,7 @@ module.exports = function (grunt) {
var compress = compress == undefined ? true : compress;
var isValidTheme = grunt.file.exists(theme, 'variables.less') && grunt.file.exists(theme, 'bootswatch.less');
// cancel the build (without failing) if this directory is not a valid theme
if (!isValidTheme) {
return;
......@@ -149,11 +149,11 @@ grunt.registerTask('build_scss', 'build a regular theme from scss', function(the
grunt.config('sass.dist.options.style', 'expanded');
grunt.config('sass.dist.options.precision', 8);
grunt.config('sass.dist.options.unix-newlines', true);
grunt.task.run(['concat', 'sass:dist', 'prefix:' + scssDest, 'clean:build',
compress ? 'compress_scss:' + scssDest + ':' + '<%=builddir%>/' + theme + '/bootstrap.min.css' : 'none']);
});
grunt.registerTask('prefix', 'autoprefix a generic css', function(fileSrc) {
grunt.config('autoprefixer.dist.src', fileSrc);
grunt.task.run('autoprefixer');
......@@ -223,7 +223,7 @@ grunt.registerTask('build_scss', 'build a regular theme from scss', function(the
.replace(/(\.(?![0-9])([\w\-]+);)/g, '@extend $1')
// 7. replace string literals
.replace(/~"(.*)"/g, '#{"$1"}')
// 8. replace interpolation ${var} > #{$var}
// 8. replace interpolation ${var} > #{$var}
.replace(/\$\{(.*)\}/g, '#{$$$1}')
// 9. replace spin to adjust-hue (function name diff)
.replace(/spin\(/g, 'adjust-hue(')
......
This diff is collapsed.
// Custom 3.3.5
// Bootswatch
// -----------------------------------------------------
// Navbar =====================================================================
// Buttons ====================================================================
// Typography =================================================================
// Tables =====================================================================
// Forms ======================================================================
// Navs =======================================================================
// Indicators =================================================================
// Progress bars ==============================================================
// Containers =================================================================
This diff is collapsed.
// Masonstrap 1.0
// Bootswatch
// -----------------------------------------------------
@web-font-path: "https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700";
.web-font(@path) {
@import url("@{path}");
}
.web-font(@web-font-path);
// Navbar =====================================================================
.navbar {
border: none;
font-size: 13px;
font-weight: 300;
.navbar-toggle:hover .icon-bar {
background-color: #b3b3b3;
}
&-collapse {
border-top-color: @dropdown-divider-bg;
.box-shadow(none);
}
.btn {
padding-top: 6px;
padding-bottom: 6px;
}
&-form {
margin-top: 7px;
margin-bottom: 5px;
.form-control {
height: auto;
padding: @padding-xs-vertical @padding-xs-horizontal;
}
}
&-text {
margin: 12px 15px;
line-height: 21px;
}
.dropdown {
&-menu {
border: none;
> li > a,
> li > a:focus {
background-color: transparent;
font-size: 13px;
font-weight: 300;
}
}
&-header {
color: rgba(255, 255, 255, 0.5);
}
}
&-default {
.dropdown-menu {
background-color: @navbar-default-bg;
> li > a,
> li > a:focus {
color: @navbar-default-link-color;
}
> li > a:hover,
> .active > a,
> .active > a:hover {
background-color: @navbar-default-link-hover-bg;
}
}
}
&-inverse {
.dropdown-menu {
background-color: @navbar-inverse-bg;
> li > a,
> li > a:focus {
color: @navbar-inverse-color;
}
> li > a:hover,
> .active > a,
> .active > a:hover {
background-color: @navbar-inverse-link-hover-bg;
}
}
}
}
// Buttons ====================================================================
.btn {
padding: @padding-base-vertical @padding-base-horizontal;
&-lg {
padding: @padding-large-vertical @padding-large-horizontal;
}
&-sm {
padding: @padding-small-vertical @padding-small-horizontal;
}
&-xs {
padding: @padding-xs-vertical @padding-xs-horizontal;
}
}
.btn-group {
.btn ~ .dropdown-toggle {
padding-left: 16px;
padding-right: 16px;
}
.dropdown-menu {
border-top-width: 0;
}
&.dropup .dropdown-menu {
border-top-width: 1px;
border-bottom-width: 0;
margin-bottom: 0;
}
.dropdown-toggle {
&.btn-default ~ .dropdown-menu {
background-color: @btn-default-bg;
border-color: @btn-default-border;
> li > a {
color: @btn-default-color;
}
> li > a:hover {
background-color: darken(@btn-default-bg, 8%);
}
}
&.btn-primary ~ .dropdown-menu {
background-color: @btn-primary-bg;
border-color: @btn-primary-border;
> li > a {
color: @btn-primary-color;
}
> li > a:hover {
background-color: darken(@btn-primary-bg, 8%);
}
}
&.btn-success ~ .dropdown-menu {
background-color: @btn-success-bg;
border-color: @btn-success-border;
> li > a {
color: @btn-success-color;
}
> li > a:hover {
background-color: darken(@btn-success-bg, 8%);
}
}
&.btn-info ~ .dropdown-menu {
background-color: @btn-info-bg;
border-color: @btn-info-border;
> li > a {
color: @btn-info-color;
}
> li > a:hover {
background-color: darken(@btn-info-bg, 8%);
}
}
&.btn-warning ~ .dropdown-menu {
background-color: @btn-warning-bg;
border-color: @btn-warning-border;
> li > a {
color: @btn-warning-color;
}
> li > a:hover {
background-color: darken(@btn-warning-bg, 8%);
}
}
&.btn-danger ~ .dropdown-menu {
background-color: @btn-danger-bg;
border-color: @btn-danger-border;
> li > a {
color: @btn-danger-color;
}
> li > a:hover {
background-color: darken(@btn-danger-bg, 8%);
}
}
}
}
// Typography =================================================================
.lead {
color: @gray;
}
cite {
font-style: italic;
}
blockquote {
border-left-width: 1px;
color: @gray;
&.pull-right {
border-right-width: 1px;
}
small {
font-size: @font-size-small;
font-weight: 300;
}
}
// Tables =====================================================================
table {
font-size: @font-size-small;
}
// Forms ======================================================================
label,
.control-label,
.help-block,
.checkbox,
.radio {
font-size: @font-size-small;
font-weight: normal;
}
input[type="radio"],
input[type="checkbox"] {
margin-top: 1px;
}
// Navs =======================================================================
.nav {
.open > a,
.open > a:hover,
.open > a:focus {
border-color: transparent;
}
}
.nav-tabs {
> li > a {
background-color: @btn-default-bg;
color: @text-color;
}
.caret {
border-top-color: @text-color;
border-bottom-color: @text-color;
}
}
.nav-pills {
font-weight: 300;
}
.breadcrumb {
border: 1px solid @table-border-color;
border-radius: 3px;
font-size: 10px;
font-weight: 300;
text-transform: uppercase;
}
.pagination {
font-size: @font-size-small;
font-weight: 300;
color: @gray-light;
> li {
> a,
> span {
margin-left: 4px;
color: @gray-light;
}
}
> .active {
> a,
> span {
color: #fff;
}
}
> li,
> li:first-child,
> li:last-child {
> a,
> span {
border-radius: 3px;
}
}
&-lg > li > a,
&-lg > li > span {
padding-left: 22px;
padding-right: 22px;
}
&-sm > li > a,
&-sm > li > span {
padding: 0 5px;
}
}
.pager {
font-size: @font-size-small;
font-weight: 300;
color: @gray-light;
}
.list-group {
font-size: @font-size-small;
font-weight: 300;
}
// Indicators =================================================================
.close {
opacity: 0.4;
text-decoration: none;
text-shadow: none;
&:hover,
&:focus {
opacity: 1;
}
}
.alert {
font-size: @font-size-small;
font-weight: 300;
.alert-link {
font-weight: normal;
color: #fff;
text-decoration: underline;
}
}
.label {
padding-left: 1em;
padding-right: 1em;
border-radius: 0;
font-weight: 300;
&-default {
background-color: @btn-default-bg;
color: @btn-default-color;
}
}
.badge {
font-weight: 300;
}
// Progress bars ==============================================================
.progress {
height: 22px;
padding: 2px;
background-color: #f6f6f6;
border: 1px solid #ccc;
.box-shadow(none);
}
// Containers =================================================================
.dropdown {
&-menu {
padding: 0;
margin-top: 0;
font-size: @font-size-small;
> li > a {
padding: 12px 15px;
}
}
&-header {
padding-left: 15px;
padding-right: 15px;
font-size: 9px;
text-transform: uppercase;
}
}
.popover {
color: #fff;
font-size: 12px;
font-weight: 300;
}
.panel {
&-heading,
&-footer {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
&-default {
.close {
color: @text-color;
}
}
}
.modal {
.close {
color: @text-color;
}
}
// Extras with no organizational rhyme or reason because :dhaynes: cannot into CSS (The StackOverflow Section)
a:link {
color: @brand-primary;
}
a:hover {
color: #F7941E;
}
a:active {
color: #FFCC33;
}
// Custom 3.3.6
// Masonstrap 1.0
// Variables
// --------------------------------------------------
......@@ -10,15 +10,15 @@
@gray-base: #000;
@gray-darker: lighten(@gray-base, 13.5%); // #222
@gray-dark: lighten(@gray-base, 20%); // #333
@gray: lighten(@gray-base, 33.5%); // #555
@gray-light: lighten(@gray-base, 46.7%); // #777
@gray: #6f6f6f; // #555
@gray-light: lighten(@gray-base, 60%); // #999
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
@brand-primary: #006633;
@brand-success: #43ac6a;
@brand-info: #00909E;
@brand-warning: #F37021;
@brand-danger: #AC1D37;
//== Scaffolding
......@@ -28,12 +28,12 @@
//** Background color for `<body>`.
@body-bg: #fff;
//** Global text color on `<body>`.
@text-color: @gray-dark;
@text-color: @gray-darker;
//** Global textual link color.
@link-color: @brand-primary;
//** Link hover color set via `darken()` function.
@link-hover-color: darken(@link-color, 15%);
@link-hover-color: darken(@link-color, 10%);
//** Link hover decoration.
@link-hover-decoration: underline;
......@@ -42,15 +42,15 @@
//
//## Font, line-height, and color for body text, headings, and more.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-base: 15px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-small: 12px; // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
......@@ -60,13 +60,13 @@
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
//** Unit-less `line-height` for use in components like buttons.
@line-height-base: 1.428571429; // 20/14
@line-height-base: 1.4;
//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
//** By default, this inherits from the `<body>`.
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-font-family: @font-family-base;
@headings-font-weight: 300;
@headings-line-height: 1.1;
@headings-color: inherit;
......@@ -87,27 +87,27 @@
//
//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
@padding-base-vertical: 6px;
@padding-base-vertical: 8px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-large-vertical: 16px;
@padding-large-horizontal: 20px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-small-vertical: 8px;
@padding-small-horizontal: 12px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@padding-xs-vertical: 4px;
@padding-xs-horizontal: 6px;
@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@border-radius-base: 0;
@border-radius-large: 0;
@border-radius-small: 0;
//** Global color for active items (e.g., navs or dropdowns).
@component-active-color: #fff;
@component-active-color: @navbar-default-link-color;
//** Global background color for active items (e.g., navs or dropdowns).
@component-active-bg: @brand-primary;
......@@ -144,8 +144,8 @@
@btn-font-weight: normal;