How to use bs-css - 10 common examples

To help you get started, we’ve selected a few bs-css examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github iwilsonq / gatsby-starter-reasonml / re / Post.bs.js View on Github external
]),
        /* [] */0
      ]
    ]);

var h2 = Css.style(/* :: */[
      Css.color(Css.red),
      /* [] */0
    ]);

var p = Css.style(/* :: */[
      Css.color(Css.black),
      /* [] */0
    ]);

var date = Css.style(/* :: */[
      Css.color(Css.darkgray),
      /* [] */0
    ]);

var Styles = /* module */[
  /* article */article,
  /* link */link,
  /* h2 */h2,
  /* p */p,
  /* date */date
];

function Post(Props) {
  var post = Props.post;
  return React.createElement("article", {
              className: article
github iwilsonq / gatsby-starter-reasonml / re / Header.bs.js View on Github external
/* :: */[
                Css.padding2(Css.px(16), Css.px(24)),
                /* [] */0
              ]
            ]
          ]
        ]
      ]
    ]);

var h1 = Css.style(/* :: */[
      Css.margin(Css.px(0)),
      /* [] */0
    ]);

var link = Css.style(/* :: */[
      Css.color(Css.white),
      /* :: */[
        Css.textDecoration(Css.none),
        /* [] */0
      ]
    ]);

var nav = Css.style(/* [] */0);

var Styles = /* module */[
  /* header */header,
  /* content */content,
  /* h1 */h1,
  /* link */link,
  /* nav */nav
];
github iwilsonq / gatsby-starter-reasonml / re / Header.bs.js View on Github external
// Generated by BUCKLESCRIPT VERSION 5.0.2, PLEASE EDIT WITH CARE
'use strict';

var Css = require("bs-css/src/Css.js");
var React = require("react");
var Gatsby = require("gatsby");

var header = Css.style(/* :: */[
      Css.backgroundColor(Css.hex("db4d3f")),
      /* :: */[
        Css.marginBottom(Css.px(16)),
        /* [] */0
      ]
    ]);

var content = Css.style(/* :: */[
      Css.display(/* flex */-1010954439),
      /* :: */[
        Css.alignItems(/* center */98248149),
        /* :: */[
          Css.justifyContent(/* spaceBetween */516682146),
          /* :: */[
            Css.margin2(Css.px(0), /* auto */-1065951377),
            /* :: */[
github iwilsonq / gatsby-starter-reasonml / re / Header.bs.js View on Github external
]);

var h1 = Css.style(/* :: */[
      Css.margin(Css.px(0)),
      /* [] */0
    ]);

var link = Css.style(/* :: */[
      Css.color(Css.white),
      /* :: */[
        Css.textDecoration(Css.none),
        /* [] */0
      ]
    ]);

var nav = Css.style(/* [] */0);

var Styles = /* module */[
  /* header */header,
  /* content */content,
  /* h1 */h1,
  /* link */link,
  /* nav */nav
];

function Header(Props) {
  var siteTitle = Props.siteTitle;
  return React.createElement("header", {
              className: header
            }, React.createElement("div", {
                  className: content
                }, React.createElement("h1", {
github iwilsonq / gatsby-starter-reasonml / re / Bio.bs.js View on Github external
var Css = require("bs-css/src/Css.js");
var React = require("react");

function str(prim) {
  return prim;
}

var wrapper = Css.style(/* :: */[
      Css.display(/* flex */-1010954439),
      /* :: */[
        Css.marginBottom(Css.px(16)),
        /* [] */0
      ]
    ]);

var img = Css.style(/* :: */[
      Css.width(Css.px(64)),
      /* :: */[
        Css.height(Css.px(64)),
        /* :: */[
          Css.borderRadius(Css.px(32)),
          /* :: */[
            Css.marginRight(Css.px(12)),
            /* [] */0
          ]
        ]
      ]
    ]);

var bioText = Css.style(/* :: */[
      Css.display(/* flex */-1010954439),
      /* :: */[
github iwilsonq / gatsby-starter-reasonml / re / Post.bs.js View on Github external
var link = Css.style(/* :: */[
      Css.textDecoration(/* none */-922086728),
      /* :: */[
        Css.hover(/* :: */[
              Css.textDecoration(/* underline */131142924),
              /* :: */[
                Css.textDecorationColor(Css.red),
                /* [] */0
              ]
            ]),
        /* [] */0
      ]
    ]);

var h2 = Css.style(/* :: */[
      Css.color(Css.red),
      /* [] */0
    ]);

var p = Css.style(/* :: */[
      Css.color(Css.black),
      /* [] */0
    ]);

var date = Css.style(/* :: */[
      Css.color(Css.darkgray),
      /* [] */0
    ]);

var Styles = /* module */[
  /* article */article,
github iwilsonq / gatsby-starter-reasonml / re / Header.bs.js View on Github external
Css.justifyContent(/* spaceBetween */516682146),
          /* :: */[
            Css.margin2(Css.px(0), /* auto */-1065951377),
            /* :: */[
              Css.maxWidth(Css.px(1000)),
              /* :: */[
                Css.padding2(Css.px(16), Css.px(24)),
                /* [] */0
              ]
            ]
          ]
        ]
      ]
    ]);

var h1 = Css.style(/* :: */[
      Css.margin(Css.px(0)),
      /* [] */0
    ]);

var link = Css.style(/* :: */[
      Css.color(Css.white),
      /* :: */[
        Css.textDecoration(Css.none),
        /* [] */0
      ]
    ]);

var nav = Css.style(/* [] */0);

var Styles = /* module */[
  /* header */header,
github iwilsonq / gatsby-starter-reasonml / re / Post.bs.js View on Github external
var Css = require("bs-css/src/Css.js");
var React = require("react");
var Gatsby = require("gatsby");
var Utils$ReactTemplate = require("./Utils.bs.js");

function str(prim) {
  return prim;
}

var article = Css.style(/* :: */[
      Css.marginBottom(Css.px(32)),
      /* [] */0
    ]);

var link = Css.style(/* :: */[
      Css.textDecoration(/* none */-922086728),
      /* :: */[
        Css.hover(/* :: */[
              Css.textDecoration(/* underline */131142924),
              /* :: */[
                Css.textDecorationColor(Css.red),
                /* [] */0
              ]
            ]),
        /* [] */0
      ]
    ]);

var h2 = Css.style(/* :: */[
      Css.color(Css.red),
      /* [] */0
github iwilsonq / gatsby-starter-reasonml / re / Bio.bs.js View on Github external
var img = Css.style(/* :: */[
      Css.width(Css.px(64)),
      /* :: */[
        Css.height(Css.px(64)),
        /* :: */[
          Css.borderRadius(Css.px(32)),
          /* :: */[
            Css.marginRight(Css.px(12)),
            /* [] */0
          ]
        ]
      ]
    ]);

var bioText = Css.style(/* :: */[
      Css.display(/* flex */-1010954439),
      /* :: */[
        Css.alignItems(/* center */98248149),
        /* [] */0
      ]
    ]);

var Styles = /* module */[
  /* wrapper */wrapper,
  /* img */img,
  /* bioText */bioText
];

function Bio(Props) {
  return React.createElement("div", {
              className: wrapper
github iwilsonq / gatsby-starter-reasonml / re / Header.bs.js View on Github external
// Generated by BUCKLESCRIPT VERSION 5.0.2, PLEASE EDIT WITH CARE
'use strict';

var Css = require("bs-css/src/Css.js");
var React = require("react");
var Gatsby = require("gatsby");

var header = Css.style(/* :: */[
      Css.backgroundColor(Css.hex("db4d3f")),
      /* :: */[
        Css.marginBottom(Css.px(16)),
        /* [] */0
      ]
    ]);

var content = Css.style(/* :: */[
      Css.display(/* flex */-1010954439),
      /* :: */[
        Css.alignItems(/* center */98248149),
        /* :: */[
          Css.justifyContent(/* spaceBetween */516682146),
          /* :: */[
            Css.margin2(Css.px(0), /* auto */-1065951377),
            /* :: */[
              Css.maxWidth(Css.px(1000)),
              /* :: */[
                Css.padding2(Css.px(16), Css.px(24)),
                /* [] */0
              ]
            ]
          ]
        ]