search

bootflat / bootflat.github.io

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.
http://bootflat.github.io
MIT License
4.25k stars 432 forks source link

For easy installation - what one line is added to head tag and folder paths and ... #34

Closed chuckingit closed 10 years ago

chuckingit commented 10 years ago

i know i must be missing something basic so please forgive me ... suffice it to say i'm confused as to how to get Bootflat working with a site that is using Bootstrap 3 ...

e.g., in the Bootflat getting started page - http://bootflat.github.io/getting-started.html - it says "Upload all Bootflat files and paste one line of code at the bottom of your head tag. That’s it!" ... yet neglects to say what that one line of code should be ... let alone where to upload corresponding Bootflat files and correct folder path(s) to upload in a given Bootstrap site ...

accordingly, i'm at a loss as to how to incorporate Bootflat into my Bootstrap 3 site ...

e.g., i have domain.com that is using Bootstrap 3 nicely ... it has sub folder of css with bootstrap.min.css in that folder ... thus do i add bootflat.min.css to that folder and then add head call out to that css file ..??.. and if so, how can i start to leverage color swatches like mint and/or other Bootflat css elements ..??..

thanks in advance for your attention to this ... very beautiful and would love to leverage but i'm old fashion download - zip - unzip - upload to theme directory - and tweak from there kind of (child theme) person thus a bit confused by all the latest greatest with oocss, less, git, npm, bower, yada yada options ...

accordingly, any Bootflat integration pointers you can share are greatly appreciated ... cordially, chuck scott

chuckingit commented 10 years ago

okay - answering my own thread here as turns out this is easier than i thought ... success steps to integrate bootflat with my bootstrap 3 site are as follows ...

1) download bootflat master and put the bootfat.css (and/or bootflat.min.css) files into my theme's css folder

2) modifiy my html and/or php files to include said css file in the header - e.g., <link rel="stylesheet" href="css/bootstrap.min.css">

3) if you want the formatting for check boxes and radio buttons, then copy over the icheck.min.js file into js folder and include call out in header (or footer) ... see http://git.io/arlzeA for details about this js file ...

and voila - bootflap is ready to go and to use it in a file, just reference the documentation and inspect the elements you want to use - e.g., this html code created the mint green info button `

Testing bootflat

`

note - i found some similar themes over at http://bootswatch.com that seem to work in similar way as bootflat and their docs got me pointed in right direction (or so i think) ...

as fyi, in looking back i think i was confused by the double folders with similar names ... for instance after unzipping the master, there is a bootflat/css folder and a css folder ... ditto on image folders with bootflat/img and img ... once i dragged and dropped just the bootflat subfolders into my theme (css and js folders), things seemed to work - thus i ignored the other root folders like angularicons, css, fonts, img, js - as well as the files in the root folder like bower.json, gruntfile.js, package.json, etc ... cool and thanks :>)

kimmobrunfeldt commented 10 years ago

I was also a bit lost when trying to install bootflat. I thought bootflat is a standalone CSS framework, but instead it depends from bootstrap. So you need to have bootstrap and bootflat included in your HTML.

Since it was too hard to find a simple example code of how to install bootflat, here's one:

<!doctype html>
<html class="no-js">
    <head>
        <title>Bootflat example</title>
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://bootflat.github.io/bootflat/css/bootflat.css">
    </head>

    <body>
        <h1>Test bootflat</h1>
        <a class="btn btn-primary">Flat button</a>

        <!-- Bootstrap -->
        <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <!-- Bootflat's JS files. No idea what features need these -->
        <script src="https://bootflat.github.io/bootflat/js/icheck.min.js"></script>
    </body>
</html>
kimmobrunfeldt commented 10 years ago

I opened a pull request to include this example to repository: https://github.com/bootflat/bootflat.github.io/pull/43