Tips and Tricks
Note
There are several tips & tricks we found over the time that are worth mentioning.
Floating
When using
float: left;, display: block; is not required anymore as every element which is floated automatically gets the block state. This does not apply to sub-elements.Image Optimisation
Images are the number one source of optimisation when it comes to file size. Optimise images using tools like CodeKit, ImageOptim or our internal Gulp command:
Contribution
Note
You are very welcome improving this boilerplate for Aldryn and your everyday use, especially the documentation always needs love. Feel free to fork and send us pull requests and follow the guidelines from within this section.
Code of Conduct
- Ensure code validates against or own guidelines
- Write documentation about what you are doing
- If you are not sure, just ask - join our community #aldryn on Freenode
Documentation
To extend and run the documentation, you will need Python and Virtualenv installed on your computer. You also need Git and a GitHub account obviously.
In addition, follow the steps underneath to get them running:
- clone the repository using
git clone https://github.com/aldryn/aldryn-boilerplate-bootstrap3.git - navigate to the documentation through
cd aldryn-boilerplate-bootstrap3/docs - run
make installto install additional requirements - run
make runto let the server run
Now you can open http://localhost:8000 on your favourite browser and start changing the rst files within
docs/.
You need to be aware of reStructuredText to format the documentation properly.
Guidelines
- Always start paths with a
/and leave the trailing slash. - Leave two spaces before a title.
- Write “Django”, “django CMS” or “Aldryn”.
- Write names properly: Sass, Bootstrap, JavaScript instead of sass (or SASS), bootstrap and javascript.
- Additional guidelines from django CMS apply.
Pull Requests
Before starting to work on issues or features, please mind the branching model:
- master is used for hotfix releases (1.1.x)
- develop is used for features and issues (1.x.x)
Everything that is merged to develop will be released within the next proper release (1.x.x). Major releases (x.0.0) will have their own branches but are always merged to develop before releasing to master.
A pull request needs the consent of two developers familiar with this repository to be merged.
Releases
- Adapt the CHANGELOG.rst
- Adapt AUTHORS.rst if required
- Bump version in boilerplate.json
- Create a GitHub tag
- Add the release notes on the GitHub tag
- Build new tag on readthedocs.org
- Run
bash tools/release.shbefore release on Aldryn - Run
aldryn boilerplate uploadto release on Aldryn - Test, inform, present
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive projects on the web especially for mobile, making front-end web development job faster and a lot easier. But, how many of us know the feature benefits of Bootstrap? Hence, this article is aimed to unveil those secrets of Bootstrap’s extensive capabilities. It is a handy tool for techies of varying skill levels, for devices of all shapes and sizes, and for projects of all sizes.
Bootstrap’s architectural framework is based on HTML and CSS design templates making it useful for typography, forms, buttons, tables, navigation, modals, image carousels and many other including optional JavaScript plugins. Bootstrap’s ability to easily create responsive designs is yet another interesting feature.
Use case
There might be programming contexts when you intend to use your own custom CSS and JavaScript code to develop sites or application, without even realizing the mighty capabilities of bootstrap which could have eased your task thus saving time.
Certain things are mandatory or optional before you begin to create the website – five columns layout, hover dropdown, column ordering and so on. Now, here is the good news!!! You need not create a custom code for all these tasks. We shall provide the readymade bootstrap code thus helping you to save your valuable development time.
The prime motive of this article is to share our learned knowledge about bootstrap and exhibit the framework’s capabilities:
Solution
Five columns Layout
Bootstrap does not provide any grid system by default that allows us to create five columns layout, but I can assure its simplicity.
This is the most advanced solution since it works smoothly with Bootstrap 3. Reusing classes conjointly with the current Bootstrap classes for responsive design is possible.
Initially, you need to create a default column definition in a similar method as Bootstrap does it. Call them col-*-5ths to avoid chaos with other names. Next, define the width of new classes, if media queries are different.
CSS:
Add this to your global stylesheet, or even to the bottom of your Bootstrap.css document.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-xs-5ths {
width: 20%;
float: left;
}
@media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left;
}
}
@media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left;
}
}
|
Sample HTML:
For instance, if you want to create a div element typical to a five column layout on medium screens and two columns on smaller ones, just use a similar code below:
1
2
3
4
5
|
<div class="row">
<div class="col-md-5ths col-xs-6">
...
</div>
</div>
|
How to Enable Bootstrap 3 Hover Dropdowns
The default navigation behaviour of Bootstrap does not have out-of-the-box hover dropdowns and the mobile menu is pretty boring. Still, if you prefer using it, here are some tricks to fine tune without complete customization.
Some clients, sites, or apps will expect you to have hover dropdowns on desktop. As seen below, this is never available out-of-the-box with Bootstrap 3.
You can easily add hover dropdowns with the following CSS:
1
2
3
4
5
6
|
@media only screen and (min-width : 768px) {
/* Make Navigation Toggle on Desktop Hover */
.dropdown:hover .dropdown-menu {
display: block;
}
}
|
The CSS makes the dropdowns show all independently without leading you to the parent link on mouse click. Though not the most ideal solution, the following javaScript (jQuery) may help you achieve desired results:
1
2
3
4
5
|
$('.dropdown-toggle').click(function() {
var location = $(this).attr('href');
window.location.href = location;
return false;
});
|
Don’t forget Container Fluid for Full Width Rows
During the first instance of using Bootstrap 3, we did not use the container-fluid class for full width rows. If that was our requirement, then we would have simply omitted the container. This makes sense and the grid system tends to work without it. But, it is problematic because Bootstrap’s row class has a -15px left and right margin.
Please find an example below to know more:
Note: You may view in a full window to understand better.
Column ordering
Alter the order of the grid columns with .col-md-push-* and .col-md-pull-* classes:
The push class will move columns to the right while the pull class will move columns to the left.
The order of the columns in your HTML mark-up should be as expected in mobile displays. This also signifies that the pushing and pulling is done on the larger desktop views.
Let’s study the following example:
Let’s study the following example:
We have two columns of equal width which will be pushed and pulled on sm or larger viewports.
1
2
3
4
5
6
7
8
|
<div class="row">
<div class="col-sm-6 col-sm-push-6">
<!-- Column A -->
</div>
<div class="col-sm-6 col-sm-pull-6">
<!-- Column B -->
</div>
</div>
|
On the larger desktop views (sm or larger) the columns are pushed and pulled.
On the mobile view (xs) the columns are fetched in the natural order of the markup.
Labels for Screen Readers
Using placeholders for your input fields is usually the best practice to even add a hidden label for the input, so that screen readers can read the page.
The following example helps us to understand how to set that up fast with Bootstrap:
1
2
|
<label for="id-of-input" class="sr-only">My Input</label>
<input type="text" name="myinput" placeholder="My Input" id="id-of-input">
|
No Gutter Column
Bootstrap facilitates customizing and compiling your own build based on your requirements. This is anything from colors, container sizes, and to gutter padding size. However, sometimes you might encounter an instance where you just want a single row without padding. In most cases, you will just select the column individually and get rid of the padding with CSS. You can build your own utility class helper to achieve this. This utility class will cover all column sizes and still supports full responsiveness.
Take a look at CSS snippet below:
1
2
3
4
|
.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}
|
And this is how you can use it in your HTML:
1
2
3
4
5
6
7
8
9
10
11
|
<div class="row no-gutter">
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>
|
