--- /dev/null
+!function() {
+
+var $currentText = $('[data-docs-code-current]');
+var $toggleButtons = $('[data-docs-code-toggle]');
+
+$toggleButtons.click(function() {
+ $('body').toggleClass('is-inky-enabled');
+
+ if ($('body').hasClass('is-inky-enabled')) {
+ $currentText.text('Inky');
+ $toggleButtons.text('Switch to HTML');
+ }
+ else {
+ $currentText.text('HTML');
+ $toggleButtons.text('Switch to Inky');
+ }
+});
+
+}();
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="./node_modules/motion-ui/dist/motion-ui.css" /> -->
</head>
- <body>
+ <body class="docs-emails">
<div class="off-canvas-wrapper"><div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas-content" data-off-canvas-content>
<!-- Info Banner For Announcements or Links -->
- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
+ <!-- <a href="http://zurb.com/article/1416/foundation-6-is-here" id="notice">
<div class="info">
<h5>Foundation 6 is here!</h5>
</div>
- </a>
+ </a> -->
{{> navigation}}
{{> mobile-navigation}}
</script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/what-input/1.2.3/what-input.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.0.5/foundation.min.js"></script>
<script src="https://cdn.jsdelivr.net/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/zeroclipboard/2.2.0/ZeroClipboard.min.js"></script>
Check out this basic button:
```inky
- <center>
- <row>
- <column>
- <table class="button">
- <tr>
- <td>
- <a href="#">Button!</a>
- </td>
- </tr>
- </table>
- </column>
- </row>
- </center>
+<center>
+ <row>
+ <columns>
+ <button href="zurb.com">Button</button>
+ </columns>
+ </row>
+</center>
```
You can quickly modify the size of our buttons by adding these classes:
```inky
- <center>
- <row>
- <column>
- <table class="button tiny">
- <tr>
- <td>
- <a href="#">Button!</a>
- </td>
- </tr>
- </table>
- </column>
- </row>
- <row>
- <column>
- <table class="button small">
- <tr>
- <td>
- <a href="#">Button!</a>
- </td>
- </tr>
- </table>
- </column>
- </row>
- <row>
- <column>
- <table class="button large">
- <tr>
- <td>
- <a href="#">Button!</a>
- </td>
- </tr>
- </table>
- </column>
- </row>
- </center>
+<center>
+ <row>
+ <columns>
+ <button href="zurb.com" class="tiny">Tiny Button</button>
+ </columns>
+ </row>
+ <row>
+ <columns>
+ <button href="zurb.com" class="small">Small Button</button>
+ </columns>
+ </row>
+ <row>
+ <columns>
+ <button href="zurb.com" class="large">Large Button</button>
+ </columns>
+ </row>
+</center>
```
You can also change the color using our color classes here:
```inky
- <center>
- <row>
- <column>
- <table class="button secondary">
- <tr>
- <td>
- <a href="#">Button!</a>
- </td>
- </tr>
- </table>
- </column>
- </row>
- <row>
- <column>
- <table class="button success">
- <tr>
- <td>
- <a href="#">Button!</a>
- </td>
- </tr>
- </table>
- </column>
- </row>
- <row>
- <column>
- <table class="button warning">
- <tr>
- <td>
- <a href="#">Button!</a>
- </td>
- </tr>
- </table>
- </column>
- </row>
- </center>
+<center>
+ <row>
+ <columns>
+ <button href="zurb.com" class="secondary">Secondary Button</button>
+ </columns>
+ </row>
+ <row>
+ <columns>
+ <button href="zurb.com" class="success">Success Button</button>
+ </columns>
+ </row>
+ <row>
+ <columns>
+ <button href="zurb.com" class="warning">Warning Button</button>
+ </columns>
+ </row>
+ <row>
+ <columns>
+ <button href="zurb.com" class="alert">Alert Button</button>
+ </columns>
+ </row>
+</center>
```
-<ul class="vertical menu docs-menu" id="docs-menu">
- <p class="docs-version-number">
- <span data-docs-version></span>
- <a href="https://github.com/zurb/foundation-sites/releases/" target="_blank">(Changelog)</a>
+<ul class="vertical menu docs-nav" id="docs-menu">
+ <p class="docs-nav-version">
+ <span data-docs-version>v2.0.0-rc.2</span>
+ <a href="https://github.com/zurb/foundation-emails/releases/" target="_blank">(Changelog)</a>
</p>
- <li class="docs-menu-title">Components</li>
+ <li class="docs-nav-title">Components</li>
<li><a href="">Alignment</a></li>
<li><a href="">Block Grid</a></li>
<li><a href="button.html">Button</a></li>
<li><a href="">Callout</a></li>
<li><a href="">Global</a></li>
- <li class="docs-menu-title">Grid</li>
+ <li class="docs-nav-title">Grid</li>
<li><a href="">Grid</a></li>
<li><a href="">Sass</a></li>
<li><a href="">Inline Lists</a></li>
// Copies static documentation assets
gulp.task('copy', function() {
- return gulp.src(['docs/assets/**/*', '!docs/assets/scss/**/*'])
+ return gulp.src(['docs/assets/**/*', '!docs/assets/scss/**/*', '!docs/assets/js/**/*'])
.pipe(gulp.dest('_build/assets'));
});
.pipe(gulp.dest('_build/assets/css'));
});
+// Compiles documentation JavaScript
+gulp.task('javascript:docs', function() {
+ return gulp.src('docs/assets/js/**/*.js')
+ .pipe($.concat('docs.js'))
+ .pipe(gulp.dest('_build/assets/js'));
+});
+
// Generates a Sass settings file from the current codebase
gulp.task('settings', function() {
octophant('scss/**/*.scss', {
// Runs the entire build process
gulp.task('build', function(cb) {
- sequence('clean', ['copy', 'html', 'sass'], cb);
+ sequence('clean', ['copy', 'html', 'sass', 'javascript:docs'], cb);
});
// Runs the build process, spins up a server, and watches for file changes
gulp.task('default', ['server'], function() {
gulp.watch('docs/**/*', ['html', browser.reload]);
- gulp.watch('docs/assets/scss/**/*', ['sass:docs', browser.reload]);
+ gulp.watch(['docs/assets/scss/**/*', 'node_modules/foundation-docs/scss/**/*'], ['sass:docs', browser.reload]);
gulp.watch('scss/**/*.scss', ['sass:foundation', browser.reload]);
});
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.3.1",
"gulp-cached": "^1.1.0",
+ "gulp-concat": "^2.6.0",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^2.0.0",
"gulp-inject": "^1.2.0",
projects / thirdparty / foundation / foundation-emails.git / commitdiff
