Permalink
Browse files

Adding React components, slight change to `unsemantic-grid-base` to s…

…upport…

unsemantic-grid-base(mobile, tablet, desktop)

And, killed off `unsemantic-grid-base-tablet`.
  • Loading branch information...
1 parent 4f7e122 commit 0a83a99ffb291b05c3b569650544c55af0295fb4 @nathansmith committed May 2, 2016
Showing with 1,027 additions and 759 deletions.
  1. +1 −1 README.md
  2. +8 −0 _grid.scss
  3. +11 −0 assets/javascripts/README.md
  4. +3 −0 assets/react/README.md
  5. +187 −0 assets/react/grid.js
  6. +78 −0 assets/react/grid_clear.js
  7. +30 −0 assets/react/grid_container.js
  8. +30 −0 assets/react/grid_offset.js
  9. +12 −0 assets/react/index.js
  10. +1 −1 assets/sass/ie-rtl.scss
  11. +1 −1 assets/sass/ie.scss
  12. +1 −1 assets/sass/partials/_unsemantic-grid-responsive-tablet.scss
  13. +1 −1 assets/sass/partials/_unsemantic-grid-responsive.scss
  14. +40 −105 assets/sass/partials/_unsemantic-vars.scss
  15. +1 −1 assets/sass/unsemantic-grid-base-no-ie7-rtl.scss
  16. +1 −1 assets/sass/unsemantic-grid-base-no-ie7.scss
  17. +1 −1 assets/sass/unsemantic-grid-base-rtl.scss
  18. +1 −1 assets/sass/unsemantic-grid-base-tablet-no-ie7-rtl.scss
  19. +1 −1 assets/sass/unsemantic-grid-base-tablet-no-ie7.scss
  20. +1 −1 assets/sass/unsemantic-grid-base-tablet-rtl.scss
  21. +1 −1 assets/sass/unsemantic-grid-base-tablet.scss
  22. +1 −1 assets/sass/unsemantic-grid-base.scss
  23. +6 −27 assets/stylesheets/ie-rtl.css
  24. +6 −27 assets/stylesheets/ie.css
  25. +26 −25 assets/stylesheets/unsemantic-grid-base-no-ie7-rtl.css
  26. +26 −25 assets/stylesheets/unsemantic-grid-base-no-ie7.css
  27. +28 −27 assets/stylesheets/unsemantic-grid-base-rtl.css
  28. +47 −46 assets/stylesheets/unsemantic-grid-base-tablet-no-ie7-rtl.css
  29. +47 −46 assets/stylesheets/unsemantic-grid-base-tablet-no-ie7.css
  30. +49 −48 assets/stylesheets/unsemantic-grid-base-tablet-rtl.css
  31. +49 −48 assets/stylesheets/unsemantic-grid-base-tablet.css
  32. +28 −27 assets/stylesheets/unsemantic-grid-base.css
  33. +26 −25 assets/stylesheets/unsemantic-grid-responsive-no-ie7-rtl.css
  34. +26 −25 assets/stylesheets/unsemantic-grid-responsive-no-ie7.css
  35. +28 −27 assets/stylesheets/unsemantic-grid-responsive-rtl.css
  36. +47 −46 assets/stylesheets/unsemantic-grid-responsive-tablet-no-ie7-rtl.css
  37. +47 −46 assets/stylesheets/unsemantic-grid-responsive-tablet-no-ie7.css
  38. +49 −48 assets/stylesheets/unsemantic-grid-responsive-tablet-rtl.css
  39. +49 −48 assets/stylesheets/unsemantic-grid-responsive-tablet.css
  40. +28 −27 assets/stylesheets/unsemantic-grid-responsive.css
  41. +1 −1 bower.json
  42. +2 −2 package.json
View
@@ -18,4 +18,4 @@ http://opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
-(Some open source projects, such as WordPress and Drupal, require GPL.)
+(Some open source projects, such as WordPress and Drupal, require GPL.)
View
@@ -0,0 +1,8 @@
+// This file is here as a convenience,
+// for when Unsemantic is used via NPM.
+//
+// This way, a developer can just type…
+//
+// @import "../../node_modules/unsemantic/grid"
+
+@import "./assets/sass/unsemantic-grid-responsive-tablet-no-ie7"
@@ -0,0 +1,11 @@
+In this folder, the following JS files are needed only to show the grid dimensions in the demo, and are otherwise not needed for Unsemantic:
+
+* demo.js
+* html5.js
+* jquery.js
+
+If you are supporting older browsers with Unsemantic, you *may* want to use the Adapt.js approach, as seen in the "adapt.html" example file.
+
+However, if you have no need to support IE8 and lower, it is highly recommended that you use this CSS file, as it won't require JS at all.
+
+`/assets/stylesheets/unsemantic-grid-responsive-tablet-no-ie7.css`
@@ -0,0 +1,3 @@
+These files are only needed if you intend to use Unsemantic in a React project via NPM, and are otherwise useless.
+
+They do not need to be loaded in the browser in order for the Sass/CSS to work.
View
@@ -0,0 +1,187 @@
+/*global
+module,
+require
+*/
+
+// Dependencies.
+var React = require('react')
+
+// Define class.
+var Grid = React.createClass({
+ // Validation
+ propTypes: {
+ children: React.PropTypes.node,
+
+ parent: React.PropTypes.bool,
+
+ desktop: React.PropTypes.string,
+ 'desktop-hide': React.PropTypes.bool,
+ 'desktop-push': React.PropTypes.string,
+ 'desktop-pull': React.PropTypes.string,
+ 'desktop-prefix': React.PropTypes.string,
+ 'desktop-suffix': React.PropTypes.string,
+
+ mobile: React.PropTypes.string,
+ 'mobile-hide': React.PropTypes.bool,
+ 'mobile-push': React.PropTypes.string,
+ 'mobile-pull': React.PropTypes.string,
+ 'mobile-prefix': React.PropTypes.string,
+ 'mobile-suffix': React.PropTypes.string,
+
+ tablet: React.PropTypes.string,
+ 'tablet-hide': React.PropTypes.bool,
+ 'tablet-push': React.PropTypes.string,
+ 'tablet-pull': React.PropTypes.string,
+ 'tablet-prefix': React.PropTypes.string,
+ 'tablet-suffix': React.PropTypes.string
+ },
+
+ // Render method.
+ render: function () {
+ const parent = this.props.parent
+
+ const desktop = this.props.desktop
+ const desktop_hide = this.props['desktop-hide']
+ const desktop_push = this.props['desktop-push']
+ const desktop_pull = this.props['desktop-pull']
+ const desktop_prefix = this.props['desktop-prefix']
+ const desktop_suffix = this.props['desktop-suffix']
+
+ const mobile = this.props.mobile
+ const mobile_hide = this.props['mobile-hide']
+ const mobile_push = this.props['mobile-push']
+ const mobile_pull = this.props['mobile-pull']
+ const mobile_prefix = this.props['mobile-prefix']
+ const mobile_suffix = this.props['mobile-suffix']
+
+ const tablet = this.props.tablet
+ const tablet_hide = this.props['tablet-hide']
+ const tablet_push = this.props['tablet-push']
+ const tablet_pull = this.props['tablet-pull']
+ const tablet_prefix = this.props['tablet-prefix']
+ const tablet_suffix = this.props['tablet-suffix']
+
+ // Populated later.
+ var className = []
+
+ /*
+ ===================
+ PARENT CLASS NAMES.
+ ===================
+ */
+
+ if (parent) {
+ className.push('grid-parent')
+ }
+
+ /*
+ ====================
+ DESKTOP CLASS NAMES.
+ ====================
+ */
+
+ if (desktop) {
+ className.push('grid-' + desktop)
+ }
+
+ if (desktop_hide) {
+ className.push('hide-on-desktop')
+ }
+
+ if (desktop_push) {
+ className.push('push-' + desktop_push)
+ }
+
+ if (desktop_pull) {
+ className.push('pull-' + desktop_pull)
+ }
+
+ if (desktop_prefix) {
+ className.push('prefix-' + desktop_prefix)
+ }
+
+ if (desktop_suffix) {
+ className.push('suffix-' + desktop_suffix)
+ }
+
+ /*
+ ===================
+ MOBILE CLASS NAMES.
+ ===================
+ */
+
+ if (mobile) {
+ className.push('mobile-grid-' + mobile)
+ }
+
+ if (mobile_hide) {
+ className.push('hide-on-mobile')
+ }
+
+ if (mobile_push) {
+ className.push('mobile-push-' + mobile_push)
+ }
+
+ if (mobile_pull) {
+ className.push('mobile-pull-' + mobile_pull)
+ }
+
+ if (mobile_prefix) {
+ className.push('mobile-prefix-' + mobile_prefix)
+ }
+
+ if (mobile_suffix) {
+ className.push('mobile-suffix-' + mobile_suffix)
+ }
+
+ /*
+ ===================
+ TABLET CLASS NAMES.
+ ===================
+ */
+
+ if (tablet) {
+ className.push('tablet-grid-' + tablet)
+ }
+
+ if (tablet_hide) {
+ className.push('hide-on-tablet')
+ }
+
+ if (tablet_push) {
+ className.push('tablet-push-' + tablet_push)
+ }
+
+ if (tablet_pull) {
+ className.push('tablet-pull-' + tablet_pull)
+ }
+
+ if (tablet_prefix) {
+ className.push('tablet-prefix-' + tablet_prefix)
+ }
+
+ if (tablet_suffix) {
+ className.push('tablet-suffix-' + tablet_suffix)
+ }
+
+ /*
+ =================
+ BUILD THE MARKUP.
+ =================
+ */
+
+ className = className.join(' ')
+
+ // Expose UI.
+ return React.createElement(
+ 'div',
+ {
+ className: className
+ },
+ this.props.children
+ )
+ }
+})
+
+// Export.
+module.exports = Grid
@@ -0,0 +1,78 @@
+/*global
+module,
+require
+*/
+
+// Dependencies.
+var React = require('react')
+
+// Define class.
+var GridClear = React.createClass({
+ // Validation.
+ propTypes: {
+ 'desktop-hide': React.PropTypes.bool,
+ 'mobile-hide': React.PropTypes.bool,
+ 'tablet-hide': React.PropTypes.bool
+ },
+
+ // Render method.
+ render: function () {
+ const desktop_hide = this.props['desktop-hide']
+ const mobile_hide = this.props['mobile-hide']
+ const tablet_hide = this.props['tablet-hide']
+
+ // Populated later.
+ var className = [
+ 'clear'
+ ]
+
+ /*
+ ====================
+ DESKTOP CLASS NAMES.
+ ====================
+ */
+
+ if (desktop_hide) {
+ className.push('hide-on-desktop')
+ }
+
+ /*
+ ===================
+ MOBILE CLASS NAMES.
+ ===================
+ */
+
+ if (mobile_hide) {
+ className.push('hide-on-mobile')
+ }
+
+ /*
+ ===================
+ TABLET CLASS NAMES.
+ ===================
+ */
+
+ if (tablet_hide) {
+ className.push('hide-on-tablet')
+ }
+
+ /*
+ =================
+ BUILD THE MARKUP.
+ =================
+ */
+
+ className = className.join(' ')
+
+ // Expose UI.
+ return React.createElement(
+ 'span',
+ {
+ className: className
+ }
+ )
+ }
+})
+
+// Export.
+module.exports = GridClear
@@ -0,0 +1,30 @@
+/*global
+module,
+require
+*/
+
+// Dependencies.
+var React = require('react')
+
+// Define class.
+var GridContainer = React.createClass({
+ // Validation.
+ propTypes: {
+ children: React.PropTypes.node
+ },
+
+ // Render method.
+ render () {
+ // Expose UI.
+ return React.createElement(
+ 'div',
+ {
+ className: 'grid-container'
+ },
+ this.props.children
+ )
+ }
+})
+
+// Export.
+module.exports = GridContainer
@@ -0,0 +1,30 @@
+/*global
+module,
+require
+*/
+
+// Dependencies.
+var React = require('react')
+
+// Define class.
+var GridOffset = React.createClass({
+ // Validation.
+ propTypes: {
+ children: React.PropTypes.node
+ },
+
+ // Render method.
+ render: function () {
+ // Expose UI.
+ return React.createElement(
+ 'div',
+ {
+ className: 'grid-offset'
+ },
+ this.props.children
+ )
+ }
+})
+
+// Export.
+module.exports = GridOffset
View
@@ -0,0 +1,12 @@
+/*global
+exports,
+require
+*/
+
+exports.Grid = require('./grid')
+
+exports.GridClear = require('./grid_clear')
+
+exports.GridContainer = require('./grid_container')
+
+exports.GridOffset = require('./grid_offset')
@@ -8,7 +8,7 @@ $lang-reverse: left;
@import "partials/unsemantic-vars";
@include unsemantic-grid-placeholders;
-@include unsemantic-grid-base;
+@include unsemantic-grid-base(desktop);
@include unsemantic-grid-placeholders(desktop);
@include unsemantic-grid-scoped(desktop);
View
@@ -1,7 +1,7 @@
@import "partials/unsemantic-vars";
@include unsemantic-grid-placeholders;
-@include unsemantic-grid-base;
+@include unsemantic-grid-base(desktop);
@include unsemantic-grid-placeholders(desktop);
@include unsemantic-grid-scoped(desktop);
Oops, something went wrong.

0 comments on commit 0a83a99

Please sign in to comment.