Monday, 17 November 2014

Updated my Alternating Line Color Visual Studio Extension

I have just updated my Alternating Line Visual Studio Extension to support Visual Studio 2015 Preview. have fun Smile

vsix_AlternatingLineColorTextAdornment_large

It does what is says on the time adds those alternating lines to the code editor.

Coming soon adding custom color so you can customise it for the other themes.

Thursday, 9 October 2014

Just Updated “NotAClue Bootstrap Friendly WebForms Controls”

I have just updated my NotAClue Bootstrap Friendly WebForms Controls to version 0.1.4 you can find the source code on GitHub here Bootstrap Web Controls
I have added a Bootstrap Tabs control to enable the use of bootstrap tabs in a web forms application and support for Bootstrap 3.x
bootstrap-tabs-in-action
Figure 1 – note here there are two sets of Tabs and each remembers it’s own currently selected tab
I have made the current version work but using cookies so there is no post-back but the currently selected tab will be remembered over post-back, also note that all the controls are rendered for ALL tabs so when switching tab there is no post-back to the server.
P.S. sorry it took so long but I’ve been busy and I lost access to my GitHub account due to not fully understanding two factor auth (or just not reading the instructions).
Updated: version 0.1.5 now has a dependency on jQuery.cookie to remember the selected tab before postback
Updated: Finally I am now clearing the cookie when you first land on the page,when is not a post-back i.e. if(!Page.IsPostBack)
More posts to come around Bootstrap and Dynamic Data.

Friday, 31 January 2014

Microsoft announce a Preview of Dynamic Data provider and EntityDataSource control for Entity Framework 6

See Announcing preview of Dynamic Data provider and EntityDataSource control for Entity Framework 6 for full details

Monday, 30 December 2013

Bootstrap Friendly Dynamic Data Project Template Goes Live

Today I finished my Bootstrap Friendly Dynamic Data Project Template you can find the source up on GitHub and the Project Template on Visual Studio Gallery 

There will be more to come with many addition already on NuGet that just need minor tweaks to make them Bootstrap compatible and much much more.

Sunday, 22 December 2013

Moving My Source Code to GitHub

This is just a note to let fans know I am moving my source code to GitHub this is not because I don’t love Codeplex I do but people see to feel it’s easier to send in bug fixes and feature requests there and it does seem to be the Home of Open Source Stuff these days.

So I’m moving my bits there over the next few months starting with my Bootstrap Friendly Controls and then my Bootstrapped Dynamic Data Project Template for Entity Framework.

See you there.

Thursday, 29 August 2013

CheckBox and CheckboxList that look like Bootstrap buttons-checkbox

I really Like Bootstrap and I had the need for the Bootstrap buttons-checkbox see Figure 1 below but not being a client side genius Smile with tongue out and could not workout how I would get the selected values, and I like the use the right tool or the right job (i.e. Checkbox for Checkbox and Radio button for Radio button) So I looked around and found this article here Stuff you can do with the “Checkbox Hack” and I thought I can make that work for me Ninja

Bootstrap buttons-checkbox

Figure 1 – Bootstrap buttons-checkbox

So I made my own CSS (in LESS of course until I can get SASS) so here is the LESS source

// checkbox and rtadio button styles
.checkbox-buttons
{
// hide the checkbox/radio button
input[type=checkbox],
input[type=radio]
{
// hide checkbox
display: none;
}

// Default State
label
{
display: inline-block;
*display: inline;
padding: 6px 12px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 14px;
line-height: 20px;
color: #7c7c7c;
text-align: center;
-webkit-text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
*background-color: #e6e6e6;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border: 1px solid #cccccc;
*border: 0;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border-bottom-color: #b3b3b3;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
font-weight: bolder;
}
// Toggled State
input[type=checkbox]:checked + label,
input[type=radio]:checked + label
{
color: #333333;
background: rgb(74, 238, 48);
*background-color: rgb(112, 255, 124);
//background: linear-gradient(top, #1e5799 0%, #7db9e8 100%);
//background: linear-gradient(to bottom, rgb(112, 255, 124), rgb(4, 212, 21));
-webkit-text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.9);
text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.9);
}
// Mouse over State
input[type=checkbox]:hover + label,
input[type=radio]:hover + label
{
-webkit-box-shadow: inset 2px 3px 2px #cccccc, 0 1px 6px rgba(255, 255, 255, 0.2);
box-shadow: inset 2px 3px 2px #cccccc, 0 1px 6px rgba(255, 255, 255, 0.2);
}
}

.with-border-radius
{
& > label:first-of-type
{
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}

& > label:last-of-type
{
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
}

Listing 1 - checkbox-buttons and with-border-radius classes

So I have put it on NuGet here

Bootstrap buttons checkbox and radio buttons nuget package

Bootstrap buttons checkbox and radio buttons NuGet package

Use

Add the package to your project from NuGet

From the Package Manager Console type:
Install-Package NotAClue.Checkbox.Css.Buttons

It will add a Content folder to your project if it’s not already there with the checkbox-buttons LESS and CSS files add a reference to the min.css file to your master page and then decorate you CheckBoxes, CheckBoxLists, RadioButtons and RadioButtonLists with the “checkbox-buttons“ CSS class and if you want to have the ends of the buttons rounded add the “with-border-radius” CSS class. You will get the following:

checkbox-buttons-in-action

Figure 3 – Checkbox Buttons in action

In Figure 3 you will see I have made the selected style more differentiated than the on in Bootstrap, it’s just a matter of style and usability I have some none computer literate mobile users in mind and wanted to make it clear that they had set a value.

Download

Everything you need is on NuGet.