No script editor installed? Want to style your page? No Problem!

As the old adage goes “Where there is will there is way!”, “Necessity is the mother of invention.”, or as the Tamil saying goes, வல்லவனுக்கு புல்லும் ஆயுதம். “If you have the ability and talent, you can achieve success with whatever (minimal) resources available at your disposal.” (for more on this check here)

As long as I have a notepad, I can create scripts, HTMLs, jQueries and magical flip/ bling CSS effects on any page. Mostly on Office 365 SharePoint Online pages hehe! But, this is not about the wonders of all that you can do with Notepad.

This is about what other options you have at your disposal, that would allow you to build stunning appealing Site Pages in a matter of hours with a list of useful online resources that I use and like. So, here goes:

Number 1:

Top of the list is LayoutIT: http://www.layoutit.com/ this is a bootstrap front end code builder. You can spin up a responsive grid system page with rows and columns effortlessly. All you have to do is drag and drop your number of containers/rows and how many columns you want in it? 6/6 or 4/4/4 or one row? Its all visual and it can’t get any easier than that.

Once you are satisfied with your mockup skeletal design, you can download the code and customize it to your sites/client requirements.

Example: http://www.layoutit.com/build

Here you can see nested Containers and Rows with Column and Navigation elements. You can remove and add additional divs, CSS and Scripts as well and download the file. (You can sign up, but you can get the code forgoing the option as well..pretty cool in my opinion)

Note: Make sure to include your cdn in the file you downloaded (duh!) Even better, get the latest minified(or not) bootstrap libraries into your Site Assets/ Scripts reference them instead.

Number 2:

http://dabblet.com/ This site is super cool as I like how it has multiple visualization options for your scripts and custom classes. Ya don’t have to wait at all! I’m an impatient person and I was to see the result right away and it works great for me 😉

What you see below is the “Result” of the rendered bootstrap script I quickly drafted from LayoutIT above. So far so good and pretty cool eh?

Number 3:

http://plnkr.co/

You want to learn angular/ bootstrap/ jQuery. Want to curiously browse other folks attempts at learning the same and get inspired by their solutions? Want to share your solutions with the community?

Want to style your code? Want to check the syntax? Get the references to latest CDNs and include them automagically? You get the idea…. get to Plnkr!

If you have a GitHub account, you can use it to join login with the same on Plnkr as well. Its all awesome. Save your plunks and show off your work!

Ofcourse there is also W3schools editors you can try

https://www.w3schools.com/html/default.asp

With these tools under your belt, you can tackle some of the day to day design challenges if your environment doesn’t have development tools yet and you still wish to be productive and contribute to the team, progressing towards your assigned task completion – these can come in very handy.

These are a few of my go-to tools and I wanted to share them with ya! Now, after all that mentions, if I don’t show something colorful, I’ll feel I didn’t give you any take-aways for the time you spent reading this. 🙂

So here ya go: My last post talked about getting SharePoint Site Usage reports in Office 365 SharePoint Online page and how you can get a cool looking dashboard with Excel Web Access web part.

If you would like to include Document Library analytics into the page as well with some prettied up links to Most viewed/popular documeents in the site’s libraries then

• Try using LayoutIt for getting your desired bootstrap grid that appeals you
• Take it to dabblet/plnkr and include the cdns for bootstrap for responsiveness and styles
• Get the URLs for links you wish to display in your SharePoint Online site page., it could be your Most Popular Library items from the library ribbon icon, your top documents/ contributors. Your web site/blog address etc., and then include that in your script’s anchor tag with button style.
• I used a library called font-awesome to derive icons from there for using in my images. They have a wide collection of icons CSS styles to choose from and I like to use them in all my projects.
• So here goes: http://dabblet.com/user/SwethaSan 
  Below is the script with all external reference links to fontawesome as well as bootstrap cdns for responsiveness.

  <!DOCTYPE html>
  <html>
  <head>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head>
  
  <body>  
  <h1>Namaskar, Vanakkam, Welcommen, Bonjour, Hola!!!!!</h1>  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  <style type="text/css">    
  i {      color: white;    }        
  #t1 {      border: none;      border-spacing: 10px!important;    }       
  #t1 td,#t1 th {      padding-top: 25px;      padding-right: 70px;      padding-bottom: 25px;      padding-left: 70px;      
  border-radius: 7px;      border-collapse: separate;      background-color: white;    }        
  td:hover {      opacity: 1;      outline: none;      border-color: #9ecaed;      box-shadow: 0 0 10px #616466;    }        
  #content {      height: auto;      float: left;    }      
  </style>  
  <div id="container">    
  <div id="content">      
  <table id="t1">        
  <tbody>          
  <tr>            
  <td style="background-color:#ff7b5d"><a href="https://www.google.com" style="text-decoration:none;color:white;"><i class="fa fa-group fa-3x "></i><br/><br/>Google</a></td>            
  <td style="background-color:#c6acff"><a href="https://www.swethasankaran.com" style="text-decoration:none;color:white;"><i class="fa fa-check-square-o fa-3x"></i><p>Swetha Sankaran</p></a></td>            
  <td style="background-color:#72b1ff"><a href="https://www.microsoft.com" style="text-decoration:none;color:white;"><i class="fa fa-area-chart fa-3x"></i><p>Microsoft</p></a></td>          
  </tr>          
  <tr>            
  <td style="background-color:#9b2e73"><a href="https://www.youtube.com" style="text-decoration:none;color:white;"><i class="fa fa-adjust fa-3x "></i><p>YouTube</p></a></td>            
  <td style="background-color:#5bad4e"><a href="https://www.meetup.com/fedspug-wspdc" style="text-decoration:none;color:white;"><i class="fa fa-pie-chart fa-3x"></i><p>Women In SharePoint DC, FEDSPUG</p></a></td>            
  <td style="background-color:#e23155"><a href="https://www.linkedin.com/in/link2swe" style="text-decoration:none;color:white;"><i class="fa fa-newspaper-o fa-3x"></i><p>Link2Swe</p></a></td>          
  </tr>          
  <tbody>      
  </table>    
  </div>  
  </div> 
   <!-- content to be placed inside <body>…</body> --></body></html><!-- content to be placed inside <body>…</body> -->

Here is the video/script on display at dabblet in its full swing!

This is just a kick starter for all the possible things you can do with designing and making your Office 365 site functional until you get your tools deployed and available to use.

These are some of my go to options. Please feel free to comment/share other tools you use that makes your lives easier to provide efficient solutions that meets clients needs and satifies their requirements and we can learn together.

Sharing is most definitely caring and the more we share we grow stronger together! 🙂

With that wise thought of the day, signing off from www, is Swetha! Have a beautiful Thursday folks, may it bring you all sorts of happiness and productive solutions your way.

Peace.