Skip to content

Commit

Permalink
For #15 Fully customizable bootstrap-sass based ReactPathly theme ful…
Browse files Browse the repository at this point in the history
…ly integrated into watchify and browser sync workflow
  • Loading branch information
victorkane committed Apr 10, 2016
1 parent 1cf708f commit e7f36d7
Show file tree
Hide file tree
Showing 79 changed files with 9,477 additions and 3 deletions.
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
## ReactPathways

An app to help you choose your own path to ReactJS and follow it step by step. And which also serves as an up-to-date non-trivial React, React Router and Redux example.
*Work in progress, but it might be worthwhile to checkout the commits, for example, look at https://github.com/awebfactory/react-pathways/issues/15, Initial integration of [bootstrap](http://getbootstrap.com/) and [bootswatch](http://bootswatch.com/) based ReactPathly "sub-theme" so I can work directly in Sass in my watchify/browser sync workflow, completed with https://github.com/awebfactory/react-pathways/commit/6c75f96075fdf40370d080df00056e9fb26efaff.*

*Initial MVP of this educational app will be ready early May at the latest.*

An app to help you choose your own path to ReactJS and follow it step by step. And which also serves as an up-to-date non-trivial React, React Router and Redux example with custom SCSS bootswatch/bootstrap theme, ReactPathly.

The ReactPathways example app is based on the latest versions of React, React Router and Redux, served up by a NodeJS/Express server which also exposes a REST API to provide data for the app.

Expand Down
2 changes: 0 additions & 2 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@
<base href="/" >
<title>react-starter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@function twbs-font-path($path) {
@return font-url($path, true);
}

@function twbs-image-path($path) {
@return image-url($path, true);
}

$bootstrap-sass-asset-helper: true;
19 changes: 19 additions & 0 deletions styles/bootstrap-sass/assets/stylesheets/_bootstrap-mincer.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
// Mincer asset helper functions
//
// This must be imported into a .css.ejs.scss file.
// Then, <% %>-interpolations will be parsed as strings by Sass, and evaluated by EJS after Sass compilation.


@function twbs-font-path($path) {
// do something like following
// from "path/to/font.ext#suffix" to "<%- asset_path(path/to/font.ext)) + #suffix %>"
// from "path/to/font.ext?#suffix" to "<%- asset_path(path/to/font.ext)) + ?#suffix %>"
// or from "path/to/font.ext" just "<%- asset_path(path/to/font.ext)) %>"
@return "<%- asset_path("#{$path}".replace(/[#?].*$/, '')) + "#{$path}".replace(/(^[^#?]*)([#?]?.*$)/, '$2') %>";
}

@function twbs-image-path($file) {
@return "<%- asset_path("#{$file}") %>";
}

$bootstrap-sass-asset-helper: true;
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@function twbs-font-path($path) {
@return font-path($path);
}

@function twbs-image-path($path) {
@return image-path($path);
}

$bootstrap-sass-asset-helper: true;
56 changes: 56 additions & 0 deletions styles/bootstrap-sass/assets/stylesheets/_bootstrap.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*!
* Bootstrap v3.3.6 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
73 changes: 73 additions & 0 deletions styles/bootstrap-sass/assets/stylesheets/bootstrap/_alerts.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
//
// Alerts
// --------------------------------------------------


// Base styles
// -------------------------

.alert {
padding: $alert-padding;
margin-bottom: $line-height-computed;
border: 1px solid transparent;
border-radius: $alert-border-radius;

// Headings for larger alerts
h4 {
margin-top: 0;
// Specified for the h4 to prevent conflicts of changing $headings-color
color: inherit;
}

// Provide class for links that match alerts
.alert-link {
font-weight: $alert-link-font-weight;
}

// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}

> p + p {
margin-top: 5px;
}
}

// Dismissible alerts
//
// Expand the right padding and account for the close button's positioning.

.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
.alert-dismissible {
padding-right: ($alert-padding + 20);

// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}

// Alternate styles
//
// Generate contextual modifier classes for colorizing the alert.

.alert-success {
@include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
}

.alert-info {
@include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
}

.alert-warning {
@include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
}

.alert-danger {
@include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
}
68 changes: 68 additions & 0 deletions styles/bootstrap-sass/assets/stylesheets/bootstrap/_badges.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
//
// Badges
// --------------------------------------------------


// Base class
.badge {
display: inline-block;
min-width: 10px;
padding: 3px 7px;
font-size: $font-size-small;
font-weight: $badge-font-weight;
color: $badge-color;
line-height: $badge-line-height;
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: $badge-bg;
border-radius: $badge-border-radius;

// Empty badges collapse automatically (not available in IE8)
&:empty {
display: none;
}

// Quick fix for badges in buttons
.btn & {
position: relative;
top: -1px;
}

.btn-xs &,
.btn-group-xs > .btn & {
top: 0;
padding: 1px 5px;
}

// [converter] extracted a& to a.badge

// Account for badges in navs
.list-group-item.active > &,
.nav-pills > .active > a > & {
color: $badge-active-color;
background-color: $badge-active-bg;
}

.list-group-item > & {
float: right;
}

.list-group-item > & + & {
margin-right: 5px;
}

.nav-pills > li > a > & {
margin-left: 3px;
}
}

// Hover state, but only for links
a.badge {
&:hover,
&:focus {
color: $badge-link-hover-color;
text-decoration: none;
cursor: pointer;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
//
// Breadcrumbs
// --------------------------------------------------


.breadcrumb {
padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
margin-bottom: $line-height-computed;
list-style: none;
background-color: $breadcrumb-bg;
border-radius: $border-radius-base;

> li {
display: inline-block;

+ li:before {
// [converter] Workaround for https://github.com/sass/libsass/issues/1115
$nbsp: "\00a0";
content: "#{$breadcrumb-separator}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space
padding: 0 5px;
color: $breadcrumb-color;
}
}

> .active {
color: $breadcrumb-active-color;
}
}
Loading

0 comments on commit e7f36d7

Please sign in to comment.