From 590c158900270f84de388a0e98118462e279d19d Mon Sep 17 00:00:00 2001 From: ruslanchek Date: Wed, 4 Mar 2015 15:44:50 +0300 Subject: [PATCH] Refactor, breadcrumbs --- api.html | 63 ++++++++++++++---------- breadcrumbs.html | 9 ++-- buttons.html | 25 +++++----- catalog.html | 11 +++-- checkers.html | 9 ++-- colors.html | 12 ++--- components.html | 35 +++++++------ config.codekit | 51 +++++++++++-------- css/screen.css | 79 +++++++++++++++++------------- forms.html | 75 ++++++++++++++++++++++++++-- glossary.html | 9 ++-- grid.html | 9 ++-- index.html | 3 -- jade/{layout.jade => _layout.jade} | 2 + jade/_mixins.jade | 19 +++++++ jade/api.jade | 78 ++++++++++++++++------------- jade/breadcrumbs.jade | 20 ++++++-- jade/buttons.jade | 27 ++++++---- jade/catalog.jade | 11 ++++- jade/checkers.jade | 11 ++++- jade/colors.jade | 15 ++++-- jade/components.jade | 37 ++++++++------ jade/forms.jade | 74 ++++++++++++++++++++++++++-- jade/glossary.jade | 11 ++++- jade/grid.jade | 11 ++++- jade/index.jade | 2 +- jade/nav-h.jade | 11 ++++- jade/nav-v.jade | 11 ++++- jade/partials/demo-templates.jade | 6 --- jade/popup.jade | 11 ++++- jade/roadmap.jade | 12 +++-- jade/table.jade | 11 ++++- jade/tabs.jade | 38 ++++++++------ jade/typography.jade | 23 +++++++-- nav-h.html | 9 ++-- nav-v.html | 9 ++-- popup.html | 9 ++-- roadmap.html | 7 ++- sass/common/vars.sass | 2 +- sass/components/breadcrumbs.sass | 6 ++- sass/components/button.sass | 1 + sass/components/navigation.sass | 12 ++--- sass/components/popup.sass | 10 ++++ sass/components/typography.sass | 5 +- table.html | 9 ++-- tabs.html | 24 ++++----- typography.html | 24 ++++++--- 47 files changed, 644 insertions(+), 314 deletions(-) rename jade/{layout.jade => _layout.jade} (92%) create mode 100644 jade/_mixins.jade diff --git a/api.html b/api.html index 84cd3d5..fe58295 100644 --- a/api.html +++ b/api.html @@ -23,27 +23,36 @@

JavaScript API

-

The API will make you happy

-

UI.Animate

+
Main pageAPI +
+
+ +

UI.Template

+ 
var Template = new UI.Template(templateName);

+
Template.render()
+
+

UI.Animate

var Animate = new UI.Animate({
 	$element: $('#my-element'),
 	animationDuration: 300
 });

-
Animate.play(animationMethod, onDone)
+
Animate.play(animationMethod, onDone)

Animation methods

-
fadeIn
-
fadeOut
-
appear
-
disappear
-

UI.ClickOutside

+
fadeIn
+
fadeOut
+
appear
+
disappear
+
+

UI.ClickOutside

var ClickOutside = new UI.ClickOutside({
 	selector: '#my-element',
 	onClickOutside: function($target){}
 })

-
ClickOutside.bind()
-
ClickOutside.unbind()
+
ClickOutside.bind()
+
ClickOutside.unbind()
+
-

UI.Popup

+

UI.Popup

var Popup = new UI.Popup({
 	width: 500,
 	modal: false,
@@ -52,20 +61,27 @@ 
UI.Popup

 	onShow: function(instance){},
 	onHide: function(instance){}
 });

-
Popup.show(title, content)
-
Popup.hide()
-
Popup.showMessage(type, timeout, content)
-
Popup.hideMessage()
-
Popup.changeContent(html)
-
Popup.changeTitle(html)
-
Popup.setWaitingMode(timeout, done)
-
Popup.removeWaitingMode()
+
Popup.show(title, content)
+
Popup.hide()
+
Popup.showMessage(type, timeout, content)
+
Popup.hideMessage()
+
Popup.changeContent(html)
+
Popup.changeTitle(html)
+
Popup.setWaitingMode(timeout, done)
+
Popup.removeWaitingMode()
+
-

UI.Tabs

+

UI.Tabs

var Tabs = new UI.Tabs({
-	tabsSelector: '.tabs',
-	tabsContentSelector: '.tabs-content'
+	tabsSelector: '#tabs',
+	tabsContentSelector: '#tabs-content',
+	sliding: true,
+	onTabOpen: function(name){}
 });

+
Tabs.openTab(name)
+
Tabs.next()
+
Tabs.prev()
+
Tabs.getActive()
@@ -125,16 +141,13 @@

UI.Tabs

AboutContactsMedia
-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/breadcrumbs.html b/breadcrumbs.html index 444d91a..734f044 100644 --- a/breadcrumbs.html +++ b/breadcrumbs.html @@ -23,8 +23,12 @@

Breadcrumbs

+
Main pageComponentsForms +
+
+

Default breadcrumbs

Those little bastards are very useful

-
Main pageNavigationBreadcrumbs

+
CatalogPillowsSoftTravelChildrenSoft travel pillow for children
 The code
@@ -87,16 +91,13 @@

Breadcrumbs

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/buttons.html b/buttons.html index fda2069..590be12 100644 --- a/buttons.html +++ b/buttons.html @@ -23,6 +23,10 @@

Buttons

+
Main pageComponentsButtons +
+
+

Buttons set

A beautiful set of buttons, the combinations of styles are awesome

@@ -74,22 +78,22 @@

Buttons

 Colorable
 Resizeable
-

Button groups

+
+

Button groups

You can combine a couple of buttons into a group

-
- +
+ - +

-
- - - -
+
+ + +

@@ -156,16 +160,13 @@

Button groups

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/catalog.html b/catalog.html index 3938f07..c686f1c 100644 --- a/catalog.html +++ b/catalog.html @@ -23,7 +23,11 @@

Catalog bricks

-

A best way to use Font Awesome icons

+
Main pageComponentsCatalog +
+
+

Coloured bricks

+

The best way to use Font Awesome icons

Travel worldwide
@@ -37,7 +41,7 @@

Catalog bricks

 Colorable
-

How about transparent?

+

How about transparent?

They are so nice, really

@@ -111,16 +115,13 @@

How about transparent?

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/checkers.html b/checkers.html index bbd9853..96449db 100644 --- a/checkers.html +++ b/checkers.html @@ -23,7 +23,11 @@

Checkers

-

Everybody loves checkboxes, but needs some other things too

+
Main pageComponentsCheckers +
+
+

Useful checkers

+

Everybody loves checkboxes, but everybody wants some other thing

 The code
@@ -88,16 +92,13 @@

Checkers

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/colors.html b/colors.html index 2e53de2..a5cb799 100644 --- a/colors.html +++ b/colors.html @@ -23,6 +23,10 @@

Colors

+
Main pageComponentsColors +
+
+

Colors set

A backgrounds, text and links colors, that also suitable for theming

@@ -119,14 +123,13 @@

Colors

-

Coloured text

+

Coloured text

Any text are suitable for using with the colors

 The code
-

-

Coloured links

+

Coloured links

Links are also available in any of these magic colors

 The code
@@ -190,16 +193,13 @@

Coloured links

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/components.html b/components.html index de4686f..dc7abf6 100644 --- a/components.html +++ b/components.html @@ -23,31 +23,33 @@

Components

-

A full power UI-construction kit

+
Main pageComponents +
+

-
Buttons
-
Checkers
-
Forms
+
Buttons
+
Checkers
+
Forms
-
Horizontal navigation
-
Vertical navigation
-
Breadcrumbs
+
Horizontal navigation
+
Vertical navigation
+
Breadcrumbs
-
Tabs
-
Popup
-
Table
+
Tabs
+
Popup
+
Table
-
Catalog
-
Glossary
-
Grid
+
Catalog
+
Glossary
+
Grid
-
Colors
-
Typography
+
Colors
+
Typography
@@ -109,16 +111,13 @@

Components

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/config.codekit b/config.codekit index af04156..a9dd8f4 100644 --- a/config.codekit +++ b/config.codekit @@ -335,6 +335,15 @@ "outputPathIsOutsideProject": 0, "outputPathIsSetByUser": 0 }, + "\/glossary.html": { + "fileType": 8192, + "ignore": 1, + "ignoreWasSetByUser": 0, + "inputAbbreviatedPath": "\/glossary.html", + "outputAbbreviatedPath": "No Output Path", + "outputPathIsOutsideProject": 0, + "outputPathIsSetByUser": 0 + }, "\/grid.html": { "fileType": 8192, "ignore": 1, @@ -353,6 +362,28 @@ "outputPathIsOutsideProject": 0, "outputPathIsSetByUser": 0 }, + "\/jade\/_layout.jade": { + "compileDebug": 1, + "fileType": 512, + "ignore": 1, + "ignoreWasSetByUser": 0, + "inputAbbreviatedPath": "\/jade\/_layout.jade", + "outputAbbreviatedPath": "\/_layout.html", + "outputPathIsOutsideProject": 0, + "outputPathIsSetByUser": 0, + "outputStyle": 0 + }, + "\/jade\/_mixins.jade": { + "compileDebug": 1, + "fileType": 512, + "ignore": 1, + "ignoreWasSetByUser": 0, + "inputAbbreviatedPath": "\/jade\/_mixins.jade", + "outputAbbreviatedPath": "\/_mixins.html", + "outputPathIsOutsideProject": 0, + "outputPathIsSetByUser": 0, + "outputStyle": 0 + }, "\/jade\/api.jade": { "compileDebug": 1, "fileType": 512, @@ -474,17 +505,6 @@ "outputPathIsSetByUser": 0, "outputStyle": 0 }, - "\/jade\/layout.jade": { - "compileDebug": 1, - "fileType": 512, - "ignore": 1, - "ignoreWasSetByUser": 0, - "inputAbbreviatedPath": "\/jade\/layout.jade", - "outputAbbreviatedPath": "\/layout.html", - "outputPathIsOutsideProject": 0, - "outputPathIsSetByUser": 0, - "outputStyle": 0 - }, "\/jade\/nav-h.jade": { "compileDebug": 1, "fileType": 512, @@ -744,15 +764,6 @@ "outputPathIsOutsideProject": 0, "outputPathIsSetByUser": 0 }, - "\/roadmap.html": { - "fileType": 8192, - "ignore": 1, - "ignoreWasSetByUser": 0, - "inputAbbreviatedPath": "\/roadmap.html", - "outputAbbreviatedPath": "No Output Path", - "outputPathIsOutsideProject": 0, - "outputPathIsSetByUser": 0 - }, "\/sass\/_breakpoint.scss": { "createSourceMap": 1, "debugStyle": 0, diff --git a/css/screen.css b/css/screen.css index 986a345..8e190b9 100644 --- a/css/screen.css +++ b/css/screen.css @@ -3293,7 +3293,7 @@ p.lead { hr { height: 1px; background: #e6e9ed; - margin: 1em 0 2em; + margin: 1em 0; border: none; } pre { @@ -3307,8 +3307,7 @@ code { .code-multiline { display: block; - border: 1px solid #e6e9ed; - background: rgba(0, 0, 0, 0.0075); + background: rgba(0, 0, 0, 0.035); padding: 13.33333px 20px; border-radius: 5px; overflow-x: scroll; @@ -3864,15 +3863,15 @@ ul.dashes li { box-sizing: border-box; margin-bottom: 40px; } .nav[data-collapse="true"] { - height: 36px; + height: 40px; overflow: hidden; position: relative; cursor: pointer; } .nav[data-collapse="true"]:before { content: attr(data-collapsed-text); display: block; - height: 36px; - line-height: 36px; + height: 40px; + line-height: 40px; box-sizing: border-box; } .nav[data-collapse="true"]:after { font: normal normal normal 14px/1 FontAwesome; @@ -3888,8 +3887,8 @@ ul.dashes li { .nav[data-collapse="true"].bordered:before, .nav[data-collapse="true"].filled:before { padding: 0 20px; } .nav a { - height: 36px; - line-height: 36px; + height: 40px; + line-height: 40px; box-sizing: border-box; display: block; -webkit-transition: 0.15s; @@ -3985,7 +3984,7 @@ ul.dashes li { .nav-bricks .item { text-align: center; display: block; - margin-bottom: 2em; } + margin-bottom: 40px; } .nav-bricks .item .icon { font-size: 3.8em; padding: 0.55em 0; @@ -4027,26 +4026,24 @@ ul.dashes li { .nav-glossary .item { display: block; - margin-bottom: 2em; + margin-bottom: 40px; overflow: hidden; *zoom: 1; } .nav-glossary .item .icon { width: 1.6em; height: 1.6em; font-size: 1.6em; - line-height: 1.6em; - margin-right: 20px; + line-height: 1.61em; + margin-right: 10px; border-radius: 5px; color: #fff; display: inline-block; position: relative; box-sizing: border-box; text-align: center; - float: left; - border: 1px solid #e6e9ed; - box-sizing: border-box; } + float: left; } .nav-glossary .item .icon[class^="bg-"], .nav-glossary .item .icon[class*=" bg-"] { - border: none; } + margin-right: 20px; } .nav-glossary .item .icon img { display: block; margin: 0 auto; } @@ -4111,8 +4108,8 @@ html, body { border: none; display: inline-block; padding: 0 20px; - height: 36px; - line-height: 36px; + height: 40px; + line-height: 40px; position: relative; outline: none; margin: 0; @@ -4205,7 +4202,7 @@ html, body { background-color: transparent; border: 1px solid #979fa9; box-shadow: none !important; - line-height: 35px; } + line-height: 39px; } .button.wireframe:before { background-color: #979fa9; opacity: 0; } @@ -4237,7 +4234,9 @@ html, body { .button-group { font-size: 0; - white-space: nowrap; } + white-space: nowrap; + overflow: hidden; + *zoom: 1; } .button-group .button { border-radius: 0; } .button-group .button:before { @@ -4408,6 +4407,13 @@ table { padding: 20px 20px; } .popup .window .content p:last-child { margin-bottom: 0; } + .popup .window .content .tabs { + margin-left: -20px; + padding-left: 20px; + padding-right: 20px; + width: 100%; } + .popup .window .content .tabs-content .page { + padding-bottom: 0; } .popup .window .bottom { padding: 20px 20px; } .popup .window .close { @@ -4427,19 +4433,24 @@ table { .popup.no-overlay .overlay { display: none; } -.breadcrumbs a { - display: inline-block; - margin-right: 2ex; } - .breadcrumbs a:after { - margin-left: 2ex; - font: normal normal normal 14px/1 FontAwesome; - content: ""; +.breadcrumbs { + margin-bottom: 1.5em; } + .breadcrumbs a { display: inline-block; - color: #aab2bc; } - .breadcrumbs a:last-of-type { - color: #aab2bc; } - .breadcrumbs a:last-of-type:after { - display: none; } + margin-right: 2ex; } + .breadcrumbs a:after { + margin-left: 2ex; + font: normal normal normal 14px/1 FontAwesome; + content: ""; + display: inline-block; + color: #aab2bc; + width: 0.7ex; } + .breadcrumbs a:last-of-type, + .breadcrumbs a .active { + color: #aab2bc; } + .breadcrumbs a:last-of-type:after, + .breadcrumbs a .active:after { + display: none; } .tabs { border-bottom: 1px solid #e6e9ed; @@ -4449,8 +4460,8 @@ table { display: inline-block; padding: 0 20px; border: 1px solid transparent; - height: 36px; - line-height: 36px; + height: 40px; + line-height: 40px; position: relative; z-index: 2; } .tabs.fat a { diff --git a/forms.html b/forms.html index e92b903..d18156a 100644 --- a/forms.html +++ b/forms.html @@ -23,7 +23,11 @@

Forms

-

The forms with a lot of shapes

+
Main pageComponentsForms +
+
+

Default form

+

There's nothing to say

@@ -75,7 +79,7 @@

Forms


 The code
-

Horizontal

+

Horizontal form

Another kind — horizontal mode

@@ -138,6 +142,70 @@

Horizontal


 The code
+
+

Errors

+

This sample shows how inputs can be marked as wrong

+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+ + + + +
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+

+
 The code
@@ -197,16 +265,13 @@

Horizontal

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/glossary.html b/glossary.html index 841e4bd..1c0f5d0 100644 --- a/glossary.html +++ b/glossary.html @@ -23,6 +23,10 @@

Glossary

+
Main pageComponentsGlossary +
+
+

Coloured glossary

The best way to use Font Awesome icons... A tiny kind of

@@ -41,7 +45,7 @@

Glossary

 Colorable
-

Yes, transparent style is applicable too

+

Yes, transparent style is applicable too

Nice, isn't it?

@@ -119,16 +123,13 @@

Yes, transparent style is applicable too

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/grid.html b/grid.html index e59c774..6f90486 100644 --- a/grid.html +++ b/grid.html @@ -23,7 +23,11 @@

Grid

-

Simple grid system of 24, support nesting

+
Main pageComponentsGrid +
+
+

Grid of 24

+

Simple grid system of 24 cols, support nesting

col-2
@@ -123,16 +127,13 @@

Grid

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/index.html b/index.html index d614884..fa86fd2 100644 --- a/index.html +++ b/index.html @@ -80,16 +80,13 @@
-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/jade/layout.jade b/jade/_layout.jade similarity index 92% rename from jade/layout.jade rename to jade/_layout.jade index db9405e..46c1b08 100644 --- a/jade/layout.jade +++ b/jade/_layout.jade @@ -1,6 +1,8 @@ doctype html html + include _mixins include partials/head + body .wrap main diff --git a/jade/_mixins.jade b/jade/_mixins.jade new file mode 100644 index 0000000..0335d0f --- /dev/null +++ b/jade/_mixins.jade @@ -0,0 +1,19 @@ +mixin breadcrumbs(items) + .breadcrumbs + a(href="index.html") Main page + each item in items + a(href=item[0] + '.html', class=item[2] ? 'active' : '')= item[1] + + hr + +mixin apiSection(title, code) + a(name="#{title}") + h2 UI.#{title} + +mixin apiPublicMethod(code, desc) + div.bullet + code= code + +mixin paramItem(code) + div.bullet.bg-mix-light + code= code \ No newline at end of file diff --git a/jade/api.jade b/jade/api.jade index 243d7a9..6d18e3a 100644 --- a/jade/api.jade +++ b/jade/api.jade @@ -1,57 +1,61 @@ -extends ./layout.jade +extends _layout block content - var section = 'api' - mixin constructorSection(title, code) - a(name="#{title}") - h2 UI.#{title} - - mixin constructorPublicMethod(code, desc) - div.bullet - code= code - - mixin paramItem(code) - div.bullet.bg-mix-light - code= code - .grid .col-6 include ./partials/leftcol.jade .col-18 h1 JavaScript API - p The API will make you happy + +breadcrumbs([ + ['api', 'API'] + ]) + + + // Popup + +apiSection('Template') + pre.code-multiline: code.javascript + |var Template = new UI.Template(templateName); + br + + +apiPublicMethod('Template.render()') - +constructorSection('Animate') + hr + + +apiSection('Animate') pre.code-multiline: code.javascript |var Animate = new UI.Animate({ | $element: $('#my-element'), | animationDuration: 300 |}); br - +constructorPublicMethod('Animate.play(animationMethod, onDone)', 'Will apply an animation method on the $element, that pointed when you construct UI.Animate()') - + +apiPublicMethod('Animate.play(animationMethod, onDone)', 'Will apply an animation method on the $element, that pointed when you construct UI.Animate()') + h4 Animation methods +paramItem('fadeIn') +paramItem('fadeOut') +paramItem('appear') +paramItem('disappear') - +constructorSection('ClickOutside') + hr + + +apiSection('ClickOutside') pre.code-multiline: code.javascript |var ClickOutside = new UI.ClickOutside({ | selector: '#my-element', | onClickOutside: function($target){} |}) br - +constructorPublicMethod('ClickOutside.bind()', 'Activate the click outside listener') - +constructorPublicMethod('ClickOutside.unbind()', 'Deactivate the click outside listener') + +apiPublicMethod('ClickOutside.bind()', 'Activate the click outside listener') + +apiPublicMethod('ClickOutside.unbind()', 'Deactivate the click outside listener') + hr // Popup - +constructorSection('Popup') + +apiSection('Popup') pre.code-multiline: code.javascript |var Popup = new UI.Popup({ | width: 500, @@ -63,21 +67,29 @@ block content |}); br - +constructorPublicMethod('Popup.show(title, content)', 'Shows the popup') - +constructorPublicMethod('Popup.hide()', 'Hides the popup') - +constructorPublicMethod('Popup.showMessage(type, timeout, content)', 'Shows text with background under the title (it can be error message for example)') - +constructorPublicMethod('Popup.hideMessage()', 'Hides the popup message') - +constructorPublicMethod('Popup.changeContent(html)', 'Change the popup body content') - +constructorPublicMethod('Popup.changeTitle(html)', 'Change the popup title content') - +constructorPublicMethod('Popup.setWaitingMode(timeout, done)', 'Shows waiting animation on the popup title') - +constructorPublicMethod('Popup.removeWaitingMode()', 'Removes the popup waiting animation') + +apiPublicMethod('Popup.show(title, content)', 'Shows the popup') + +apiPublicMethod('Popup.hide()', 'Hides the popup') + +apiPublicMethod('Popup.showMessage(type, timeout, content)', 'Shows text with background under the title (it can be error message for example)') + +apiPublicMethod('Popup.hideMessage()', 'Hides the popup message') + +apiPublicMethod('Popup.changeContent(html)', 'Change the popup body content') + +apiPublicMethod('Popup.changeTitle(html)', 'Change the popup title content') + +apiPublicMethod('Popup.setWaitingMode(timeout, done)', 'Shows waiting animation on the popup title') + +apiPublicMethod('Popup.removeWaitingMode()', 'Removes the popup waiting animation') + hr // Popup - +constructorSection('Tabs') + +apiSection('Tabs') pre.code-multiline: code.javascript |var Tabs = new UI.Tabs({ - | tabsSelector: '.tabs', - | tabsContentSelector: '.tabs-content' + | tabsSelector: '#tabs', + | tabsContentSelector: '#tabs-content', + | sliding: true, + | onTabOpen: function(name){} |}); - br \ No newline at end of file + br + + +apiPublicMethod('Tabs.openTab(name)', '') + +apiPublicMethod('Tabs.next()', '') + +apiPublicMethod('Tabs.prev()', '') + +apiPublicMethod('Tabs.getActive()', '') \ No newline at end of file diff --git a/jade/breadcrumbs.jade b/jade/breadcrumbs.jade index 337e498..1f73240 100644 --- a/jade/breadcrumbs.jade +++ b/jade/breadcrumbs.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'breadcrumbs' @@ -9,14 +9,24 @@ block content .col-18 h1 Breadcrumbs + + +breadcrumbs([ + ['components', 'Components'], + ['forms', 'Forms'] + ]) + + h2 Default breadcrumbs p Those little bastards are very useful .breadcrumbs - a(href="#") Main page - a(href="#") Navigation - a.active(href="#") Breadcrumbs + a(href="#") Catalog + a(href="#") Pillows + a(href="#") Soft + a(href="#") Travel + a(href="#") Children + + a.active(href="#") Soft travel pillow for children - br .grid .col-9 a.code(href="api.html#Popup") diff --git a/jade/buttons.jade b/jade/buttons.jade index 3c502a3..1ad4af2 100644 --- a/jade/buttons.jade +++ b/jade/buttons.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'buttons' @@ -9,6 +9,13 @@ block content .col-18 h1 Buttons + + +breadcrumbs([ + ['components', 'Components'], + ['buttons', 'Buttons'] + ]) + + h2 Buttons set p A beautiful set of buttons, the combinations of styles are awesome .grid @@ -75,25 +82,27 @@ block content include partials/colorable include partials/resizeable - h1 Button groups + hr + + h2 Button groups p You can combine a couple of buttons into a group .grid + .col-9 + .button-group.separators + button.button.fat.volume Yeah! + button.button.fat.volume Hmm... + button.button.fat.volume Pff, nah! + br + .col-9 .button-group button.button.fat.bg-cold-light.volume Yeah! - button.button.fat.volume Hmm... button.button.fat.bg-heat-light.volume Pff, nope! br - .col-9 - .button-group.separators - button.button.fat.volume Yeah! - button.button.fat.volume Hmm... - button.button.fat.volume Pff, nope! - .grid include partials/code include partials/colorable diff --git a/jade/catalog.jade b/jade/catalog.jade index 0e44bba..cb02175 100644 --- a/jade/catalog.jade +++ b/jade/catalog.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'catalog' @@ -9,6 +9,13 @@ block content .col-18 h1 Catalog bricks + + +breadcrumbs([ + ['components', 'Components'], + ['catalog', 'Catalog'] + ]) + + h2 Coloured bricks p The best way to use Font Awesome icons .nav-bricks @@ -43,7 +50,7 @@ block content hr - h1 How about transparent? + h2 How about transparent? p They are so nice, really .nav-bricks diff --git a/jade/checkers.jade b/jade/checkers.jade index 20b78c0..6a776ff 100644 --- a/jade/checkers.jade +++ b/jade/checkers.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'checkers' @@ -9,7 +9,14 @@ block content .col-18 h1 Checkers - p Everybody loves checkboxes, but needs some other things too + + +breadcrumbs([ + ['components', 'Components'], + ['checkers', 'Checkers'] + ]) + + h2 Useful checkers + p Everybody loves checkboxes, but everybody wants some other thing .checker#sample-checker a.active(href="#") Activated checker diff --git a/jade/colors.jade b/jade/colors.jade index 7409b1c..0082c67 100644 --- a/jade/colors.jade +++ b/jade/colors.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'colors' @@ -9,6 +9,13 @@ block content .col-18 h1 Colors + + +breadcrumbs([ + ['components', 'Components'], + ['colors', 'Colors'] + ]) + + h2 Colors set p A backgrounds, text and links colors, that also suitable for theming .colors @@ -84,7 +91,7 @@ block content hr - h1 Coloured text + h2 Coloured text p span.color-heat-dark Any |  @@ -109,9 +116,7 @@ block content hr - h1 - - h1 Coloured links + h2 Coloured links p a(href="#stayhere").color-heat-dark Links |  diff --git a/jade/components.jade b/jade/components.jade index 25f9053..fea8a62 100644 --- a/jade/components.jade +++ b/jade/components.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'components' @@ -9,94 +9,99 @@ block content .col-18 h1 Components - p A full power UI-construction kit + + +breadcrumbs([ + ['components', 'Components'] + ]) + + br .nav-glossary .grid .col-6 a.item(href="buttons.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-square span.text Buttons .col-6 a.item(href="checkers.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-check-square span.text Checkers .col-6 a.item(href="forms.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-paper-plane-o span.text Forms .grid .col-6 a.item(href="nav-h.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-ellipsis-h span.text Horizontal navigation .col-6 a.item(href="nav-v.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-bars span.text Vertical navigation .col-6 a.item(href="breadcrumbs.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-long-arrow-right span.text Breadcrumbs .grid .col-6 a.item(href="tabs.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-folder-o span.text Tabs .col-6 a.item(href="popup.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-list-alt span.text Popup .col-6 a.item(href="table.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-table span.text Table .grid .col-6 a.item(href="catalog.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-th-large span.text Catalog .col-6 a.item(href="glossary.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-th span.text Glossary .col-6 a.item(href="grid.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-diamond span.text Grid .grid .col-6 a.item(href="colors.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-paint-brush span.text Colors .col-6 a.item(href="typography.html") - span.icon.bg-cold-light + span.icon.bevel.bg-cold-light i.fa.fa-font span.text Typography \ No newline at end of file diff --git a/jade/forms.jade b/jade/forms.jade index abedae4..6a6d065 100644 --- a/jade/forms.jade +++ b/jade/forms.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'forms' @@ -9,7 +9,14 @@ block content .col-18 h1 Forms - p The forms with a lot of shapes + + +breadcrumbs([ + ['components', 'Components'], + ['forms', 'Forms'] + ]) + + h2 Default form + p There's nothing to say form.form.w-50 .row @@ -58,7 +65,7 @@ block content hr - h1 Horizontal + h2 Horizontal form p Another kind — horizontal mode form.form.horizontal.w-50 @@ -118,3 +125,64 @@ block content i.fa.fa-code |  The code + hr + + h2 Errors + p This sample shows how inputs can be marked as wrong + + form.form.horizontal.w-50 + .row + .label + label(for="name-2") Name + + .input + input#name-2(type="text", tabindex="11") + + .row + .label + label(for="email-2") E-mail + + .input + input#email-2(type="email", tabindex="12", placeholder="name@domain.com") + + .row + .label + label(for="realm-2", tabindex="13") Realm + + .input + .select + select#realm-1 + option North America + option South America + option Europe + option Asia + option Oceania + option South Africa + + .row + .label + label Gender + + .input + input#gender-2-1(type="radio", tabindex="15", name="gender-2", value="1", checked) + label(for="gender-2-1") Male + + input#gender-2-2(type="radio", tabindex="16", name="gender-2", value="2") + label(for="gender-2-2") Female + + .row + .input + input#remember-2(type="checkbox", tabindex="14") + label(for="remember-2") Remember me + + .row + .input + .button-group + button.button.bevel.bg-cold-light(type="submit") Login + button.button.bevel Cancel + + br + .grid + a.code(href="#") + i.fa.fa-code + |  The code \ No newline at end of file diff --git a/jade/glossary.jade b/jade/glossary.jade index b74dbe6..9d99b8d 100644 --- a/jade/glossary.jade +++ b/jade/glossary.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'catalog' @@ -9,6 +9,13 @@ block content .col-18 h1 Glossary + + +breadcrumbs([ + ['components', 'Components'], + ['glossary', 'Glossary'] + ]) + + h2 Coloured glossary p The best way to use Font Awesome icons... A tiny kind of .nav-glossary @@ -56,7 +63,7 @@ block content hr - h1 Yes, transparent style is applicable too + h2 Yes, transparent style is applicable too p Nice, isn't it? .nav-glossary diff --git a/jade/grid.jade b/jade/grid.jade index 8581598..607d32b 100644 --- a/jade/grid.jade +++ b/jade/grid.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'grid' @@ -9,7 +9,14 @@ block content .col-18 h1 Grid - p Simple grid system of 24, support nesting + + +breadcrumbs([ + ['components', 'Components'], + ['grid', 'Grid'] + ]) + + h2 Grid of 24 + p Simple grid system of 24 cols, support nesting .grid-demo .grid diff --git a/jade/index.jade b/jade/index.jade index 94aa139..6685f71 100644 --- a/jade/index.jade +++ b/jade/index.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'main' diff --git a/jade/nav-h.jade b/jade/nav-h.jade index 3a37e25..a5c7e4e 100644 --- a/jade/nav-h.jade +++ b/jade/nav-h.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'nav' @@ -9,6 +9,13 @@ block content .col-18 h1 Horizontal navigation + + +breadcrumbs([ + ['components', 'Components'], + ['nav-h', 'Horizontal navigation'] + ]) + + h2 Default horizontal navigation p Can be bordered, filled or simple inline links nav.nav.fat.horizontal.bordered @@ -18,7 +25,7 @@ block content a(href="#stayhere") Article a(href="#stayhere") Tale - nav.nav.fat.horizontal.filled.bg-heat-light + nav.nav.fat.horizontal.filled.bg-cold-light.bevel a(href="#stayhere") Letter a(href="#stayhere") Word a.active(href="#stayhere") Expression diff --git a/jade/nav-v.jade b/jade/nav-v.jade index 573fbf1..9257f18 100644 --- a/jade/nav-v.jade +++ b/jade/nav-v.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'nav' @@ -9,6 +9,13 @@ block content .col-18 h1 Vertical navigation + + +breadcrumbs([ + ['components', 'Components'], + ['nav-v', 'Vertical navigation'] + ]) + + h2 Default horizontal navigation p Can be bordered, filled or simple inline links .grid @@ -20,7 +27,7 @@ block content a(href="#stayhere") Article a(href="#stayhere") Tale .col-6 - nav.nav.fat.filled.bg-myst-light + nav.nav.fat.filled.bg-cold-light.bevel a(href="#stayhere") Letter a(href="#stayhere") Word a.active(href="#stayhere") Expression diff --git a/jade/partials/demo-templates.jade b/jade/partials/demo-templates.jade index 6c3e960..040b0a5 100644 --- a/jade/partials/demo-templates.jade +++ b/jade/partials/demo-templates.jade @@ -27,18 +27,12 @@ script(type="text/x-handlebars-template")#template-demo-popup-4-content .tabs-content#tabs-popup-content .page(data-role="tab-page", data-tab="about") - h2 About content - p Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. .page.active(data-role="tab-page", data-tab="contacts") - h2 Contacts content - p Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. p That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. .page(data-role="tab-page", data-tab="media") - h2 Media content - p Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. p That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. diff --git a/jade/popup.jade b/jade/popup.jade index 190f1c0..6816b30 100644 --- a/jade/popup.jade +++ b/jade/popup.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'popup' @@ -9,7 +9,14 @@ block content .col-18 h1 Popup - p Yeah, everybody loves popups + + +breadcrumbs([ + ['components', 'Components'], + ['popup', 'Popup'] + ]) + + h2 Fancy popups + p Yeah, everybody loves popups, if they are of that kind .grid .col-6: button.button.fat.w-100.bg-cold-light#show-sample-popup-1 Waiting mode diff --git a/jade/roadmap.jade b/jade/roadmap.jade index 392be37..28b1ade 100644 --- a/jade/roadmap.jade +++ b/jade/roadmap.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'roadmap' @@ -22,10 +22,14 @@ block content .col-18 h1 Roadmap - p A place, where we solve the problems and making a new things + + +breadcrumbs([ + ['components', 'Components'], + ['roadmap', 'Roadmap'] + ]) h2 Not yet - + +feature(2, 'Pagination') +feature(2, 'Solve CSS3 bugs in safari') +feature(2, 'Very low FPS in sliding popup') @@ -36,7 +40,7 @@ block content +feature(2, 'Check popup in mobile') +feature(2, 'Grid cols needs bottom margin') +feature(2, 'Request animation frame instead of setTimeout() in animations') - + h2 Ideas  em.text-fade.text-slim — will be released not so close +feature(3, 'Probably, it\'s nice to make a drag functionality in non modal popup?') diff --git a/jade/table.jade b/jade/table.jade index 1c107f4..bfe3536 100644 --- a/jade/table.jade +++ b/jade/table.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'table' @@ -9,7 +9,14 @@ block content .col-18 h1 Table - p Simple grid system of 24 cols, nesting supports + + +breadcrumbs([ + ['components', 'Components'], + ['table', 'Table'] + ]) + + h2 Customizable table + p Tables has a lot of styles and modes, that can be combined in any way table.rounded.bordered#table-sample thead diff --git a/jade/tabs.jade b/jade/tabs.jade index 91bd156..340b177 100644 --- a/jade/tabs.jade +++ b/jade/tabs.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'nav' @@ -9,6 +9,13 @@ block content .col-18 h1 Tabs + + +breadcrumbs([ + ['components', 'Components'], + ['tabs', 'Tabs'] + ]) + + h2 Sliding tabs p Rapid content-switching component .tabs.fat#tabs @@ -19,19 +26,15 @@ block content .tabs-content#tabs-content .page(data-role="tab-page", data-tab="about") - h2 About content + h3.text-slim About content p Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. p - a#tabs-popup-trigger.button.wireframe.bg-myst-dark(href="#") How about a popup? - |  a.tab-trigger.button.wireframe.next(href="#", data-name="contacts") Contacts section - - p Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. .page.active(data-role="tab-page", data-tab="contacts") - h2 Contacts content + h3.text-slim Contacts content p Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. @@ -40,23 +43,26 @@ block content |  a.tab-trigger.button.wireframe.next(href="#", data-name="media") Media section - p That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends. - .page(data-role="tab-page", data-tab="media") - h2 Media content + h3.text-slim Media content p Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. p: a.tab-trigger.button.wireframe.prev(href="#", data-name="about") Go back to About - - p That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We\'re on the same curve, just on opposite ends. - - p Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb. - .grid a.code(href="api.html#Popup") i.fa.fa-code |  The code - \ No newline at end of file + hr + + h2 Tabs inside a popup + p Try to click the open button + + p: a#tabs-popup-trigger.button.wireframe.bg-myst-dark(href="#") Open + + .grid + a.code(href="api.html#Popup") + i.fa.fa-code + |  The code \ No newline at end of file diff --git a/jade/typography.jade b/jade/typography.jade index f541ce2..7bbe551 100644 --- a/jade/typography.jade +++ b/jade/typography.jade @@ -1,4 +1,4 @@ -extends ./layout.jade +extends _layout block content - var section = 'typography' @@ -9,7 +9,11 @@ block content .col-18 h1 Typography - p Simple grid system of 24 cols, nesting supports + + +breadcrumbs([ + ['components', 'Components'], + ['typography', 'Typography'] + ]) h1 First heading element @@ -50,10 +54,12 @@ block content |that comes with it: the most popular gun in American crime. |Like they're actually proud of that shit. + .grid + include partials/code hr - h1 Leading text + h2 Leading text p.lead |Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor |incididunt ut labore et dolore magna aliqua. @@ -65,8 +71,11 @@ block content |Some pilots get picked and become television programs. + .grid + include partials/code + hr - h1 Address + h2 Address address strong Company @@ -77,8 +86,12 @@ block content br |USA + br + .grid + include partials/code + hr - h1 Lists + h2 Lists .grid .col-6 diff --git a/nav-h.html b/nav-h.html index b797f1a..e0f8788 100644 --- a/nav-h.html +++ b/nav-h.html @@ -23,9 +23,13 @@

Horizontal navigation

+
Main pageComponentsHorizontal navigation +
+
+

Default horizontal navigation

Can be bordered, filled or simple inline links

- +
 The code
@@ -91,16 +95,13 @@

Horizontal navigation

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/nav-v.html b/nav-v.html index 12d3749..b1d962e 100644 --- a/nav-v.html +++ b/nav-v.html @@ -23,13 +23,17 @@

Vertical navigation

+
Main pageComponentsVertical navigation +
+
+

Default horizontal navigation

Can be bordered, filled or simple inline links

- +
@@ -99,16 +103,13 @@

Vertical navigation

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/popup.html b/popup.html index fb6141d..4bd48ad 100644 --- a/popup.html +++ b/popup.html @@ -23,7 +23,11 @@

Popup

-

Yeah, everybody loves popups

+
Main pageComponentsPopup +
+
+

Fancy popups

+

Yeah, everybody loves popups, if they are of that kind

@@ -95,16 +99,13 @@

Popup

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/roadmap.html b/roadmap.html index b4b3e9b..e9d3321 100644 --- a/roadmap.html +++ b/roadmap.html @@ -23,7 +23,9 @@

Roadmap

-

A place, where we solve the problems and making a new things

+
Main pageComponentsRoadmap +
+

Not yet

Pagination
Solve CSS3 bugs in safari
@@ -121,16 +123,13 @@

Yep, done!

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/sass/common/vars.sass b/sass/common/vars.sass index 4a82a88..8f07d03 100644 --- a/sass/common/vars.sass +++ b/sass/common/vars.sass @@ -49,7 +49,7 @@ $limiter-side-padding: 5% // Components sizes $height-component-slim: 32px -$height-component-default: 36px +$height-component-default: 40px $height-component-fat: 48px $height-footer: 225px diff --git a/sass/components/breadcrumbs.sass b/sass/components/breadcrumbs.sass index 2c06a3e..0d3c1b6 100644 --- a/sass/components/breadcrumbs.sass +++ b/sass/components/breadcrumbs.sass @@ -1,4 +1,6 @@ .breadcrumbs + margin-bottom: 1.5em + a display: inline-block margin-right: 2ex @@ -11,8 +13,10 @@ content: $fa-var-angle-right display: inline-block color: $color-medium-gray-dark + width: .7ex // Depends on symbol width - &:last-of-type + &:last-of-type, + .active color: $color-medium-gray-dark &:after diff --git a/sass/components/button.sass b/sass/components/button.sass index 2baa955..7e1cc98 100644 --- a/sass/components/button.sass +++ b/sass/components/button.sass @@ -189,6 +189,7 @@ .button-group font-size: 0 // Kill parasite space between inline-blocks white-space: nowrap + +clearfix() .button border-radius: 0 diff --git a/sass/components/navigation.sass b/sass/components/navigation.sass index 35a2da9..2112f9f 100644 --- a/sass/components/navigation.sass +++ b/sass/components/navigation.sass @@ -170,7 +170,7 @@ .item text-align: center display: block - margin-bottom: 2em + margin-bottom: $margin-vertical-space @extend .links-component .icon @@ -222,7 +222,7 @@ .nav-glossary .item display: block - margin-bottom: 2em + margin-bottom: $margin-vertical-space @extend .links-component +clearfix @@ -230,8 +230,8 @@ width: 1.6em height: 1.6em font-size: 1.6em - line-height: 1.6em - margin-right: $padding-component-side + line-height: 1.61em + margin-right: $padding-component-side / 2 border-radius: $border-radius color: #fff display: inline-block @@ -239,12 +239,10 @@ box-sizing: border-box text-align: center float: left - border: 1px solid $border-component-color - box-sizing: border-box &[class^="bg-"], &[class*=" bg-"] - border: none + margin-right: $padding-component-side img display: block diff --git a/sass/components/popup.sass b/sass/components/popup.sass index 0fa20f6..7ec29c7 100644 --- a/sass/components/popup.sass +++ b/sass/components/popup.sass @@ -71,6 +71,16 @@ p:last-child margin-bottom: 0 + .tabs + margin-left: -20px + padding-left: 20px + padding-right: 20px + width: 100% + + .tabs-content + .page + padding-bottom: 0 + .bottom padding: $padding-component-vertical $padding-component-side diff --git a/sass/components/typography.sass b/sass/components/typography.sass index 8c65246..8972bea 100644 --- a/sass/components/typography.sass +++ b/sass/components/typography.sass @@ -68,7 +68,7 @@ p.lead hr height: 1px background: $border-component-color - margin: 1em 0 2em + margin: 1em 0 border: none pre @@ -80,8 +80,7 @@ code .code-multiline display: block - border: 1px solid $border-component-color - background: rgba(0, 0, 0, 0.0075) + background: rgba(0, 0, 0, 0.035) padding: $padding-component-vertical/1.5 $padding-component-side border-radius: $border-radius overflow-x: scroll diff --git a/table.html b/table.html index 79a7a61..194d631 100644 --- a/table.html +++ b/table.html @@ -23,7 +23,11 @@

Table

-

Simple grid system of 24 cols, nesting supports

+
Main pageComponentsTable +
+
+

Customizable table

+

Tables has a lot of styles and modes, that can be combined in any way

@@ -139,16 +143,13 @@

Table

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/tabs.html b/tabs.html index 1022c36..3b1760c 100644 --- a/tabs.html +++ b/tabs.html @@ -23,30 +23,35 @@

Tabs

+
Main pageComponentsTabs +
+
+

Sliding tabs

Rapid content-switching component

-

About content

+

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

How about a popup? 

-

Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

+

-

Contacts content

+

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

 

-

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

+

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

-

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We\'re on the same curve, just on opposite ends.

-

Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.

 The code
+
+

Tabs inside a popup

+

Try to click the open button

+

Open

+
 The code
@@ -106,16 +111,13 @@

Media content

-

About content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Contacts content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

-

Media content

Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

diff --git a/typography.html b/typography.html index d4f24dd..6b66c96 100644 --- a/typography.html +++ b/typography.html @@ -23,7 +23,9 @@

Typography

-

Simple grid system of 24 cols, nesting supports

+
Main pageComponentsTypography +
+

First heading element

My money's in that office, right? If she start giving me some bullshit about it ain't there, @@ -63,8 +65,11 @@

Fifth heading element
that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.

+
+
 The code
+
-

Leading text

+

Leading text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor @@ -76,11 +81,17 @@

Leading text

and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs.

+
+
 The code
+
-

Address

-
Company
PO Box 77899
Vancouver, WA 23456
USA
+

Address

+
Company
PO Box 77899
Vancouver, WA 23456
USA

+
+
 The code
+
-

Lists

+

Lists

    @@ -181,16 +192,13 @@

    Lists

    -

    About content

    Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

    -

    Contacts content

    Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

    That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.

    -

    Media content

    Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do.

    That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.