search

Esri / calcite-bootstrap

A Calcite theme and a custom build system for building Bootstrap apps.
http://esri.github.io/calcite-bootstrap/
Apache License 2.0
48 stars 29 forks source link

Build a calcite-bootstrap-theme.css #91

Open alaframboise opened 9 years ago

alaframboise commented 9 years ago

Hey guys, can we please extract and build out a separate calcite-bootstrap-theme.css?

Bootstrap recommends this approach for applying themes and users will be used to this approach too. Plus it separates our local build from their CDN build so we can get the benefits of their fixes immediately.

If we really need to build our own calcite-bootstrap.css for the work you guys are doing, that's cool, but the rest of our projects e.g. App Templates should probably use the bootstrap + theme approach.

Thanks!

http://getbootstrap.com/examples/theme/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Theme Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="../../dist/css/bootstrap-theme.min.css" rel="stylesheet">
TheBlueDog commented 9 years ago

Wondering if the theme approach is good for subsets of the css. For example the "calcite-apps" theme would not include accordions, modals, and other pieces.

alaframboise commented 9 years ago

We could certainly build out subsets if we need to, but I'm definitely using accordions and modals however.

image

TheBlueDog commented 9 years ago

Those were the only ones I could name off the top of my head before I've had my coffee this morning. :)

I'll have to look into what is really different with that theme approach versus our. Right now it looks like that approach just pulls in two compiles stylesheets. First the compiled bootstrap, then the compiled theme and all of its overrides. We still build them as separate pieces, but all the work is done preprocess and then Sass does the build into a single compiled stylesheet.

Without doing any tests yet, I believe the way we are doing it now results in a slightly smaller css file size and fewer css rules. It may be fretting over the tiny things, but I know in Open Data we are constantly hitting the css rule limiter in older versions of IE.

alaframboise commented 9 years ago

Gotcha. So it does sound like we have the ability to create a separate theme build.

The other reason this is a good idea is because it gives people the ability to create a custom bootstrap build and then they can apply our theme on top. Even if it's the whole calcite-theme.css enchilada, a few extra overrides won't be a big deal.

In a perfect world, something like this would be good:

calcite-theme.css (full) calcite-core.css calcite-modal.css calcite-accordian.css ...

Either way, let me know if we can maybe do a quick build of a pure calcite-theme.css and I'll get it plugged it in to the App Template prototypes. Thanks!

alaframboise commented 9 years ago

Hey guys, can't remember where we left off with this, but any further thoughts on building out a calcite-specific theme .css to just sit on top of bootstrap? @TheBlueDog @CassidyB

TheBlueDog commented 9 years ago

@CassidyB and I spent some time last week talking about this. Because of the way its set up, we can't separate the unaltered bootstrap core from the calcite version. We are using variables to do much of the work which get compiled on the build.

The only way to create a 'lite' version is to identify what modules to exclude from a build (ex: modals, carousels, etc).

CassidyB commented 9 years ago

@alaframboise @TheBlueDog To this end we will create a lite version designed for app development that has trimmed down css for the core build. We are also looking to keep separate the custom elements that are built outside of the bootstrap framework (such as anything dealing with the map).

alaframboise commented 8 years ago

Now that calcite-maps is pretty solid, we can really create a dedicated calcite-bootstrap build. I only use core bootstrap types (buttons, anchors), navbar, tabs and panels, so we can trim out everything else if we want. When it's time to do this, hit me up so we can really nail a super fast, light-weight build for map app devs.

Maybe we can call this the "calcite-bootstrap-maps.css" build?

@TheBlueDog @dbouwman

TheBlueDog commented 8 years ago

I don't see a problem with that.

dbouwman commented 8 years ago

@alaframboise so - instead of jumping right to a build, why don't you whip up an app that uses sass, and the I can show you how to pick and choose the components that go into your build?

Start by scaffolding a project w/ gulp-webapp, then npm install --save-dev esri/calcite-bootstrap#v0.2.5 and I can walk you thru it from there.

Following that path you get all the automation you need to do anything you want.

That's way more effective / efficient than us doing builds we hope hit the components you need :)