Good Bootstrap practices

Bootstrap is a CSS(Cascading Style Sheets) library developed by Twitter that lets you create responsive websites with easy to understand naming convention and well-designed grid system.

It has gained popularity due to its easy of use and pre-processor support, here are some good practices that will make your Bootstrap powered environment clean and easy to manage and maintain.

Use PreProcessors

Bootstrap offers Less based builds, these builds let you choose what modules you require and are needed to be enabled and helps you override the style sheets with writing lesser lines of the stylesheet.

Things like colors of text and background color of elements classes like navbar can be changed by changing the information stored in the variables.

Use of PreProcessors can make your Bootstrap lighter and have a cleaner code base, that is not bloated by the defaults.

Use scripts depending on the structure and modules

What I mean to say is if you website does not contain large amount of Bootstrap, then don’t use the bootstrap.min.js instead use the individual module files in development and later minify them to one file in production, so if you have a bootstrap based drop-down menu, you don’t have to use the complete bootstrap javascript library and only use the dropdown.js with its helper files.

This will make your website lighter and less bloated with things that are not going to be used and the client has a smaller file to render.

These are all the major steps I take while developing a website with Bootstrap.

Thank you for reading,

If you have any question feel free to leave a comment below.

CSS: Social share buttons

I designed social share buttons for Twitter, Facebook and Google Plus, all these buttons are written in pure CSS and part of a project I have been working on.

It’s clean and simple, you can add them to your website, it’s hosted on my CDN.

The CDN is not longer available 

Markup of square buttons.

Markup for curved buttons.

Jade users can use it too:

The CDN is not longer available 

Square:

a.one.twitter.square(href="#") Twitter  
a.one.facebook.square(href="#") Facebook  
a.one.google-plus.square(href="#") Google +  

Curved:

a.one.twitter.curved(href="#") Twitter  
a.one.facebook.curved(href="#") Facebook  
a.one.google-plus.curved(href="#") Google +  

Have a question? leave a comment below

How to fix horizontal scroll in Twitter Bootstrap

Twitter Bootstrap is a CSS library that lets you build website rapidly and let you focus on web development instead of writing lots of CSS and reinventing the wheel. If your content focuses more on code has large strings of code that need to have horizontal scroll instead of blotting in a specific area. You can fix it with these simple lines that can be added to the LESS, SASS and CSS library of Twitter Bootstrap.

pre {  
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

If that does not fix this issue include code tag too.

pre, code {  
  overflow: auto;
  word-wrap: normal;
  white-space: pre;
}

Sass on Raspberry Pi

Sass also known as Syntactically Awesome Stylesheets is a stylesheet scripting language that is interpreted into Cascading Style Sheet also known as CSS. Sass consists of two syntaxes, The original syntax, called “the indented syntax”, uses a syntax similar to Haml, It uses indentation to separate code blocks and newline characters to separate rules, it uses a .sass extension, The newer syntax uses block formatting that is similar to CSS, It uses braces to denote code blocks and semicolons to separate lines within a block, the new syntax uses a .scss extension.

Sass is really useful when you have to write a lot of stylesheet for a large project or when you want to write maintainable stylesheet library. Sass offers the following features variables, nesting and mixin.

Raspberry Pi can be a really good dedicated hardware to build and manage Sass based projects.

Installing Sass on you Raspberry Pi is really simple.

Installing Ruby.

(Raspbian/PiBang)

sudo apt-get install ruby  

(Arch Linux ARM)

pacman -S ruby  

Exporting Ruby path (Only for Arch Linux ARM), place this in your .bashrc.

PATH="$(ruby -e 'puts Gem.user_dir')/bin:$PATH"  
export PATH  

Installing the Sass gem.

gem install sass --no-ri --no-rdoc  

We can now write our first Sass file.

touch style.scss  

If you prefer SASS then.

touch style.sass  

Once you have added these lines to the file, we can now use sass to compile it.

sass style.scss:style.css  

or

sass style.sass:style.css  

If you have chosen SCSS view the code below. We are creating a mixin and using it.

@mixin bg($bg-color, $bg-fonts) {
    background-color: $bg-color;
    font-family: $bg-fonts;
}

If you have chosen SASS view the code.

=bg($bg-color, $bg-font)
 background-color: $bg-color
 font-family: $bg-font

body  
 +bg(#ddd, sans-serif)

The CSS output would look something like this for both files.

body {  
  background-color: #dddddd;
  font-family: sans-serif; }

If you want the Sass compiler to actively watch the file changes and update the output this can be done by a simple command.

sass --watch style.scss:style.css  

or

sass --watch style.sass:style.css  

Now you have Sass installed and setup on your Raspberry Pi.

Happy Coding!