Integrating the Compass CSS Framework into Visual Studio

Originally posted on The DevStop:

Using Compass with .NET and Visual Studio

Intro to Compass Framework:

So here in my first blog post at thedevstop, I wanted to post about something I very much enjoy. And since I love the design side of development, I decided to go with the Compass Framework.

For any reader who isn’t familiar with the Compass css framework, it is a framework that takes advantage of sass to provide a whole bunch of premade css mixins. For example, take something simple, like adding a border radius. Doing it yourself, you would have to worry about all the different browser prefixes, but with Compass, all you need to do is:

 1: @import "compass/CSS3";
 2:
 3:.test-div
 4: {
 5:     @include border-radius(4px, 4px);
 6: }

Now, once you save the scss file, Compass will give you this:

 1:.test-div
 2: {
 3:     -webkit-border-radius: 4px 4px;
 4:     -moz-

View original 1,502 more words

build one page app by using bootstrap working with angular.js from begginng–Part2

Since sombody is intrested in this topic, I am going to finish it now.

here it is the structure of your folder

spa_01

Her it is the index.html page:

<!DOCTYPE html>
<html lang=”en” ng-app=”CsbApp”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>AngularJS Tutorial CSB Test App</title>

<!– Bootstrap –>
<link href=”css/bootstrap.css” rel=”stylesheet”>
<link href=”css/site.css” rel=”stylesheet”>

<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script&gt;
<script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script&gt;
<![endif]–>
<script src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script&gt;
<script src=”https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular-route.min.js”></script&gt;
<script src=”js/app.js”></script>
</head>
<body>
<div class=”container”>
<div ng-view></div>
</div>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script&gt;
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.js”></script>
</body>
</html>

then the list.html page is the patrial page will dynamic generate into the ng-view div holder:

<div class=”col-sm-6 col-md-6″ ng-repeat=”item in items” id=”{{item._id}}”>
<div class=”row”>
<div class=”col-sm-3 col-md-3″><img src=”{{item.logo.path_to_file}}” alt=”{{item.display_name}}” class=”img-responsive”></div>
<div class=”col-sm-9 col-md-9″>
<blockquote>
<p><i class=”glyphicon glyphicon-home iconstyle”></i> {{item.address.address1}}, {{item.address.suburb}}, {{item.address.postcode}}, {{item.address.state.name}}, {{item.address.country.name}}</p>
<p><i class=”glyphicon glyphicon-envelope iconstyle”></i> {{item.email}}</p>
<p><i class=”glyphicon glyphicon-phone iconstyle”></i> {{item.phone}}</p>
<p><i ng-show=”item.status==’active'” class=”glyphicon glyphicon-ok iconstyle”></i><i ng-show=”item.status!=’active'” class=”glyphicon glyphicon-remove iconstyle”></i> {{item.status}}</p>
</blockquote>
</div>
</div>
</div>

Last part is you module

var module = angular.module(“CsbApp”, [“ngRoute”]);

module.config(function ($routeProvider) {
$routeProvider.when(“/”, {
controller: “listsController”,
templateUrl: “list.html”
});

$routeProvider.otherwise({ redirectTo: “/” });
});

var listsController = [“$scope”, “$http”, function ($scope, $http) {
var self = this;
$http.defaults.headers.get={“x-device-longitude”:0,”x-device-latitude”:0};

var request = {
method:”GET”,
url:”http://api.muulla.com/app/merchant/all/10/1&#8243;
};

$http(request).success(function(response){
$scope.items=response.data;
}).error(function(errorMessage) {
console.log(errorMessage);
})

}];

build one page app by using bootstrap working with angular.js from begginng–to be continue

If you are an front end developer working with a team, the back code developer already build the api arrow you to access the data and give your the specify header required and then you could quickly build a page by using bootstrap to make the layout looking mobile friendly and angular.js can access api server very easy.

If there is not backend code involved then using subline could achieve that.

Could see below links:

http://sandywebdesigner.com/csb

here is the looking on desktop
angular01

looking in mobile:

angular02

Time for home, will continue tomarrow, write the code how to build using angular.js and bootstrap to quickly build an app for retrieve customize header request.

Using Grunt watch all your javascript changes —- Build a node.js website –part5

first install this dependance by run npm install grunt-cli -g (g means:install this in the globle level)

nodejsWebsite14

For node.js website run also need run npm install grunt-nodemon -save-dev (-save mean will add a reference to the package.json file, -dev means this only for developer )

then go to the project root level create a file name: gruntfile.js

//gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
nodemon: {
all: {
scripts: ‘app.js’,
options: {
watchedExtensions:[‘js’]//ask grunt watch all the js file
}
}
},
});

grunt.loadNpmTasks(‘grunt-nodemon’);
grunt.registerTask(‘default’, [‘nodemon’]);
};

once this has been done, then go the command run grunt;

then everytime your change in your project, grunt will auto restart the serve.js, I could just refresh the page don’t need to restart the server.

Using bower to add client side recource into your specify folder–Build a node.js website–part4

Now it is time to add clents size recource file into your specify folders, in my project I create a public folder to hold all the css and js,

In node.js there are a plug called bower will install the client packages for you.

1) In the root director create a file named .bowerrc and put an object inside the file:{“directory” : “public/lib”} this is to tell bower where you like to put your client sie resource

2) before to run bower, need change the .bowerrc file encoding , go to file advace save options,choose Western European(windows)-Codepage 1252

nodejsWebsite11

3) run bower install <packages name your want to install>

Tip:

1)make sure you have bower installed, if not run npm install bower -g (g meaning globle level)

2)the bower need git working with it, make sure your git install at globle level.

3)what I mean globle level, just need have path in your system, if you didn’t install git in globle level, you could manually add you path to it. if you don’t know how to add path just simply uninstall git and reinstall it , when install it this time make sure you select it install in globle level.

gitInstall

 

Since bootstrap is commonly used in a lot website and I am also very confident withe working with bootstrap. now it’s time using bower to install bootstrap

nodejsWebsite12

After that then just put the css and js file into the layout.vash

nodejsWebsite13

 

 

Modulize your website project —Build a node.js website from beginner – part3

You could write all your code inside the sever.js file, but this is not looking very nice and the node.js supports your to write very function to modules that will be easy maintain and to test it.

Especially in this day, we need write anything in MVC architecture way. Now we are going to creates a foleder named controllers in your project so here is the folder looks like.

nodejsWebsite04

now you have very nice and clear code in serve.js

Because I am not fan with jade, so vash engine is let you write html code like this @model.title

The index.js under the controllers file init your controllers.

nodejsWebsite06

here is your homeController.js file, get,post,delete,… wirte in this file

nodejsWebsite07

the last step is write your view, here is the layout.vash and index.vash

nodejsWebsite08

nodejsWebsite09

Then finally, go to local host will render page:

nodejsWebsite10

Building a website with node.js–to be continue

This will inlude knowledge of express,view engines,controllers,services,static resources,client-side dependencies.

After you installed the node.js tools for Visio Studio, when you start create a new project you could choose build a nodejs website

nodejs website

Once you created it, the package.json is like your create other project,this is to know what dependence I used in my project.

Clear your server.js code.

nodejsWebsite02

Now just run your server.js first, you could open a browser you could the request in your server

nodejsWebsite03

What is node.js and why do we need it?

  •  node.js is a simple but powerful web server environment.
  • It arrow your write javascript to work with server
  • very important is that node.js using the google chrome v8 engine,so you don’t need concern your javascript to compare different browzers.
  • It also arrow you use Visual Studio just by install a plug called node.js Tools for visual studio, here is the link:     http://nodejstools.codeplex.com/wikipage?title=Screenshots
  • It is very good run it in Visio studio, because for debugger is very easy

How to use Visual Studio debugging JavaScript code

Recently using angularjs quite offen, I know there are a lot tutorial tell you how to use browse to debugging the javascript. But I am .net developer, I really like to use VS studio to do the debugging isn’t that will be more easy.

Here I search internet and finally figured out how to do it. I put it here how that could help someone else.

First, Open IE(my solution is VS2013 debugging working with IE browse, It seems that this solution working with IE, I test in google Chrome doesn’t work)

Second,Open you application solution, go to Debug->Attach to Process…

debuggingJavascript01

Now you could set breaking point, and debugging like below

debuggingJavascript02In_VS2013

Best Web Design, web developer, php developer,designers,freelance

Follow

Get every new post delivered to your Inbox.

Join 104 other followers