Nikita Pashinsky nikitapashinsky

## fontsource-with-remix.md

      
              1 file
            
          
              0 forks
            
          
              13 comments
            
          
              8 stars
            
          
                knowler
                / fontsource-with-remix.md
            
            
              Last active
              February 21, 2024 17:03
            
              
                Fontsource with Remix (pre-1.7.3)
              
          
    Fontsource with Remix

Fontsource is designed to work with projects that bundle their CSS. You import their stylesheet and the bundler will place the fonts in your build directory and the CSS file will have the correct URL for the @font-face src.
Remix doesn’t bundle CSS and so while you can import their CSS file and add it to your links, the URL to font will be incorrect. It is still possible to use Fontsource with Remix. We just need to create our own @font-face declaration with the correct URL to the font (ideally, one that benefits from Remix’s asset fingerprinting). There’s a bit of manual set up, but once that’s done, you can serve the font on your site and benefit from updates for the font.

Install your font:
npm install --save @fontsource/montserrat


## browsersync for ghost hbs and css
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// Static Server + watching css/html files
gulp.task('serve', ['css'], function() {

    browserSync.init({
        proxy: "http://localhost:2368"
    });

## grid.styl
/*
 * Динамическая сетка
 * Внедряется подмешиванием DOM-узлу поведенческих классов: grid_col_3, grid_cell...
 */

.grid
    box-sizing border-box

    /*
     * Генерирует стили для сетки

## README.md

      
              1 file
            
          
              513 forks
            
          
              58 comments
            
          
              2858 stars
            
          
                lopspower
                / README.md
            
            
              Last active
              May 20, 2024 23:50
            
              
                Hexadecimal color code for transparency
              
          
    Hexadecimal color code for transparency


How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.
Download This sample on Google Play Store


## _mobile-ready-web-app.html
<!doctype html>

<!-- Adapted from https://gist.github.com/tfausak/2222823 -->

<html>
  <head>
    <title>Mobile-ready web app</title>

    <!-- CONFIGURATION -->
	var gulp = require('gulp');
	var browserSync = require('browser-sync').create();

	// Static Server + watching css/html files
	gulp.task('serve', ['css'], function() {

	browserSync.init({
	proxy: "http://localhost:2368"
	});
	/*
	* Динамическая сетка
	* Внедряется подмешиванием DOM-узлу поведенческих классов: grid_col_3, grid_cell...
	*/

	.grid
	box-sizing border-box

	/*
	* Генерирует стили для сетки
	<!doctype html>

	<!-- Adapted from https://gist.github.com/tfausak/2222823 -->

	<html>
	<head>
	<title>Mobile-ready web app</title>

	<!-- CONFIGURATION -->