我记录

Having covered one of the best web development frameworks (Twitter Bootstrap) and a super fast CSS coding technique with tons of goodness (SASS), in my previous posts, it is time to burn some rubber and get some work done. We will get our hands dirty and code a web page right from scratch using Twitter Bootstrap and SASS.

This will be a 2 part tutorial, with detailed steps and a comprehensive overview on the processes and concepts behind them. The first part will cover the details of building the folder structure and creating markup using TBS for the layout. The second part will have a detailed walk through on the customization of the layout using SASS.

Before starting to code, make sure you have these items installed/configured/downloaded on your computer:

• Twitter Bootstrap framework. As elaborated in my previous post, TBS is an evolving web development framework, with a handy and extensive set of UI libraries to chose from. Its unique approach to UI development has been creating waves in the web authoring arena. With its object oriented approach to UI building, unobtrusive JS and semantic markup, a practical session in implementing the framework will be really interesting.
• Compass, an open source CSS framework, this preprocessor, makes use of SASS (refer to my previous post on SASS to know more). Let’s see how to implement mixins, variables and other powerful techniques that comes packed with it. For running Compass you need Ruby to be installed in your system.
• Ruby. If you are using Windows, please refer to RubyInstaller to deploy Ruby on your system. If you are using Linux or Mac OS X you can refer to Ruby’s download page.

What we’ll be creating

Demo | Download File | Part 2 of Tutorial

We will be creating a basic layout using the frameworks. The objective of this tut is not to demonstrate all the ui elements in TBS, and to show how to use it, but it concentrates on the workflow and the basic concept of making use of both these frameworks. I expect novice readers to spend much time going through the framework, and get your hands dirty as much as possible, rather than trying to find out a tutorial which spoon feeds each and every implementation. Believe me, self study has been the best approach that has worked for me, and i strongly believe this tut, will give a strong basement to start building pages by your own using TBS and SASS.

Lets get going

(Note: I’m using Mac OSx for this tutorial and the tools and terminology that I use will be based on using a mac)

Step 1: Creating a Compass Project and Setting up Your Folder Structure

First thing to do is to get your folder structure right. Lets start by creating a Compass project. This is important as Compass is a preprocessor and each Compass file has to be converted to normal css (.css files), before we can start using them.

Once you are sure which the folder you want to start working with, point Terminal to that location, and type in the following command to create a Compass project:

compass create 

This command generates a folder structure, as follows

It generates 2 folders ‘sass’ and ‘stylesheets’ and a .rb file ‘config.rb’. Obviously, all the SASS based files (with extension .scss or .sass) are to be put inside the ‘sass’ folder, and the generated .css files in the  ‘stylesheets’ folder. In case your app uses a different folder structure, this structure can be customized by changing the config.rb file, by updating respective folder names for each type of asset (stylesheets, sass files, js files ). By default, 3 SCSS files are also generated in the ‘sass’ folder – ie.scss, print.scss, screen.scss, and respective css files in the ‘stylesheets’ folder. These scss files are just starting points without any rules included (although the screen.scss has a reset module included we won’t be using it, since TBS has its own reset rules within its stylesheet file. So lets remove the reset which is included in ‘screen.css’).

After setting up the folder structure, there should be a mechanism where the Compass compiler keeps on updating any changes to the .scss files in the ‘sass’ folder, and replaces the respective files in ‘stylesheets folder’. This is what the following command does exactly (again, make sure the terminal is pointing to the root folder of the project, in our case, its ‘TBStut’).

compass watch

This will instruct the Compass compiler to poll for any changes in any .scss files within the relevant folder specified in the config.rb file and to create and update respective .css file to style sheet folder mentioned in the config.rb file.

Step 2: Putting TBS files in place

Now that the Compass project has been created, and the folder is set to watch for changes and update the CSS files, next step will be to add the TBS framework files to this structure. The downloaded file set from TBS repository has the following structure.

bootstrap.css and bootstrap-responsive.css play a major role in the framework while the ‘img’ folder contains the glyphicons which come with the framework and the ‘js’ folder has bootstrap.js, which includes all the scripts needed to make the jQuery plugins work. Let’s copy bootstrap.css and bootstrap-responsive.css to the ‘stylesheets’ folder (you could copy the minified versions too, if you wish), the ‘bootstrap.js’ to the js folder and later on gradually we’ll put images that we’ll be using in the tutorial into the images folder. Finally our folder structure looks like this:

Step 3:The HTML for the Page

Now straight to work! Lets create an HTML page ‘index.html’, and include all the TBS related stylesheets, available in the ‘stylesheets’ folder. To start with, I have used the starter template available in http://twitter.github.com/bootstrap/examples/hero.html, for the basic markup including the fixed top nav bar, the hero section and the content container. Here is how the code looks:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <link href="../assets/css/bootstrap.css" rel="stylesheet">
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
    <div class="container">
      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-large">Learn more ?</a></p>
      </div>
      <hr>
      <footer>
        <p>? Company 2012</p>
      </footer>
    </div> <!-- /container -->
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

In the above code I have removed the content section with 3 blocks of text which were present in the sample page. Here is a walk through of the above code and I’ll shed some light on the key points to be aware of.

• Line 6: This meta tag is for mobile devices and tells the browser to set the viewport to the width of the device with an initial scale of 1, and thus avoids a scaled down version of the page to be displayed initially on any mobile devices

• Line 18: The class ‘navbar’ and ‘navbar-fixed-top’ are for the top navigation bar which stays fixed to the top (navbar styles the element with TBS styles of a navigation bar and the addition of the extra class ‘navbar-fixed-top’ adds a rule position:fixed, and makes the bar stay fixed on top of the page). ‘container’ is a generic class in TBS which by default aligns to the center of its parent tag and takes the width value depending on the inclusion of bootstrap-responsive.css. If bootstrap-responsive.css is not included in the page, this class takes a default width of 940px, assuming there are no customizations done in the framework files, before downloading.

• Line 20: ‘.container’ is a generic class which aligns an element to the center of its parent tag.

• You might be wondering where the markup from lines 27 to 33 is getting rendered! As mentioned earlier, since we have made our layout responsive, by including bootstrap-responsive.css, this section creates a clickable area when the screen size is reduced beyond a limit – click on which, the nav bar links will be displayed as a drop-down menu. The class ‘nav-collapse’ plays an important role in this behaviour.  The data attributes have been used effectively in this scenario, and this is the way TBS has consistently made use of data attribute across the framework.

• Line 39: ‘hero-unit’ is the TBS class-name for main hero section of a page.

At the moment, this is how our page looks:

Now its time to add more details and UI elements to the page. Lets add a login form inside the hero unit.

• Go to the Twitter Bootstrap Page and grab the markup of ‘Basic form’.

• To position the form to the right side of the unit we need to group the h1 and two p tags (which are the child tags of the div with class ‘hero-unit’) inside another tag so as to float accordingly. Group those tags within a div tag and add a class ‘pull-left’. ‘pull-left’ is a generic class used by TBS to float any containers to the left.

• Now, paste the basic form markup from the URL mentioned above and float it to the right using ‘pull-right’ (pull-right floats an element to right).

• Since there are two floated elements inside ‘hero-unit’, we need to clear it. TBS uses the latest technique of clearing floats using :before and :after pseudo classes and offers a generic class ‘clearfix’ for the same. Lets add this class to ‘hero-unit’ and get it cleared.

• Update the text within the ‘hero-unit’ and refine the login form by adding a password field and relevant labels. Right now, the markup for the hero-unit looks like:

<div class="hero-unit clearfix">
 <div class="pull-left span5">
  <h1>Welcome to 1stwebdesigner</h1>
  <p>A one stop resource for web designers and developers</p>
  <p><a class="btn btn-primary btn-large">Explore our articles</a></p>
 </div>
 <div class="pull-right">
  <form class="well">
   <label>Username</label>
   <input type="text" class="span3" placeholder="Type your username">
   <label>Password</label>
   <input type="password" class="span3" placeholder="Type your password">
   <label class="checkbox">
    <input type="checkbox">Remember me
   </label>
   <button type="submit" class="btn">Log me in</button>
  </form>
 </div>
</div>

We are almost done with this page, once we’ve filled up the lower half of the page.

• Go to the typography components and grab the markup for the thumbnail pattern with a caption and a set of buttons.

• We will place two such teasers after the hero unit, and one single banner to the far right. Create a 3 column structure to place these elements.

• Now the row and span combination in TBS come into play ! The classnames ‘span1′ to ‘span12′ (in case you are using a 12 column grid) represent basic column units available in the framework. So for a 3 column structure with 3 equal width columns, we should be using 3 tags with class ‘span4′ for each.

• Also, since any classes starting with ‘span’ are floated to the left, clearing floats is something we need to take care of. Apart from ‘clearfix’, TBS has a pretty good technique to address this. While using multiple ‘span’ classes, the parent container is given the class ‘row’ which clears the inner floats.

• Now for placing a banner to the far right, lets use the default thumbnail style that TBS is offering. Grab the markup for the default thumbnail pattern and put it inside the third div with the class ‘span4′

The markup of the bottom part with 3 equal width columns will look like:

<div class="row">
	<div class="span4">
		<div class="thumbnail">
		 <img alt="" src="http://placehold.it/370x180">
		 <div class="caption">
		   <h5>Thumbnail label</h5>
		   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		   <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
		 </div>
		</div>
	</div>
	<div class="span4">
<div class="thumbnail">
 <img alt="" src="http://placehold.it/370x180">
 <div class="caption">
   <h5>Thumbnail label</h5>
   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
   <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
 </div>
</div>
	</div>
	<div class="span4">
	<a class="thumbnail" href="#">
	  <img alt="" src="http://placehold.it/370x300">
	</a>
	</div>
</div>

And the final markup should look like:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Bootstrap, from Twitter</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">




	<!-- Le styles -->
	<link href="stylesheets/bootstrap.css" rel="stylesheet">
	<link href="stylesheets/bootstrap-responsive.css" rel="stylesheet">




	<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
	<!--[if lt IE 9]>
		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
				<a class="brand" href="#">Project name</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#about">About</a></li>
						<li><a href="#contact">Contact</a></li>
					</ul>
				</div><!--/.nav-collapse -->
			</div>
		</div>
	</div>
	<div class="container">
		<!-- Main hero unit for a primary marketing message or call to action -->
		<div class="hero-unit clearfix">
 <div class="pull-left span5">
  <h1>Welcome to 1stwebdesigner</h1>
  <p>A one stop resource for web designers and developers</p>
  <p><a class="btn btn-primary btn-large">Explore our articles</a></p>
 </div>
 <div class="pull-right">
  <form class="well">
   <label>Username</label>
   <input type="text" class="span3" placeholder="Type your username">
   <label>Password</label>
   <input type="password" class="span3" placeholder="Type your password">
   <label class="checkbox">
    <input type="checkbox">Remember me
   </label>
   <button type="submit" class="btn">Log me in</button>
  </form>
 </div>
</div>
<div class="row">
	<div class="span4">
		<div class="thumbnail">
		 <img alt="" src="http://placehold.it/370x180">
		 <div class="caption">
		   <h5>Thumbnail label</h5>
		   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		   <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
		 </div>
		</div>
	</div>
	<div class="span4">
<div class="thumbnail">
 <img alt="" src="http://placehold.it/370x180">
 <div class="caption">
   <h5>Thumbnail label</h5>
   <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
   <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
 </div>
</div>
	</div>
	<div class="span4">
	<a class="thumbnail" href="#">
	  <img alt="" src="http://placehold.it/370x300">
	</a>
	</div>
</div>
		<footer>
			<p>? Company 2012</p>
		</footer>
	</div> <!-- /container -->




	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<script src="js/bootstrap.js"></script>
</body>
</html>

and here is how the page looks like now:

We now have the basic markup in place and things are set, what remains is the customization part where we will use SASS to customize this page. Look forward to my next post which will comprehensively cover the customization part of this layout. Hope this tutorial enlightened you, and wait for more enlightenment to come your way regularly!

This is the second part of my tutorial on How to Build a Website Using Twitter Bootstrap and SASS where we shall be customizing the Twitter Bootstrap-based web page using SASS. Just to set the context right, we will be starting out where we left off in the previous tutorial. If you haven’t seen it yet, please check it out and work through it. There you will learn how to setup your system for TBS, Ruby, and Compass.

In this tutorial we will be furnishing our webpage from the last tutorial using SASS. By the end of this tutorial you will be at the next level of developing beautiful websites and applications!

What we’ll be creating

Step 1: Creating a custom SASS file

Lets remember that we are using the same file set which we used in the first part of this tutorial. Also, please make sure all the setup guidelines are being followed. Primarily, the Compass compiler should be watching our entire folder to make sure all the changes in the SASS files are being converted to the relevant CSS file.

We can customize the above page in multiple ways:

• We can edit the bootstrap native rules right away, making changes to ‘bootstrap.css’ according to our design
• We can override the bootstrap rules using another stylesheet

The latter is always preferable (we discussed in the first part of the tutorial, that it’s always recommended to use a separate stylesheet file to override rules of any plugins or frameworks), because when it comes to multiple theming of the page, we just have to change the custom CSS file to another one in order to apply different skins to the layout. So lets create a SASS file (extension of a sass file is .scss) and place it in the ‘sass’ folder. Since the page talks about 1stwebdesigner, I’m naming it  ’1wd.scss’, and including it in the HTML. Also make sure you are including it after the line which includes all bootstrap styles. Our folder structure now looks like:

Step 2: Overriding the rules, using a mother hook

As a first step towards customization I always prefer adding a mother class to the body tag of the page, so that I can always group all the custom rules by referring to that class. So, lets start by giving the body tag of our HTML page a class – ‘fwd’. This helps us to maintain a first level of grouping in terms of selectors and makes sure we don’t override the bootstrap selectors directly.

Step 3: Customizing the layout

We will also be using a pinch of CSS3 in our styles. So lets include the CSS3 mixins in our .scss files so that we can make use of most of the CSS3 features easily using a single line of code.

Lets start with the header.

Here is a comparison of our current header and the customized one:

The key changes that we’ll be doing here are:

1. Changing the main navigation items to
   • Coding
   • Freebies
   • Inspiration
   • Tutorials
   • Web Design
   • WordPress
2. Insert the 1WD logo.
   The container ‘brand’ which contains the text ‘Project name’ should be styled in order to contain the logo. Lets add the logo image as a bg and hide the text using ‘text-indent’ and give a relevant height and width and a margin-top of 5px to position it uniformly vertically. The customized style for brand will now look like:

   1

   .brand{

   2	text-indent:-999px;

   3	width:169px;

   4	height:26px;

   5	padding:0;

   6	margin:5px 0 0 0;

   7	background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/1wd-logo-rd.png)

   8	no-repeat center center;

   9

   }

3. Change the bg color and add a border to the header container (Refer to the code snippet added towards the end of 4th point)
   Lets style the container ‘nav-inner’ by adding a bg-color and a border.
4. Style the nav items and add a border-radius.
   Navigation list items are under the container with class ‘nav’. We have to style the ‘a’ tag within the ‘li’ tag that comes under ‘nav’. Let’s add a border-radius of 5px (line number 11) using css3 mixin which (@include border-radius(5px) generates all the necessary browser specific rules to the CSS file being generated ) and relevant margin and padding along-with a hover bg-color to it (line no: 12. ‘&’ is added as a prefix to indicate the grouping of the selector that follows it. In this case, ‘&:hover’ associates the pseudo class – :hover to the parent selector, which is a.). With all the custom styles added, the navbar section styles looks like:

   1

   .navbar{

   2	.navbar-inner{

   3	background:#eee;

   4	border-bottom:solid 1px #ccc;

   5

   .nav{

   6	margin-left:20px;

   7

   li{

   8

   a{

   9	padding:5px;

   10	margin:5px 5px 0 0;

   11	@include border-radius(5px);

   12

   &:hover{

   13	background:#000;

   14

   };

   15

   }

   16

   }

   17

   }

   18

   .brand{

   19	text-indent:-999px;

   20	width:169px;

   21	height:26px;

   22	padding:0;

   23	margin:5px 0 0 0;

   24	background:url(http://cdn1.1stwebdesigner.com/wp-content/themes/1stwd/img/1wd-logo-rd.png)

   25	no-repeat center center;

   26

   }

   27

   }

   28

   }

Next is the hero unit

Here is a comparison of our current hero-unit and the customized one:

The key changes that we’ll be doing here are (the final code for this section is given towards the end of this bulleted section):

1. Change the bg colors of the container and the form within
   Lets style the container ‘hero-unit’ by adding a different bg color-#464646 , and a text color-#fff (line no:2 )
2. Style the header text and the call for action button
   For the text ‘Welcome’ to be in a separate color, we will have to wrap it inside a tag. Lets add it within a span tag, style it, and let’s apply a text-shadow for the whole H1 header.(line no: 4 to 8)
3. Style the form with the login fields
   Let’s add a border radius of 10px to the form using CSS3 mixin (line no: 15), a bg-color #>6d6b6b (line no: 16), and style the label and the input fields (line no. 17 to 30).
4. The CSS code for the hero-unit now looks like:

   1	.hero-unit{

   2	background:#464646;

   3	color:#fff;

   4

   h1{

   5	@include text-shadow(#000 1px 5px  10px);

   6

   span{

   7	color:#F5821F;

   8

   }

   9

   }

   10	.btn-info{

   11	padding:15px;

   12	font-size:1.2em;

   13

   }

   14

   form{

   15	@include border-radius(10px);

   16	background:#6d6b6b;

   17

   label{

   18	font-weight:bold;

   19	font-size:1.2em;

   20	&.checkbox{

   21	font-weight:normal;

   22	font-size:1em;

   23	color:#2d2d2d;

   24

   }

   25

   }

   26

   input{

   27	background:#464646;

   28	border:solid 1px #545252;

   29	@include box-shadow(inset #2d2d2d 1px 0px 3px);

   30	color:#8b7b6c;

   31

   }

   32

   }

   33

   }

Now comes the thumbnail section

Here is a comparison of our current thumbnail section and the customized one:

The key changes that we’ll be doing here are (the final code for this section is given towards the end of this bulleted section):

1. Style the thumbnail containers and add relevant images
   Let’s style give a border-radius of 10px to the thumbnail container (line no: 2), and a bg-color (line no: 3).
2. Positioning the caption of each thumbnails above the thumbnails.
   Let’s using positioning and absolutely position the caption on top of the thumbnails. To achieve this we will have to apply ‘position:relative’ to the parent tag of the caption (line no: 5), and then position the header (h5) accordingly so that it is appearing just on top of the thumbnail and in line with the bottom-line of the image, and also lets add a text shadow to it (line no: 8 to 13).
3. The code for this section now looks like

   1	.thumbnail{

   2	@include border-radius(10px);

   3	background:#55626B;

   4

   .caption{

   5	position:relative;

   6	color:#ccc9c9;

   7

   h5{

   8	position:absolute;

   9	top:-19px;

   10	left:10px;

   11	font-size:2em;

   12	color:#fff;

   13	@include text-shadow(#000 1px 5px 10px);

   14

   }

   15

   }

   16

   }

Finally the footer

I am just adding a custom pattern to the footer, add a border-radius and will be increasing the padding of the container to 20px. Please refer to the code of footer below:

Finally after all the customization and coding, here is how our customized page looks:

This is just an intro to the power of SASS and TBS together. In the CSS file that we have used we can make use of variables effectively by storing color values in them and then importing the variable CSS to the main stylesheet at the beginning. With the complexity of each page, all the features of SASS can be leveraged in a much better way. Mixins, Extend, Variables and much more are in store for us to explore and implement.

Get started with this if you are planning to plunge into the world of SASS and wait for more to come your way. I’d appreciate your feedback on my approach and on this tutorial to help me improve!

来源：http://www.1stwebdesigner.com/css/build-website-using-twitter-bootstrap-sass-2/ 

这么长翻译出来，估计要不少时间

掷鸡蛋者 at 2012-8-7 10:01

 还好现在可以直接在浏览器的时候翻译

我猛一看还以为是外国网站呢，英文不太好，看的一知半解