Skip to content

Instantly share code, notes, and snippets.

@sitefinitydcx

sitefinitydcx/bootstrap.master

Created June 13, 2012 12:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sitefinitydcx/2923828 to your computer and use it in GitHub Desktop.
Save sitefinitydcx/2923828 to your computer and use it in GitHub Desktop.
Download ZIP
Sitefinity 'bare minimum' styles & masterpage for use with Sitefinity v5 and Twitter Bootstrap v2.03
Raw
bootstrap.master
<%@ Master Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!doctype html>
<html lang="en">
<head id="Head" runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title></title>
<!-- remember to change path of css files -->
<link href="../App_Themes/ThemeName/bootstrap.css" rel="stylesheet">
<link href="../App_Themes/ThemeName/bootstrap-responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<!-- content -->
<asp:ContentPlaceHolder ID="content" runat="server" />
</div>
<!-- remember to change path to scripts -->
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap-transition.js"></script>
<script src="../js/bootstrap-alert.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/bootstrap-dropdown.js"></script>
<script src="../js/bootstrap-scrollspy.js"></script>
<script src="../js/bootstrap-tab.js"></script>
<script src="../js/bootstrap-tooltip.js"></script>
<script src="../js/bootstrap-popover.js"></script>
<script src="../js/bootstrap-button.js"></script>
<script src="../js/bootstrap-collapse.js"></script>
<script src="../js/bootstrap-carousel.js"></script>
<script src="../js/bootstrap-typeahead.js"></script>
</form>
</body>
</html>
Raw
sitefinityreset.css
body.sfPageEditor{background:#fff}
.clearfix:before, .clearfix:after {content: ""; display: table;} .clearfix:after {clear: both;}
.ScriptWrapper, .sfDisplayNone {display:none;}
.sf_1col_1_100 {float:none; margin:0;}
.sf_2cols_1_25, .sf_3cols_1_25, .sf_3cols_3_25, .sf_2cols_2_25, .sf_4cols_1_25,.sf_4cols_2_25,.sf_4cols_3_25,.sf_4cols_4_25{ float:left; margin:0; width:25%;}
.sf_2cols_1_33, .sf_3cols_1_33, .sf_3cols_3_33{ float:left; margin:0; width:33%;}
.sf_2cols_1_50, .sf_3cols_2_50{ float:left; margin:0; width:50%;}
.sf_2cols_1_67 {float:left; margin:0; width:67%;}
.sf_2cols_1_75 {float:left; margin:0; width:75%;}
.sf_2cols_2_33 {float:right; margin:0; width:33%;}
.sf_2cols_2_50 {float:right; margin:0; width:50%;}
.sf_2cols_2_67 {float:right; margin:0; width:67%;}
.sf_2cols_2_75 {float:right; margin:0; width:75%;}
.sf_3cols_2_34 {float:left; margin:0; width:34%;}
.sf_5cols_1_20,.sf_5cols_2_20,.sf_5cols_3_20,.sf_5cols_4_20,.sf_5cols_5_20 {float:left; margin:0; width:20%;}
.sf_2cols_2_25 .sf_2cols_2in_25, .sf_2cols_2_33 .sf_2cols_2in_33, .sf_2cols_2_50 .sf_2cols_2in_50, .sf_2cols_2_67 .sf_2cols_2in_67, .sf_2cols_2_75 .sf_2cols_2in_75, .sf_3cols_2_34 .sf_3cols_2in_34,.sf_3cols_3_33 .sf_3cols_3in_33, .sf_3cols_2_50 .sf_3cols_2in_50,.sf_3cols_3_25 .sf_3cols_3in_25, .sf_4cols_2_25 .sf_4cols_2in_25,.sf_4cols_3_25 .sf_4cols_3in_25,.sf_4cols_4_25 .sf_4cols_4in_25, .sf_5cols_2_20 .sf_5cols_2in_20,.sf_5cols_3_20 .sf_5cols_3in_20,.sf_5cols_4_20 .sf_5cols_4in_20,.sf_5cols_5_20 .sf_5cols_5in_20 {margin-left:12px;}
.sf_block {display:block;}
.sf_cols {clear:both; display:inline-block; margin:0; padding:0; width:100%; _width:auto;}
.sf_cols:after {clear:both; content:""; display:block; font-size:1px; height:0; visibility:hidden;}
.sfimageWrp {overflow-x: hidden;}
.sfimageWrp img, .sfContentBlock img{width:auto; max-width:100%; height:auto;}
.sfClearfix:after {clear:both; content:""; display:block; font-size:1px; height:0; visibility:hidden;}
* .sf_colsOut+.sf_colsOut{*margin-left:-1px!important;}
* html .sf_cols{*display:block;}
* html .sf_cols .sf_colsOut{*display:inline;}
* .sf_colsOut+.sf_colsOut{*margin-left:-1px!important;}
@michaelroper
Copy link

Is that a wayward LESS variable at the end of line 17 of the CSS?

Also, have you found a good way to use the Bootstrap grid columns in Page Layouts?
I've done this - https://gist.github.com/2928782 - but it breaks in the Page Editor mode..

@sitefinitydcx
Copy link
Author

Hey Michael,

Thanks for catching that - it should have been 12px (already changed in the sample listing).

It's a gist that belongs to http://jbokkers.posterous.com/sitefinity-thunder-and-twitter-bootstrap where I wrote up how to get you started (just the 101). I have not built it out yet to fully suppport the columns structure both ways. Once Sitefinity v5.1 will be released I'm planning on building in full support in the sf-boilerplated repository with 2 templates/themes; one for html5 boilerplate and the other for Twitter Bootstrap.

@sitefinitydcx
Copy link
Author

Version 1 of the fully compatible version is now available at the SF-Boilerplated repository (https://github.com/jbokkers/SF-BOILERPLATED).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment