From 0255bbfe8f44247e1c7b818f9b69fe8ec43b7fb1 Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 25 Mar 2015 13:28:16 -0400 Subject: [PATCH] Updates from bootstrap example --- examples/basic.html | 406 ++++++++++++++++++++++ src/definitions/elements/container.less | 14 +- src/definitions/elements/header.less | 1 + src/definitions/elements/segment.less | 4 +- src/themes/default/globals/site.variables | 10 +- 5 files changed, 421 insertions(+), 14 deletions(-) create mode 100644 examples/basic.html diff --git a/examples/basic.html b/examples/basic.html new file mode 100644 index 000000000..875256676 --- /dev/null +++ b/examples/basic.html @@ -0,0 +1,406 @@ + + + + + + + + + + Basic - Semantic + + + + + + + +
+
+
+

Bootstrap Migration

+
+
+
+
+
+

Hello, world!

+

This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.

+ Learn more » +
+
+
+
+
+

Buttons

+ Default + Primary + Basic + Success + Error +
+
+
+
+

Thumbnails

+
+ +
+
+
+
+

Dropdown

+
+
Dropdown + +
+
Action
+
Another action
+
Something else here
+
One more link
+
+
+
+ + Friends + + + Messages + +
+ + More +
+ Edit Profile + Choose Language + Account Settings +
+
+
+ +
+
+
Categories
+
+ + Clothing +
+
Mens
+
Shirts
+
Pants
+
Jeans
+
Shoes
+
+
Womens
+
Dresses
+
Shoes
+
Bags
+
+
+
Home Goods
+
Bedroom
+
+
Order
+
Status
+
Cancellations
+
+
+
+
+
+
+

Badges

+
+
+
+ One 2 +
+
+ Two 2 +
+
+ Three 2 +
+
+
+
+ +
+
+

Tables

+
+
+ + + + + + + + + + + + + + + + + + + + + +
NamePremium Plan
JohnNo
JamieYes
JillYes
+
+
+ + + + + + + + + + + + + + + + + + + + + +
NamePremium Plan
JohnNo
JamieYes
JillYes
+
+
+ + + + + + + + + + + + + + + + + + + + + +
NamePremium Plan
JohnNo
JamieYes
JillYes
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeFilesLanguages
RubyJavaScriptPython
Alpha TeamProject 12 + +
Beta TeamProject 152 + +
Project 212 + +
Project 321 + +
+
+
+
+
+
+
+

Alerts

+
+
Well done! You successfully read this important alert message.
+
Heads up! This alert needs your attention, but it's not super important.
+
Warning! Best check yo self, you're not looking too good.
+
Oh snap! Change a few things up and try submitting again.
+
+
+
+
+

List groups

+
+
+
+
+
+

Cras justo odio

+
+
+

Dapibus ac facilisis in

+
+
+

Morbi leo risus

+
+
+

Porta ac consectetur ac

+
+
+

Vestibulum at eros

+
+
+
+
+
+ +

Cras justo odio

+ + +

Vestibulum at eros

+ +
+
+
+
+ +

List group item heading

+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

+ + +

List group item heading

+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

+ + +

List group item heading

+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

+ +
+
+
+
+
+
+
+

Panels

+
+
+
+
+
Error
+
Panel content
+
+
+
+
+
Info
+
Panel content
+
+
+
+
+
Success
+
Panel content
+
+
+
+

Header

+
Panel content
+
+
+
+

Header

+
Panel content
+
+
+
+
+

Header

+
Panel content
+
+
+
+
+
+
+
+

Wells

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

+
+
+
+
+ + + + + + + diff --git a/src/definitions/elements/container.less b/src/definitions/elements/container.less index 6aca27dfe..e6ebf782e 100644 --- a/src/definitions/elements/container.less +++ b/src/definitions/elements/container.less @@ -44,18 +44,18 @@ margin-right: @tabletGutter !important; } } -@media only screen and (min-width: @smallComputerBreakpoint) and (max-width: @largeMonitorBreakpoint) { +@media only screen and (min-width: @smallMonitorBreakpoint) and (max-width: @largeMonitorBreakpoint) { .ui.container { - width: @smallComputerWidth; - margin-left: @smallComputerGutter !important; - margin-right: @smallComputerGutter !important; + width: @smallMonitorWidth; + margin-left: @smallMonitorGutter !important; + margin-right: @smallMonitorGutter !important; } } @media only screen and (min-width: @largeMonitorBreakpoint) { .ui.container { - width: @largeMWidth; - margin-left: @largeMGutter !important; - margin-right: @largeMGutter !important; + width: @largeMonitorWidth; + margin-left: @largeMonitorGutter !important; + margin-right: @largeMonitorGutter !important; } } diff --git a/src/definitions/elements/header.less b/src/definitions/elements/header.less index f5bfa0910..7919a030a 100755 --- a/src/definitions/elements/header.less +++ b/src/definitions/elements/header.less @@ -399,6 +399,7 @@ a.ui.yellow.header:hover { .ui.inverted.attached.header { background: @invertedAttachedBackground; box-shadow: none; + border-color: transparent; } .ui.inverted.block.header { background: @invertedBlockBackground; diff --git a/src/definitions/elements/segment.less b/src/definitions/elements/segment.less index cab076866..69f779963 100755 --- a/src/definitions/elements/segment.less +++ b/src/definitions/elements/segment.less @@ -615,8 +615,8 @@ border: @attachedBorder; } -.ui.segments > .segment:not(:first-child) { - border-top: none; +.ui.segments > .segment:not(:last-child) { + border-bottom: none; } /* Top */ diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index e0844852a..a21a3b218 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -106,10 +106,10 @@ Page --------------------*/ -@pageBackground : #F7F7F7; +@pageBackground : #FFFFFF; @pageOverflowX : hidden; -@lineHeight : 1.4285; +@lineHeight : 1.4285em; @textColor : rgba(0, 0, 0, 0.8); /*------------------- @@ -117,7 +117,7 @@ --------------------*/ @paragraphMargin : 0em 0em 1em; -@paragraphLineHeight : ''; +@paragraphLineHeight : @lineHeight; /*------------------- Links @@ -358,12 +358,12 @@ @circularRadius : 500rem; -@borderColor : rgba(34, 36, 38, 0.15); +@borderColor : rgba(34, 36, 38, 0.2); @selectedBorderColor : rgba(34, 36, 38, 0.3); @disabledBorderColor : rgba(34, 36, 38, 0.5); @solidBorderColor : #D4D4D5; -@solidSelectedBorderColor : #BEBEBF; +@solidSelectedBorderColor : #BCBDBD; @whiteBorderColor : rgba(255, 255, 255, 0.1); @selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);