STYLE SWITCHER

Add Options from array in Select using jQuery

Add Options from array in Select using jQuery

<script>
var array = [
{ name: 'John', skills: 'html, css' },
{ name: 'Smith', skills: 'jquery, css' },
{ name: 'Jenny', skills: 'js, angular.js' }
];
var option = '';
for(var i = 0; i < array.length; i++){
option += '<option value="' + array[i].name + '">' + array[i].skills + '</option>';
}
$("#selectList").append(option);
</script>
More
Hugo – The world’s fastest framework for building websites

Hugo – The world’s fastest framework for building websites

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Hugo's Go-based templating provides just the right amount of logic to build anything from the simple to complex. If you prefer Jade/Pug-like syntax, you can also use Amber, Ace, or any combination of the three.

Website
More
Select2 – The jQuery replacement for select boxes

Select2 – The jQuery replacement for select boxes

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
  • In your language
  • Remote data support
  • Theming
  • Fully extensible
  • Dynamic item creation
  • Full browser support

Installation

In order to use Select2, you must include the compiled JavaScript and CSS files on your website. There are multiple options for including these pre-compiled files, also known as a distribution, in your website or application.
Using Select2 from a CDN
A CDN (content delivery network) is the fastest way to get up and running with Select2! Select2 is hosted on both the cdnjs and jsDelivr CDNs. Simply include the following lines of code in the <head> section of your page:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Single select boxes

Select2 was designed to be a replacement for the standard <select> box that is displayed by the browser. By default it supports all options and operations that are available in a standard select box, but with added flexibility.
<select class="js-example-basic-single" name="state"> 
    <option value="AL">Alabama</option> 
    ... 
    <option value="WY">Wyoming</option> 
</select>
Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call .select2() on any jQuery selector where you would like to initialize Select2.
// In your Javascript (external .js resource or <script> tag) 
$(document).ready(function() { 
    $('.js-example-basic-single').select2(); 
});
Website
More
Cube.js – Open Source Serverless Analytics Framework

Cube.js – Open Source Serverless Analytics Framework

Cube.js is an open source serverless analytics framework that is primarily used to build internal business intelligence tools or to add customer-facing analytics to an existing application.

A complete open source analytics platform: frontend SDKs and API backed by a fully managed analytics infrastructure.

Website

More
Sass Style Guide

Sass Style Guide

With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I've been gravitating toward. Perhaps they are useful to you or help you formulate ideas of your own. If you're looking for more examples, Sass Guidelines is another good place to look.

#Use Your Regular CSS Formatting Rules / Style Guide

This post is about Sass-specific stuff, but as a base to this, you should follow a whatever good CSS formatting guidelines you are already following. If you aren't yet, this roundup of style guides may help you. This includes things like:

  • Be consistant with indentation
  • Be consistant about where spaces before/after colons/braces go
  • One selector per line, One rule per line
  • List related properties together
  • Have a plan for class name naming
  • Don't use ID's #hotdrama
  • etc

#List @extend(s) First

.weather {

    @extend %module; ...

}

Knowing right off the bat that this class inherits another whole set of rules from elsewhere is good. Another benefit is that overriding styles for that inherited set of rules becomes much easier. Knowing when to use @extend versus @include can be a little tricky. Harry does a nice job of differentiating the two plus offers thoughts on how to use them both.

#List @include(s) Next

.weather {
  @extend %module; 
  @include transition(all 0.3s ease-out);
  ...
}

Next up is your @includes for mixins and other functions. Again, this is nice to have near the top for reference, but also allows for overrides. You might also want to make the call on separating user-authored @includes and vendor-provided @includes.

#List "Regular" Styles Next

.weather {

@extend %module;

@include transition(all 0.3s ease-out);

background: LightCyan; ...

}
Website
More