Skip to content

Commit

Permalink
background options
Browse files Browse the repository at this point in the history
  • Loading branch information
@grvpanchal
grvpanchal committed May 27, 2017
1 parent bceba28 commit bf5dd99
Show file tree
Hide file tree
Showing 16 changed files with 153 additions and 17 deletions.
1 change: 0 additions & 1 deletion Gemfile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@ group :development, :test do
gem 'jekyll'
gem 'jekyll-sitemap'
gem 'jekyll-seo-tag'
gem 'github-pages'
end
18 changes: 17 additions & 1 deletion dist/css/bootstrap-essentials.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/css/bootstrap-essentials.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/css/bootstrap-essentials.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/_config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ gems:
- jekyll-seo-tag

# Custom vars
current_version: 0.4
current_version: 0.5
repository: https://github.com/grvpanchal/bootstrap-essentials

download:
Expand Down
44 changes: 43 additions & 1 deletion docs/_includes/docs/css/containers.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@ <h2 class="font-weight-bold">Welcome to Example</h2>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<form class="m-t" role="form" action="index.html">
<form class="mt-xs-15" role="form" action="index.html">
<div class="form-group">
<input type="email" class="form-control" placeholder="Username" required="">
</div>
Expand Down Expand Up @@ -297,4 +297,46 @@ <h2 class="font-weight-bold">Welcome to Example</h2>
</div>
</div>
</div>
<div id="reading-sizes">
<h2>Reading Sizes</h2>
<p>When it comes to reading sites, large container
sizes make it uneasy to read text on reading sites like wiki,
blog, journal. furthermore, using offset in grid system, makes the reading
width in consistent at breakpoints. Therefore, Classes for different
size containers have been added to make container widths customizable.
You can also use container-smooth along with these sizes.</p>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Size</th>
<th>Class</th>
<th>width</th>
</tr>
</thead>
<tbody>
<tr>
<td>Normal Container</td>
<td><code>.container</code></td>
<td>1170px</td>
</tr>
<tr>
<td>Medium Container</td>
<td><code>.container-md</code></td>
<td>970px</td>
</tr>
<tr>
<td>Small Container</td>
<td><code>.container-sm</code></td>
<td>750px</td>
</tr>
<tr>
<td>Extra Small Container</td>
<td><code>.container-xs</code></td>
<td>480px</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
42 changes: 38 additions & 4 deletions docs/_includes/docs/css/helper-classes.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,9 +94,9 @@ <h5 class="text-muted font-weight-bold mb-xs-30">EXAMPLE</h5>
</div>
</div>
<h3>Center Align List </h3>
<p>Center align a bullet list is a tricky thing to achieve. Neither <code>text-align: center</code> nor <code>margin:auto</code> would be perfectly able to center align a bullet list. Thus
<code>.list-center</code> is added to display list as table in mobile devices. Below is an
example for center aligned bullet list.</p>
<p>Center align a bullet list is a tricky thing to achieve. Neither <code>text-align: center</code>
nor <code>margin:auto</code> would be perfectly able to center align a bullet list. Thus, <code>.center-list-xs</code>
is added to display list as table in mobile devices. Below is an example for center aligned bullet list.</p>
<div class="panel panel-default">
<div class="panel-body">
<h5 class="text-muted font-weight-bold mb-xs-30">EXAMPLE</h5>
Expand All @@ -118,7 +118,7 @@ <h5 class="text-muted font-weight-bold mb-xs-30">EXAMPLE</h5>
<div id="nounderline">
<h2>No Underline</h2>
<p>Underline below links make you feel that it is a hyperlink. but sometimes we just dont
require underline. In that case you can use <code>.no-undeline</code> to remove the undeline</p>
require underline. In that case you can use <code>.no-underline</code> to remove the undeline</p>
<div class="panel panel-default">
<div class="panel-body">
<h5 class="text-muted font-weight-bold mb-xs-30">EXAMPLE</h5>
Expand All @@ -134,4 +134,38 @@ <h5 class="text-muted font-weight-bold mb-xs-30">EXAMPLE</h5>
</div>
</div>
</div>
<div id="backgrounds">
<h2>Backgrounds</h2>
<p>As the current web designs are shifting more towards card base system,
more background color options are required to be applied on either on body
or wrapper.</p>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Class name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.bg-well</code></td>
<td>Well Background color</td>
</tr>
<tr>
<td><code>.bg-jumbotron</code></td>
<td>Jumbotron Background color</td>
</tr>
<tr>
<td><code>.bg-img</code></td>
<td>This class includes the basic configuration required to set
a background cover image on a selected element.
You just need to define background-image CSS property along
with this class.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
1 change: 0 additions & 1 deletion docs/_includes/docs/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ <h4><a href="{{site.github.url}}/about" >About</a></h4>
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body">
</a>
</div>
</div>

Expand Down
11 changes: 10 additions & 1 deletion docs/_includes/docs/home-footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,4 +53,13 @@ <h4 class="modal-title">Select Theme</h4>
<script type="text/javascript" src="{{site.github.url}}/dist/js/bootstrap-essentials.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="{{site.github.url}}/assets/js/style-switcher.min.js"></script>
<script type="text/javascript" src="{{site.github.url}}/assets/js/style-switcher.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if(window.innerWidth < 768) {
var themeselect = $('#themeSelector').html();
$('#themeSelector').remove();
$('#themeModal .modal-body').append(themeselect);
}
});
</script>
2 changes: 2 additions & 0 deletions docs/css.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
<li><a data-toggle="scroll" href="#table">Table</a></li>
<li><a data-toggle="scroll" href="#flex">Flex</a></li>
<li><a data-toggle="scroll" href="#login">Login</a></li>
<li><a data-toggle="scroll" href="#reading-sizes">Reading Sizes</a></li>
</ul>
</li>
<li> <a data-toggle="scroll" href="#spacing">Responsive Spacing</a>
Expand Down Expand Up @@ -73,6 +74,7 @@
<li><a data-toggle="scroll" href="#progress">Progress</a></li>
<li><a data-toggle="scroll" href="#list">List</a></li>
<li><a data-toggle="scroll" href="#nounderline">No Underline</a></li>
<li><a data-toggle="scroll" href="#backgrounds">Backgrounds</a></li>
</ul>
</li>
</ul>
Expand Down
18 changes: 17 additions & 1 deletion docs/dist/css/bootstrap-essentials.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/dist/css/bootstrap-essentials.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/dist/css/bootstrap-essentials.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "bootstrap-essentials",
"version": "0.4.0",
"version": "0.5.0",
"description": "Essential and common classes for bootstrap for faster web development",
"main": "index.js",
"scripts": {
Expand Down
17 changes: 16 additions & 1 deletion scss/_utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,23 @@
background-color: transparent;
}

.bg-well {
background-color: $well-bg;
}

.bg-jumbotron {
background-color: $jumbotron-bg;
}

.bg-img {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-color: rgb(65, 65, 65);
}

.text-white {
color: #fff;
color: #fff !important;
}

.vertical {
Expand Down
4 changes: 4 additions & 0 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,10 @@ $screen-phone: $screen-xs-min !global;
$navbar-height: 50px !global;
$navbar-padding-vertical: 15px !global;
$navbar-padding-horizontal: 15px !global;

//Background Colors
$well-bg: #f5f5f5 !global;
$jumbotron-bg: #eee !global;
}

$grid-breakpoints-custom: (
Expand Down

0 comments on commit bf5dd99

Please sign in to comment.