From 0c90686a343b86dbbe818df21b0759c958cfbf98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20Trukenm=C3=BCller?= Date: Sun, 10 Feb 2019 17:53:20 +0100 Subject: [PATCH] revised screenshots --- src/assets/img/soundcheck_4_percussion.png | Bin 0 -> 18310 bytes src/assets/scss/app.scss | 2 +- src/assets/scss/components/_footer.scss | 8 +- src/assets/scss/global/_layout.scss | 8 +- src/assets/scss/pages/index.scss | 9 - src/assets/scss/pages/screenshots.scss | 24 + src/data/menu-items.json | 8 +- src/pages/screenshots.html | 669 +++++++++++---------- src/pages/tutorial-3.html | 2 +- src/styleguide/index.md | 355 ----------- src/styleguide/template.html | 135 ----- 11 files changed, 387 insertions(+), 833 deletions(-) create mode 100644 src/assets/img/soundcheck_4_percussion.png delete mode 100644 src/assets/scss/pages/index.scss create mode 100644 src/assets/scss/pages/screenshots.scss delete mode 100644 src/styleguide/index.md delete mode 100644 src/styleguide/template.html diff --git a/src/assets/img/soundcheck_4_percussion.png b/src/assets/img/soundcheck_4_percussion.png new file mode 100644 index 0000000000000000000000000000000000000000..7752d21df0398b10d05fc53a83d3ea5a42e902a9 GIT binary patch literal 18310 zcmaicbyyYa8t)*=0_hY&+KZ95WUv06YMsB}CO+Q@3W^UZ|N|qaa8LB&Ior9i%Y|$BK$J?Ozb6 z$Vp-#DL12;;Sl;7yx*(|?vNAxQm-bOr8_6RA^V#lJ~T38~L;pDwRS))4EFlj@WeBfdh5c!h>^yZwNDoO*8vB z@>Bg$)d6no`=rCwk9`#b$79cFq@?*?u&A;GgkDOtY)M!Ydq^t=K=V+$oDuT);R2L| z343Kd6Q%q|$@phY%?Ik%VKE==I})(Zpj0kHWyEF{A7ay`aLWdwkG7bkqhYz?5+C(a zo>~K&<6qjp@|Gzozs2itvR3K&qyxJr-UwVAsi$kIN=@GxWbUxspMFxO&8(QF2=Agn z2H-NDuJn{?3HlLVUI*fc{bVIQ+Wz?XS}o=NTG5v?+Ni}{)mX@!;^y*d{yrLUO^YHb z6&8~oTaOGgHMNJK)m-g0RnLK=-Q^EmAobFL@|;Z!o99^=$Np_WT~w;CIE0+vj@Wvt zN)H=S(x1AK09HS_%;o|oAJ5r@dKrc%_YhtT@!#(oJ+Ukf*NUc*_Sj3`e?6AhN8jVq z;I{f>RGM2}pRM!eSm%+YuT#tya?TKy%SfT+@NxG_wz1aA4C7mbM)icwA+-`~1w8dm z5MLi;o+n#E@UpJbAjd|bD58j@xWQGcTB`lmmc?uv{fIX}dA-oqgYR7?8|uHHn( zcVa_<3p*=3-*Cr5f~{Dw=(dzG*$DGFo27TyEVWm18KvbUJ~KmY>&#%06KCL6;)$Vt z!9a|24PCo=_3{^=<-94l3t-W8c9nhx?^pD4B!4#j)9sWWmE|xes#%mH>FC;s+bhwV z4}~yK*H#hKle^0~2?!4*o5D9D-zcR`UX)Q&GcAVkYv)hj`!=5Uo<5<`OZnC?%|`VO zzE}LkNd_}Eh2HFCD{^L=dCw#_Zj`#ct(f{1;WFN#^xTk-j=k#&EIeCyr^qfDCkx(M z70p%ooL)-e>9)_Y9>zJB`to^1iYS_CP(@VNwS!d@IxEX3~os(tF1Virb9LCirZ(CcZ?H6q;0b;W;7 zYqG-&c9lkhUtQ(X4r8}FRoOALfI-^gNIebu9DU*#9wZ!-dyIVmb31wSlf3fcB)feL zO}TN>eM7)=?zB0d@i@ftnJ%q#^g=P`=r?b%H^S;Fuy@dqcq_;p*L>H0`+~~R&Wq8- z&EtLXxn@)#amr%lc=g(LCZc{pi)`Z23OVV?b4i(jY}A+EeJQA!vPb9zrb7pAX*riJ zE}gwnQ-_~f7LEv?d>hOho#mVJbrIG(+z>CsIE97;Kwz+#vg3OQ^P#84Cl^M5Z=V<{ zZka$sXlZ}B`teWJFzW|duX2RuTWQNsBI}M8{Q2o~XKs^Va|wQ~ODm=hDiVkk;qvX9|o|`>1~kD5tplN7fM#A1fD^#}Or}z{Kn42fdNh{@5J9FiRy~E9N)`GADRewIP zvHZBjxx6Zm<(faqE}MPsa=4FmznOEmcdft#BjYr4o5K+eyP(jlC}pHsHid|yF93%T zK&)nKuHV0=+(iL&2AiCCaFwa@6kQX281R>0d0Fz*j$)JCot}!c4BS(=!q?cI&WPq= z{~>;T9N#q&5w3X~X#A!auTCeBSL|KjD7VMHdO>78;h_|*hwPiGwz!{wWK3TKE4Ezo zdPZVuE&Jm9OgZTaviX9EgMrgPD?L_n^~P6|1e8*bC&<3t5#ikCcUy2g zCbI@u3KU!iH5wfbnXv9#;7aX{k~HiWTrDJj2P`=o{h%QUX92;cDYyy6FE||0xg-kr4>W2yJV⪻K{L;J4C~_EUdRB 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 LAW=zG>~Pe literal 0 HcmV?d00001 diff --git a/src/assets/scss/app.scss b/src/assets/scss/app.scss index 611a5b5..eebdf68 100644 --- a/src/assets/scss/app.scss +++ b/src/assets/scss/app.scss @@ -76,5 +76,5 @@ @import 'components/footer'; // pages -@import 'pages/index'; +@import 'pages/screenshots'; @import 'pages/midicapl'; diff --git a/src/assets/scss/components/_footer.scss b/src/assets/scss/components/_footer.scss index f6bf0ca..f10de7b 100644 --- a/src/assets/scss/components/_footer.scss +++ b/src/assets/scss/components/_footer.scss @@ -1,19 +1,19 @@ footer { background-color: $black; - min-height: 3rem; + min-height: 3.0rem; padding: 0.3rem; nav { - // border: 1px black solid; + border-top: 0.3rem $black solid; ul { margin: 0; padding: 0; list-style: none; - // border: 1px red solid; li { background-color: $white; color: $black; display: inline-block; - border: 3px black solid; + border-left: 0.2rem $black solid; + border-right: 0.2rem $black solid; } } } diff --git a/src/assets/scss/global/_layout.scss b/src/assets/scss/global/_layout.scss index c7daf4f..bb3aad8 100644 --- a/src/assets/scss/global/_layout.scss +++ b/src/assets/scss/global/_layout.scss @@ -30,12 +30,6 @@ a { } // keep as much distance as the top bar is high -section, .anchor { +section { padding-top: 62px; } - -.inner-link-arrow { - font-family: monospace; - font-weight: bold; - font-size: 1.3rem; -} diff --git a/src/assets/scss/pages/index.scss b/src/assets/scss/pages/index.scss deleted file mode 100644 index a8f05e7..0000000 --- a/src/assets/scss/pages/index.scss +++ /dev/null @@ -1,9 +0,0 @@ - -// .index { - - // img { - // vertical-align: middle; - // } - - -// } diff --git a/src/assets/scss/pages/screenshots.scss b/src/assets/scss/pages/screenshots.scss new file mode 100644 index 0000000..6800a5b --- /dev/null +++ b/src/assets/scss/pages/screenshots.scss @@ -0,0 +1,24 @@ + +.screenshots { + $img-padding: 0.4rem; + .cell { + &.grid-x { + &.grid-padding-x { + img { + padding-top: $img-padding; + } + } + } + &.large-6 { + padding-top: $img-padding; + } + #last-element { + padding-bottom: $img-padding; + } + } + + h3 { + // section is already handled by _layout.scss + padding-top: 62px; + } +} diff --git a/src/data/menu-items.json b/src/data/menu-items.json index 22be4ae..1319733 100644 --- a/src/data/menu-items.json +++ b/src/data/menu-items.json @@ -29,6 +29,10 @@ "title": "Player", "url": "/screenshots.html#player", "menu-items": [ + { + "title": "Widgets", + "url": "/screenshots.html#player-widgets" + }, { "title": "Channel Details", "url": "/screenshots.html#player-channel" @@ -60,8 +64,8 @@ "url": "/screenshots.html#info-sequence" }, { - "title": "Midica Tab", - "url": "/screenshots.html#info-version" + "title": "About Tab", + "url": "/screenshots.html#info-about" } ] } diff --git a/src/pages/screenshots.html b/src/pages/screenshots.html index 76b752f..b35c1d9 100644 --- a/src/pages/screenshots.html +++ b/src/pages/screenshots.html @@ -3,393 +3,452 @@ meta-title: Midica - Screenshots --- -
-
+
+

Screenshots

-
+

Main Window

- The main window consists of different sections. +

+ The main window consists of different sections. +

-
+

Configuration Section

- In the configuration section you can configure the follwing things: -
-
-
-
- -
-
- Language: GUI language +

+ In the configuration section you can configure the follwing things: +

-
-
-
- -
-
- Note System: Which set of note names to use -
-
-
-
- -
-
- Half Tone Symbol: Which symbol to use for half tones -
-
-
-
- -
-
- Octave Naming: How to name notes in different octaves +
+
+ +
+
+

Language: GUI language

+
-
-
-
- +
+
+ +
+
+

Note System: Which set of note names to use

+
-
- Percussion Shortcuts: Which language to use for percussion instruments +
+
+ +
+
+

Half Tone Symbol: Which symbol to use for half tones

+
-
-
-
- +
+
+ +
+
+

Octave Naming: How to name notes in different octaves

+
-
- Syntax: Which keywords and case (lower/upper) to use for the MidicaPL syntax +
+
+ +
+
+

Percussion Shortcuts: Which language to use for percussion instruments

+
-
-
-
- +
+
+ +
+
+

Syntax: Which keywords and case (lower/upper) to use for the MidicaPL syntax

+
-
- Instrument Shortcuts: Which language to use for chromatic instruments +
+
+ +
+
+

Instrument Shortcuts: Which language to use for chromatic instruments

+
-
-
-
+

Import Section

-
- -
-
- Import MidicaPL file: Choose the source code file -
- The encoding can also be chosen. This is only relevant for text messages like lyrics etc. -
-
-
-
- -
-
- Import MIDI file: Choose the MIDI file -
- The default encoding can also be chosen. - This is only used if the encoding cannot be found in the file itself. - It is only relevant for text messages like lyrics etc. +
+
+ +
+
+

Import MidicaPL file: Choose the source code file

+

The encoding can also be chosen. This is mainly relevant for text messages like lyrics etc.

+
-
-
-
- +
+
+ +
+
+

Import MIDI file: Choose the MIDI file

+

+ The default encoding can also be chosen. + This is only used if the encoding cannot be found in the file itself. + It is only relevant for text messages like lyrics etc. +

+
-
- Load Soundfont: Choose the SF2 file +
+
+ +
+
+

Load Soundfont: Choose the SF2 file

+
-
-
-
+

Export Section

-
-
-
- -
-
- Export MIDI file: Choose the file name -
- The encoding can also be chosen. This is only relevant for text messages like lyrics etc. -
- It doesn't need to be the same encoding as in the imported sequence. +
+
+ +
+
+

Export MIDI file: Choose the file name

+

The encoding can also be chosen. This is only relevant for text messages like lyrics etc.

+

It doesn't need to be the same encoding as in the imported sequence.

+
-
-
-
- -
-
- Export MidicaPL source code: Choose the file name -
- The chosen encoding is used for the complete file. -
- It doesn't need to be the same encoding as in the imported sequence. -
- This feature is not yet implemented! +
+
+ +
+
+

Export MidicaPL source code: Choose the file name

+

The chosen encoding is used for the complete file.

+

It doesn't need to be the same encoding as in the imported sequence.

+

This feature is not yet implemented!

+
-
-
+
+

Player

- The player can be opened from the main window by clicking Start Player. A sequence must have been loaded before. +

The player can be opened from the main window by clicking Start Player. A sequence must have been loaded before.

- The parts of the player need a bit more explanation. +

The parts of the player need a bit more explanation.

-
-
-
- -
-
- Memorize remembers the current MIDI tick and writes it into the text field. -
- Go jumps to the MIDI tick in the text field. -
- The text field can also be edited manually before jumping to a new position. -
-
-
-
- -
-
- Ticks & Times -
- Top left: Current MIDI tick in the sequence -
- Bottom left: Current time in the sequence -
- Top right: Total ticks of the sequence -
- Bottom right: Total time of the sequence +
+

Player Widgets

-
-
-
- +
+
+ +
+
+

+ Memorize remembers the current MIDI tick and writes it into the text field. +
+ Go jumps to the MIDI tick in the text field. +
+ The text field can also be edited manually before jumping to a new position. +

+
-
- Progress Bar: Shows the current position of the sequence in MIDI ticks. Depending on the total number of ticks the unit will be adjusted automatically. - In the example image it's k for kilo. So 150 k means Tick 150000 +
+
+ +
+
+

+ Ticks & Times +
+ Top left: Current MIDI tick in the sequence +
+ Bottom left: Current time in the sequence +
+ Top right: Total ticks of the sequence +
+ Bottom right: Total time of the sequence +

+
-
-
-
- -
-
- Control Elements -
- Play begins or resumes playing from the current position. Only visible when not playing. -
- Pause stops playing but keeps the current position. Only visible when playing. -
- Stop stops playing and resets the current position to 0. -
- << respectively < decrements the current position by 16 respectively 4 quarter notes. -
- > respectively >> increments the current position by 4 respectively 16 quarter notes. +
+
+ +
+
+

+ Progress Bar: Shows the current position of the sequence in MIDI ticks. Depending on the total number of ticks the unit will be adjusted automatically. + In the example image it's k for kilo. So 150 k means Tick 150000 +

+
-
-
-
- -
-
- Sliders -
- Vol changes the basic volume for all channels. -
- Tempo changes the tempo of the sequence. Normal tempo is 1.0, more is faster, less is slower. -
- Transpose increments or decrements the key of the sequence. +
+
+ +
+
+

+ Control Elements +
+ Play begins or resumes playing from the current position. Only visible when not playing. +
+ Pause stops playing but keeps the current position. Only visible when playing. +
+ Stop stops playing and resets the current position to 0. +
+ << respectively < decrements the current position by 16 respectively 4 quarter notes. +
+ > respectively >> increments the current position by 4 respectively 16 quarter notes. +

+
-
-
-
- +
+
+ +
+
+

+ Sliders +
+ Vol changes the basic volume for all channels. +
+ Tempo changes the tempo of the sequence. Normal tempo is 1.0, more is faster, less is slower. +
+ Transpose increments or decrements the key of the sequence. +

+
-
- Reparse -
- Parses the loaded MidicaPL or MIDI file again and rebuilds the sequence. This is useful when editing the source file. +
+
+ +
+
+

+ Reparse +
+ Parses the loaded MidicaPL or MIDI file again and rebuilds the sequence. This is useful when editing the source file. +

+
-
-
-
+

Channel Details

Overview

-
- -
-
-
+
+
+ +
+
- This section is an overview over the activity of all channels. - It consists of the following columns: +

+ This section is an overview over the activity of all channels. + It consists of the following columns: +

-
C
-
- Channel Number – Midica uses numbers from 0 to 15 whereas most other applications use numbers from 1 to 16. - So here the percussion channel is 9 instead of 10. +
+
C
+
+

+ Channel Number – Midica uses numbers from 0 to 15 whereas most other applications use numbers from 1 to 16. + So here the percussion channel is 9 instead of 10. +

+
-
-
-
M
-
- Mute – A muted channel does not produce any sound. +
+
M
+
+

Mute – A muted channel does not produce any sound.

+
-
-
-
S
-
- Solo – If at least one channel is configured as Solo than only those channels produce sound which are also configured as Solo. +
+
S
+
+

Solo – If at least one channel is configured as Solo than only those channels produce sound which are also configured as Solo.

+
-
-
-
A
-
- Activity – determines if one or more keys are currently playing in this channel; black: inactive (no key is currently played); red: active (at least one key is currently played) +
+
A
+
+

Activity – determines if one or more keys are currently playing in this channel; black: inactive (no key is currently played); red: active (at least one key is currently played)

+
-
-
-
P
-
- Program Number – The instrument's program number as defined by the General MIDI standard +
+
P
+
+

Program Number – The instrument's program number as defined by the General MIDI standard

+
-
-
-
B
-
- Bank Number – The bank number as defined by the General Standard extension of MIDI and also by General MIDI Level 2 +
+
B
+
+

Bank Number – The bank number as defined by the General Standard extension of MIDI and also by General MIDI Level 2

+
-
-
-
Instrument
-
- Instrument name like it's named in the currently loaded soundfont +
+
Instrument
+
+

Instrument name like it's named in the currently loaded soundfont

+
-
-
-
Comment
-
- Channel comment – The text given by the MIDI meta message Instrument Name, if available. +
+
Comment
+
+

Channel comment – The text given by the MIDI meta message Instrument Name, if available.

+
-
-

Details

-
- -
-
- The details of a channel are shown by clicking the channel number. The following data can be viewed or changed: -
- Volume – the channel volume difference to the base volume, configured in the slider area of the player view. - If the value is negative, the channel volume is decremented by this value. Otherwise it's incremented. -
- Note History – with a white background: the last played notes from the past; with a yellow background: the next notes in the future. -
- Columns: -
- Number – Note number as defined by General MIDI -
- Name – Note (or percussion instrument) name as configured in the main window -
- Volume – Velocity of the note -
- Tick – MIDI tick +
+
+ +
+
+
+

The details of a channel are shown by clicking the channel number. The following data can be viewed or changed:

+
+
+
+ Volume +
+
+

+ the channel volume difference to the base volume, configured in the slider area of the player view. + If the value is negative, the channel volume is decremented by this value. Otherwise it's incremented. +

+
+
+
+
Note History
+
+

+ with a white background: the last played notes from the past;
+ with a yellow background: the next notes in the future. +

+
+
+
+
+

Table Columns:

+
+
Number
+
+

Note number as defined by General MIDI

+
+
+
+
Name
+
+

Note (or percussion instrument) name as configured in the main window

+
+
+
+
Velocity
+
+

Velocity of the note

+
+
+
+
Tick
+
+

MIDI tick

+
+
+
-
-
-
+

Karaoke Mode

-
+
-
- By checking Show Lyrics the karaoke mode is shown instead of the channel details. -
+
+

By checking Show Lyrics the karaoke mode is shown instead of the channel details.

  • By default the lyrics are shown in black
  • A quarter note before appearing, a syllable is turned to italic and black
  • When a syllable appears, it is shown in red
-
-

Soundcheck

- A click on the Soundcheck button in the player window opens the soundcheck window. This can be used to check the sound of the instruments in the currently loaded soundfont. -
+ +
- +

Soundcheck

- Each channel can have different instruments or drum kits. This information is also read from the soundfont. - Depending on the chosen channel only the supported drum kits or instruments are displayed. +

+ A click on the Soundcheck button in the player window opens the soundcheck window. + This can be used to check the sound of the instruments in the currently loaded soundfont. +

+
+
+
+ +
+
+

+ Each channel can have different instruments or drum kits. This information is also read from the soundfont. + Depending on the chosen channel only the supported drum kits or instruments are displayed. +

+
- The percussion channel contains only drum kits. Depending on the soundfont it can contain single channel and multi channel drum kits. +

The percussion channel contains only drum kits.

- Other channels normally only contain chromatic instruments. But in some soundfonts they can also contain multi channel drum kits. -
- The chromatic instruments are grouped in categories like defined in the General MIDI standard. +

Other channels usually only contain chromatic instruments. But in some soundfonts they can also contain multi channel drum kits.

+

The chromatic instruments are grouped in categories like defined in the General MIDI standard.

- If a chromatic instrument is chosen, the Note list contains normal notes. -
- If a drum kit is chosen, it contains percussion instruments. +

If a chromatic instrument is chosen, the Note list contains normal notes.

+

If a drum kit is chosen, it contains percussion instruments.

-
-
+
+ +
+ +

Info Window

- The Info window can be reached by clicking Info & Configuration Details, either from the main window or from the player. +

The Info window can be reached by clicking Info & Configuration Details, either from the main window or from the player.

-
+

Configuration Tab

- In the Configuration tab you can view the current configuration, mainly used for the interpretation of MidicaPL source files. +

In the Configuration tab you can view the current configuration, mainly used for the interpretation of MidicaPL source files.

@@ -403,13 +462,11 @@

Configuration Tab

-
-
-
+

Soundfont Tab

- The Soundfont tab can be used to analyze the currently loaded soundfont. +

The Soundfont tab can be used to analyze the currently loaded soundfont.

@@ -423,10 +480,7 @@

Soundfont Tab

-
- -
-
+

Sequence Tab

@@ -453,37 +507,14 @@

Sequence Tab

-
-
-
-

Midica Tab

+
+

About Tab

- The Midica tab shows information about the version, date, etc. + The About tab shows information about the version, date, etc.
- +
-
+
- - - diff --git a/src/pages/tutorial-3.html b/src/pages/tutorial-3.html index 9f41e7d..16f0217 100644 --- a/src/pages/tutorial-3.html +++ b/src/pages/tutorial-3.html @@ -259,7 +259,7 @@

Predefined Chords

In this example 4 chords are defined and later used in channel 1. In the same time, channel 0 plays the voice of the singer using normal notes and pauses. (Remember, a - stands for a pause.) Chords and pauses are channel commands, just like notes. So they also need a channel number and a length definition. And they can have the - same channel options ↓. + same channel options.

diff --git a/src/styleguide/index.md b/src/styleguide/index.md deleted file mode 100644 index 3d70042..0000000 --- a/src/styleguide/index.md +++ /dev/null @@ -1,355 +0,0 @@ -# The Grid - -

Problem: You've got tons of content, each needing different sized cells, and don't know how to quick and easily get it all done. Solution: The awesome XY grid!

- ---- - -## Overview - -The grid is built around two key elements: grid-x and cells. grid-container create a max-width and contain the grid, and cells create the final structure. Everything on your page that you don't give a specific structural style to should be within a grid-x or cell. - ---- - -## Nesting - -In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells. - ---- - -## How to Use - -Using this framework is easy. Here's how your code will look when you use a series of `
` tags to create cells. - -```html -
-
...
-
...
-
-``` - -
-
4
-
4
-
4
-
-
-
3
-
6
-
3
-
-
-
2
-
8
-
2
-
-
-
3
-
9
-
-
-
4
-
8
-
-
-
5
-
7
-
-
-
6
-
6
-
- ---- - -## Nesting grid-x - -In the Grid you can nest cells down as far as you'd like. Just embed grid-x inside cells and go from there. Each embedded grid-x can contain up to 12 cells. - -```html -
-
8 -
-
8 Nested -
-
8 Nested Again
-
4
-
-
-
4
-
-
-
4
-
-``` - -
-
8 -
-
8 Nested -
-
8 Nested Again
-
4
-
-
-
4
-
-
-
4
-
- ---- - -## Small Grid - -As you've probably noticed in the examples above, you have access to a small, medium, and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding medium or large grid classes. - -```html -
-
2
-
10, last
-
-
-
3
-
9, last
-
-``` - -
-
2
-
10, last
-
-
-
3
-
9, last
-
- - - -# Colors - -

Below you can find the different values we created that support the primary color variable you can change at any time in \_settings.scss

- ---- - -
-
-
- - #2199e8 -
-
-
-
- - #3adb76 -
-
-
-
- - #ffae00 -
-
-
-
- - #ec5840 -
-
-
-
- - #0a0a0a -
-
-
- - - -# Typography - -

This design uses Helvetica Neue for headings and paragraph text.

- ---- - -## Headings - -Headings are used to denote different sections of content, usually consisting of related paragraphs and other HTML elements. They range from h1 to h6 and should be styled in a clear hierarchy (i.e., largest to smallest) - ---- - -## Paragraphs - -Paragraphs are groups of sentences, each with a lead (first sentence) and transition (last sentence). They are block level elements, meaning they stack vertically when repeated. Use them as such. - ---- - -

Heading Level 1

- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - -

Heading Level 2

- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - -

Heading Level 3

- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - -

Heading Level 4

- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - -
Heading Level 5
- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - -
Heading Level 6
- -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic quibusdam ratione sunt dolorum, qui illo maxime doloremque accusantium cum libero eum, a optio odio placeat debitis ullam aut non distinctio. - - - -# Buttons - -

Buttons are tied to an action of some kind, whether that button is on a cheese dispenser or launches the rocket that you're strapped to. On the web, we follow similar conventions.

- ---- - -## Primary Buttons - -These buttons are primary calls to action and should be used sparingly. Their size can be adjusted with the `.tiny`, `.small`, and `.large` classes. - -```html_example -Large button -Regular button -Small button -Tiny button -``` - ---- - -## Secondary Buttons - -These buttons are used for less important, secondary actions on a page. - -```html_example -Large button -Regular button -Small button -Tiny button -``` - - - -# Forms - -

Use forms to allow users to interact with the site and provide information to the company.

- ---- - -## Elements of a Form - -A form should be marked up using its default HTML properties. The ones we make use of include (in hierarchical order): - -- Form -- Label -- Input -- Select -- Text area -- Button - ---- - -## How to Use - -Make forms great and easy to use with the following rules: - -- Wrap checkboxes and radio buttons within labels for larger hit areas, and be sure to set the for, name, and id attributes for all applicable elements. -- Series of checkboxes and radio buttons below within a `
    `. -- Before selecting any set of fields to use for a required input, explore other options (e.g., radio buttons over select lists). - ---- - -## Learn All About Forms - -Check out the [Foundation Docs](http://foundation.zurb.com/sites/docs) to learn about how flexible our forms are for creating different layouts. It works perfectly with the grid to meet all your form needs. - ---- - -## Form Layouts - -Form elements in Foundation are styled based on their type attribute rather than a class. Inputs in Foundation have another major advantage — they are full width by default. That means that inputs will run as wide as the column that contains them. However, you have two options which make these forms extremely versatile: - -- You can size inputs using column sizes, like `.medium-6`, `.small-6`. -- You can create row elements inside your form and use columns for the form, including inputs, labels and more. Rows inside a form inherit some special padding to even up input spacing. - ---- - -## Form Example - -```html_example -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    - -
    - - .com -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - - -
    -
    - - - -
    -
    -
    -
    - - -
    -
    -
    -``` - - - -# New Section - -Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora omnis suscipit id ut laborum recusandae molestias hic aliquid **expedita!** [Non dicta](zurb.com), autem obcaecati error, id ab voluptate unde culpa nulla. - -```html_example -Button -Button -Button -``` diff --git a/src/styleguide/template.html b/src/styleguide/template.html deleted file mode 100644 index b40f1d2..0000000 --- a/src/styleguide/template.html +++ /dev/null @@ -1,135 +0,0 @@ - - - - - - Style Guide | Your Brand - - - - - - - - -
    -
    -

    Style Guide

    -

    This style guide was built with Foundation for Sites. For more information on how to use this responsive front-end framework, check out the documentation, get help from the Foundation community, or request immediate technical support.

    - Visit the Docs - Foundation Forum - Technical Support -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    - {{#each pages}} -
    - {{ body }} -
    - {{/each}} -
    - -
    -
    - - - -