racl101 + css   497

Ecommerce University | Shopify - using if statements within js.liquid files - Shopify Design
This forum contains a good explanation of why certain liquid template keywords like: {{ template }} do not return what you expect in .js.liquid files. So don't use it to try to detect the template from within the .js.liquid files. Instead, in the theme.liquid template, in the head tag do something like this:

<script>
var template = {{ template | json }};
</script>

and then use that variable in your JavaScripts that you include externally, like so:

if(template === 'index'){
console.log('homepage loaded');
}
shopify  ecommerce  university  forum  guide  reference  explanation  css  javascript  assets  template  detection  liquid  syntax  caveat  proviso  toread  tolearn  tounderstand 
august 2018 by racl101
Sass: Sass Basics
If using Laravel Mix then you want the SASS syntax
sass  css  compiler  documentation  guide  reference  toread  tolearn  totry  tounderstand 
may 2018 by racl101
laravel-mix/installation.md at master · JeffreyWay/laravel-mix
This guide actually talks about how to use Laravel mix in stand-alone, non-laravel projects and it seems to work well.
github  documentation  guide  reference  laravel  mix  laravel-mix  webpack  howto  setup  install  standalone  project  non  laravel5  tutoria  javascript  css  compiling 
april 2018 by racl101
Can't import css from node_modules/ · Issue #412 · JeffreyWay/laravel-mix
This example demonstrates to add / import a CSS dependency, such as the Animate.css library, that is installed via NPM (i.e. npm install --save-dev animate.css), into a Sass file using the @import statement and having Laravel (Webpack) Mix compile the single .css file.
github  forum  howto  example  css  npm  dependency  animate.css  sass  package  laravel  webpack  mix  guide  reference  jeffreyway 
april 2018 by racl101
gulp - Laravel elixir and autoprefixer - Stack Overflow
How to prevent browser vendor prefix rules from being removed in output when you need them there. Set, elixir.config.css.autoprefix.enabled = false;
override  CSS  Elixir  Stackoverflow  Howto  config  LAravel  prefix  Browser  Gulp  disable  autoprefixer  vendor  example 
august 2016 by racl101
jquery - Wrapping a div around every three divs - Stack Overflow
jQuery way of creating Bootstrap .row wrappers every 3 or 4 items to create nice flush grids where every item has either a col-md-4 or col-md-3 class.
wrap  elements  HTML  grid  multiple  example  trick  Row  wrapper  Bootstrap  Stackoverflow  CSS  JQuery  Howto 
may 2016 by racl101
jQuery - use wrap() to wrap multiple elements? - Stack Overflow
jQuery way of creating Bootstrap .row wrappers every 3 or 4 items to create nice flush grids where every item has either a col-md-4 or col-md-3 class.
wrap  elements  HTML  grid  multiple  example  trick  Row  wrapper  Bootstrap  Stackoverflow  CSS  JQuery  Howto 
may 2016 by racl101
Animate.css
Reen theme uses this. Amazing, straight CSS animation ligrary.
demo  Animation  library  CSS  animate  REen  CSS3 
march 2016 by racl101
daneden/animate.css: A cross-browser library of CSS animations. As easy to use as an easy thing.
Reen theme uses this. So does Bootstrap nofify plugin. Really great animation library.
Github  CSS  animate  Animation  library  Script  REen 
march 2016 by racl101
« earlier      
per page:    204080120160

related tags

-webkit-tap-highlight-color  2d  :first  :not  :visible  @import  absolute  active  add  addon  add_editor_style  admin  adobe  advanced  ajax  align  alignment  alignments  alistapart  alpha  alternative  alternatives  alternator  amyhoi  analytics  anchor  and  Android  Angular  Angularjs  animate  animate.css  animation  animations  api  app  apple  apps  arabic  architecture  arrow  arrows  article  asset  assets  asset_url  asterik  audio  auto  automate  autoprefixer  Awesome  babel  Backdrop  background  background-image  backgrounds  badge  bar  beginners  best  bestpractices  bidi  binding  Bless  block  blockquote  blog  blueprint  body  body_class  boilerplate  book  Bootsnip  bootstrap  bootstrap3  Bootstrapv2.3.2  border  box  box-shadow  break  breaks  browser  browsers  bubble  bubbles  bug  bullet  bullets  bulma  bundle  button  buttons  calculations  calculator  calendar  calendarpicker  callback  capability  capitalize  caveat  Cell  cellpadding  cellspacing  center  centered  centering  change  chart.js  cheatsheet  cheatsheets  checkbox  checklist  child  childtheme  childthemes  chrome  circle  class  classes  cli  click  client  close  cms  coda  code  Codekit  codepen  codex  coding  collapse  collapsed  collapsible  collapsing  color  colors  colorscheme  colorschemer  column  columns  combined  commandline  comments  comparison  compass  compatibility  compiler  compiling  completer  component  composer  compress  compression  compressor  concatenation  conditional  config  container  containing  contents  control  conversion  converter  coordinates  corners  counter  coverage  create  crossbrowser  crossfit  css  css-hack  css-tricks  css2  css3  csstr  csstricks  CSS_selector  csv  custom  customization  cycle  data  data-types  datatables  david  david-walsh  davidwalsh  debugging  default  demo  dependency  design  designer  detection  dev  developer  development  devicewidth  devotee  dhtml  dialog  difference  directive  disable  disclosure  display  display-none  div  docs  documentation  documetation  DOM_crawler  download  draw  drop-shadow  dropcaps  dropdown  dynamic  dzone  ebook  ecommerce  editor  ee2  effect  effects  element  elements  Elixir  em  email  Emmet  ems  emulation  enable  end  enquire  equal  error  error-handling  errors  Event  example  examples  expand  explanation  explnation  explorer  expressionengine  expressions  extension  facebook  fade  family  fancybox  feature  field  filament  file  filter  filters  find  Fineuploader  firebug  firefox  first  fix  fixed  flexbox  flexslider  float  floating  floats  fluid  focus  folder  font  fonts  form  forms  forum  foundation  foundation6  framework  frameworks  free  front  front-end  frontend  fun  function  functional  gallery  gem  generator  git  github  glow  glyphicon  google  google-analytics  googlemap  gotcha  gradient  gravity  gravityforms  grid  group  guide  Gulp  gzip  hack  hacks  haml  handcrafted  happycog  hebrew  height  helvetica  hex  highlight  highlighting  hinter  horizontal  horizontally  hover  howto  hr  html  html5  Hubspot  humor  hype  i18n  icon  icons  id  ie  ie6  ie7  ie8  ie9  iframe  image  imagemagick  images  import  important  improve  in  info  infographic  infographics  inheritance  inline  inline-block  inspector  inspiration  instacss  install  instructions  interesting  interface  internationalization  internet  internet-explorer  internetexplorer  internet_explorer  ios  iOS7  ipad  iphone  iui  javascript  javascripts  jeffreyway  jeffreyzeldman  joke  joomla  jplayer  jquery  jquery-ui  jquerymobile  jqueryui  js  jsfiddle  json  keynote  lang  language  laravel  laravel-mix  laravel5  layout  length  less  lessapp  letter  level  library  lightbox  lightface  like  likebox  line  line-height  linear  links  liquid  list  list-style-type  load  loader  loading  localization  locate  logical  long  mac  macosx  magic  make  management  manual  margin  margins  marker  markup  math  MDn  media  media-queries  mediaqueries  mega  megamenu  menu  menus  meta  metaslider  method  microsoft  middle  minimize  mix  mixin  mixins  mobile  mockup  modal  mode  model  modernizr  module  MODx  mootools  mosaic  moz  mozilla  multi  multilevel  multiple  mysql  native  nav-menu  navbar  navigation  navigation-menu  navigationmenu  negative  negative-margin  nettuts  newsletter  Ng-class  Nganimate  Ngclass  node  non  Not  npm  nth-of-type  object  object-oriented  occurrences  off-canvas  official  old  oocss  oop  opacity  open-source  operators  optimization  oriented  osx  overflow  overlay  override  package  Packagecontrol  packagist  padding  page  pagebreaks  parallax  parser  path  pattern  performance  phing  photoshop  php  picker  picture  pixel  player  playground  plugin  plugins  Plunker  png  polyfill  popover  popup  position  positioning  post  powerpoint  practices  prefix  preload  preprocessor  presentation  prettyPhoto  preview  print  productivity  programming  progress  progressbar  project  projects  properties  property  prototyping  proviso  psd  pseudo  pseudo-class  public  purpose  px  python  queries  query  quote  quotes  radius  rails  rails3  rating  react  reactjs  read  readability  ready  redesign  REen  reference  regex  register  regular  relative  Remove  replaced  replaced-elements  repository  reset  resolve  resource  resources  respond  respond.js  responsive  responsivedesign  rgba  roots  rotating  rotating-backgrounds  round  rounded  roundedcorners  Row  ruby  rubyonrails  rule  safari  safe  sass  scaffold  scaling  screencast  screencasts  Script  scripts  scroll  scrollable  Scrollbar  scrolling  search  select  Selectable  selector  selectors  selenium  SEO  service  set  setting  setup  shadow  sharing  shopify  short-hand  shortcut  shortcuts  show  site  sitepoint  sizes  skeleton  Skin  slate  slicing  slide  slider  slideshow  smashing  smashingmag  smashingmagazine  smooth  snappy  snippets  social  software  sort  sparkup  spec  specificity  specs  speech  spinner  sprite  spriteme  sprites  spriting  sql  stackexchange  stackoverflow  stackoverlow  standalone  standard  standards  startbootstrap  state  statement  states  steps  stretch  string  structure  studio  style  style-loader  styles  stylesheet  stylesheets  styleswitcher  styling  sublime  sublimetext  Sublimetext3  submit  superfish  support  Svg  switch  symbols  symfony  syntax  table  tableless  tables  tag  Tags  tap  tech  template  templates  templating  test  testing  text  text-editor  textmate  theme  themes  theming  theory  timeline  tinymce  tip  tips  title-bar  toggle  tolearn  tool  tools  tooltip  tooltips  tooltipsy  top  toread  totry  totunderstand  tounderstand  touse  towatch  tracking  transformation  transformations  transition  transitions  transparency  transparent  triangle  trick  tricks  trigger  troubleshoot  troubleshooting  tutoria  tutorial  tutorials  twitter  two  typekit  typography  ui  Ul  unicode  units  university  unordered  upload  uploader  uppercase  urls  use  utilities  utility  validate  validation  validators  valign  vendor  versioning  vertical  vertical-align  Vh  video  viewport  vim  visibility  visual  vs.  vue  vuejs  Vw  w3c  w3schools  walker  wallpaper  web  webdesign  webdev  webinspector  webkit  webmaster.stackexchange  webpack  webpage  websafe  website  web_development  weight  whitespace  width  widths  wiki  within  wkhtmltopdf  woothemes  Word  wordpress  wordpress-themes  wordpress.stackexchange  wordpress_css  wordpress_css_classes  words  wordwrap  workaround  workflow  wp  wp_enqueue_style  wrap  wraper  wrapper  wysiwyg  Xcode  xhtml  xml  xpath  yahoo  yoast  yui  zero  zoom  zurb 

Copy this bookmark:



description:


tags: