working on it ...


Explore Public Snippets

Sort by

Found 395 snippets matching: jonah

    public by JonahM  298490  2  6  4

    Responsive Type

    No Javascript required for responsive text! Pure CSS3
    /* Code Reference & Examples: */
    What Does vw and vm mean? 
        1vw = 1% of viewport width 
        1vh = 1% of viewport height 
        1vmin = 1vw or 1vh, whichever is smaller 
        1vmax = 1vw or 1vh, whichever is larger
    body {
    	background-color:   #ff5442;
      font-family:        ‘Lato’, Arial, sans-serif; 
      margin:             2vw;
    h1 {
    	color:              #fff;
    	font-size:          6vw;
    	font-weight:        900;
    	text-transform:     uppercase;
      line-height:        .3vw;
    h2 {
      color:              #fff;
      font-size:          4vw;
    p {
      color:              #fff;
      font-size:          1em;

    public by JonahM  275611  4  7  4

    Fluid CSS Rows

    I've realised in my coding experience that I need to To allow for space in the div or row tags when using text. Because everything is responsive on a web page, it's a good idea to use these classes. They work really well. Example:

    public by JonahM  269818  0  6  0

    Tweak Your UI using Form Alter - Drupal

    How to identify and edit elements on a page in Drupal. This is a drupal module code
    function ui_tweaka_help($path, $arg){
    	switch ($path) {
    		case 'admin/#ui_tweaka':
    			return t("Changes stuff");
    function ui_tweaka_form_alter(&$form, &$form_state, $form_id) {
      if (module_exists('devel')) { // Is the 'devel' module active?
         dpm($form_id); // Let's have a butchers at the form id
         dpm($form); // Ditto the form itself
         //$form['title']['#title'] = t('Main Heading for this page');
         //$form['title']['#access'] = FALSE;
         $form['field_image']['und'][0]['#description'] = t("Upload  nice piccy here");

    public by JonahM  2224  1  6  0

    Background Repeat

    Inspired by Google Forms' Code. Just a simple bit of code here for a repeating background image
    body {
      background-color: rgb(231,238,247);
      background-image: url('//');
      background-repeat: repeat;
      background-position: left top;

    public by JonahM  10740  5  6  3


    looking for a code to hack the java script of conjuguemos to instantly complete the page
    // Enter here the actual content of the snippet.            

    public by JonahM  4859  11  6  2

    Full width header Image

    A great method for designing a full width responsive header image. Using Twitter Bootstrap also. Site:
    <div class="container-fluid" id="fit" style="background: url(header.png) no-repeat center center fixed;
    			-webkit-background-size: cover;
    			-moz-background-size: cover;
    			-o-background-size: cover;
    			background-size: cover;">
    		<h1 class="container header strip-md" style="text-align:center; color:white;">
    				Header Title

    public by JonahM  4735  1  6  2

    Sublime - Flat UI Theme Predawn
      "theme": "predawn.sublime-theme",
      "color_scheme": "Packages/Predawn/predawn.tmTheme"
    # Really decent flat theme for Submlime text:

    public by JonahM  3408  3  7  4

    Multicolumn row with responsive images

    Here I've got 3 images, header text and paragraph text which all fit together, central and fully responsive. Because I'm using dimensions in percentages, they're responsive for any screen size. Using Bootstrap Site:
    <div class="col-sm-4">
    					<div class="text-center spacing always bottom little">
    						<img src="home.png" style="width:50%; height:50%">
    			<h3>The Temple of God</h3>
    			<p> this man will I look, even to Him that is poor and of a contrite spirit, and who trembles at my word</p>

    public by JonahM  3181  1  7  6

    Fluid Responsive Rows

    <section class="strip-sm row-fluid" style="background-color: #262626;" >
    	<div class="container">
    		<h4 style="color:white">This is copyrighted by Jonah McLachlan</h4>

    public by JonahM  3646  4  6  2

    Google Drive Media in HTML

    How to embed a Drive image on a HTML page. Example:;id=[IMAGE ID] See a demonstration:
      class="wp-image-892 alignright" 
      title="View the Flyer" 
      alt="Basic Training Flyer" 
    • Public Snippets
    • Channels Snippets