search

OpenUserJS / OpenUserJS.org

The home of FOSS user scripts.
https://openuserjs.org/
GNU General Public License v3.0
857 stars 303 forks source link

Add the bootswatch fork to OpenUserJS Organization #223

Closed Zren closed 9 years ago

Zren commented 10 years ago

https://github.com/Zren/bootswatch-OpenUserJS.org

This is the source code for /public/css/bootstrap-custom.css

The custom/build.sh will build & copy the generated file to OpenUserJS.org repo (both repos must have the same parent folder).

The base bootswatch theme seems to have updated 3.1.1 -> 3.20 since I forked it, probably gonna have to take a look through their changes, but the current theme works fine.

Martii commented 10 years ago

Screen shot of what it currently looks like in 3.20?

Zren commented 10 years ago

I didn't merge the update as it's mostly updates for the other themes (not our custom one) and it causes a bunch of merge conflicts. The diff isn't enough too worry over dealing with the merge conflicts.

custom/bootswatch.less  Open View
 @@ -1,4 +1,4 @@
 -// Custom 3.1.1
 +// Custom 3.2.0
  // Bootswatch
  // -----------------------------------------------------

custom/variables.less  Open View
 @@ -1,4 +1,4 @@
 -// Custom 3.1.1
 +// Custom 3.2.0
  // Variables
  // --------------------------------------------------

 @@ -10,7 +10,7 @@
  @gray-darker:            lighten(#000, 13.5%); // #222
  @gray-dark:              lighten(#000, 20%);   // #333
  @gray:                   lighten(#000, 33.5%); // #555
 -@gray-light:             lighten(#000, 60%);   // #999
 +@gray-light:             lighten(#000, 46.7%); // #777
  @gray-lighter:           lighten(#000, 93.5%); // #eee

  @brand-primary:         #428bca;
 @@ -22,7 +22,7 @@

  //== Scaffolding
  //
 -// ## Settings for some of the most global styles.
 +//## Settings for some of the most global styles.

  //** Background color for `<body>`.
  @body-bg:               #fff;
 @@ -68,14 +68,18 @@
  @headings-color:          inherit;

 -//-- Iconography
 +//== Iconography
  //
 -//## Specify custom locations of the include Glyphicons icon font. Useful for those including Bootstrap via Bower.
 +//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.

 +//** Load fonts from this directory.
  @icon-font-path:          "../fonts/";
 +//** File name for all font files.
  @icon-font-name:          "glyphicons-halflings-regular";
 +//** Element ID within SVG icon file.
  @icon-font-svg-id:        "glyphicons_halflingsregular";

 +
  //== Components
  //
  //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 @@ -232,7 +236,7 @@
  //** Text color for headers within dropdown menus.
  @dropdown-header-color:          @gray-light;

 -// Note: Deprecated @dropdown-caret-color as of v3.1.0
 +//** Deprecated `@dropdown-caret-color` as of v3.1.0
  @dropdown-caret-color:           #000;

 @@ -245,8 +249,8 @@

  @zindex-navbar:            1000;
  @zindex-dropdown:          1000;
 -@zindex-popover:           1010;
 -@zindex-tooltip:           1030;
 +@zindex-popover:           1060;
 +@zindex-tooltip:           1070;
  @zindex-navbar-fixed:      1030;
  @zindex-modal-background:  1040;
  @zindex-modal:             1050;
 @@ -257,27 +261,32 @@
  //## Define the breakpoints at which your layout will change, adapting to different screen sizes.

  // Extra small screen / phone
 -// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
 +//** Deprecated `@screen-xs` as of v3.0.1
  @screen-xs:                  480px;
 +//** Deprecated `@screen-xs-min` as of v3.2.0
  @screen-xs-min:              @screen-xs;
 +//** Deprecated `@screen-phone` as of v3.0.1
  @screen-phone:               @screen-xs-min;

  // Small screen / tablet
 -// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
 +//** Deprecated `@screen-sm` as of v3.0.1
  @screen-sm:                  768px;
  @screen-sm-min:              @screen-sm;
 +//** Deprecated `@screen-tablet` as of v3.0.1
  @screen-tablet:              @screen-sm-min;

  // Medium screen / desktop
 -// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
 +//** Deprecated `@screen-md` as of v3.0.1
  @screen-md:                  992px;
  @screen-md-min:              @screen-md;
 +//** Deprecated `@screen-desktop` as of v3.0.1
  @screen-desktop:             @screen-md-min;

  // Large screen / wide desktop
 -// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
 +//** Deprecated `@screen-lg` as of v3.0.1
  @screen-lg:                  1200px;
  @screen-lg-min:              @screen-lg;
 +//** Deprecated `@screen-lg-desktop` as of v3.0.1
  @screen-lg-desktop:          @screen-lg-min;

  // So media queries don't overlap when required, provide a maximum
 @@ -558,7 +567,7 @@
  //##

  //** Padding applied to the modal body
 -@modal-inner-padding:         20px;
 +@modal-inner-padding:         15px;

  //** Padding applied to the modal title
  @modal-title-padding:         15px;
 @@ -643,17 +652,26 @@
  //** List group border radius
  @list-group-border-radius:      @border-radius-base;

 -//** Background color of single list elements on hover
 +//** Background color of single list items on hover
  @list-group-hover-bg:           #f5f5f5;
 -//** Text color of active list elements
 +//** Text color of active list items
  @list-group-active-color:       @component-active-color;
 -//** Background color of active list elements
 +//** Background color of active list items
  @list-group-active-bg:          @component-active-bg;
  //** Border color of active list elements
  @list-group-active-border:      @list-group-active-bg;
 +//** Text color for content within active list items
  @list-group-active-text-color:  lighten(@list-group-active-bg, 40%);

 +//** Text color of disabled list items
 +@list-group-disabled-color:      @gray-light;
 +//** Background color of disabled list items
 +@list-group-disabled-bg:         @gray-lighter;
 +//** Text color for content within disabled list items
 +@list-group-disabled-text-color: @list-group-disabled-color;
 +
  @list-group-link-color:         #555;
 +@list-group-link-hover-color:   @list-group-link-color;
  @list-group-link-heading-color: #333;

 @@ -663,6 +681,8 @@

  @panel-bg:                    #fff;
  @panel-body-padding:          15px;
 +@panel-heading-padding:       10px 15px;
 +@panel-footer-padding:        @panel-heading-padding;
  @panel-border-radius:         @border-radius-base;

  //** Border color for elements within panels
 @@ -802,6 +822,8 @@
  //
  //##

 +//** Horizontal offset for forms and lists.
 +@component-offset-horizontal: 180px;
  //** Text muted color
  @text-muted:                  @gray-light;
  //** Abbreviations and acronyms border color
 @@ -816,14 +838,9 @@
  @blockquote-border-color:     @gray-lighter;
  //** Page header border color
  @page-header-border-color:    @gray-lighter;
 -
 -
 -//== Miscellaneous
 -//
 -//##
 -
 +//** Width of horizontal description list titles
 +@dl-horizontal-offset:        @component-offset-horizontal;
  //** Horizontal line color.
  @hr-border:                   @gray-lighter;

 -//** Horizontal offset for forms and lists.
 -@component-offset-horizontal: 180px;
 +
Martii commented 10 years ago

https://www.npmjs.org/package/bootswatch

https://github.com/thomaspark/bootswatch/blob/gh-pages/custom/bootstrap.css

This may need to be added to the ./package.json when we update it to 3.2.0 and rereferenced with whatever changes we made stripped out/moved. 3.1.1 wasn't published to npmjs.org.

Zren commented 10 years ago

This may need to be added to the ./package.json

As in adding "Zren/bootswatch-OpenUserJS.org": "3.1.1+1" and 

serveModule('/redist/npm', 'bootswatch', {
  'custom/bootstrap.css': { maxage: day * 1 }
});

to the routesStatic?

Martii commented 10 years ago

I'm attempting to get git urls to work in npm with another project ($ npm install git://github.com/github/octicons.git) and I'm receiving an error (I am not alone) and investigating but...

"bootswatch": "3.2.0",

in the "dependencies" section. (3.1.1 and 3.1.1+1 doesn't exist on npmjs.org)

I haven't done a diff to see what you've done, what I've done and what anyone else has done to bootstrap-custom.css in our ./public/css yet... but I do know @sizzlemctwizzle 's font resides in that file since I deferenced the CSS for it... that should probably move to common.css is my guess.

In a few days I'll be updating my nix distro and probably installing the latest npm and retrying... but I'll need to check Windows too to see if GH urls actually work.

As far as the routesStatic.js... more or less... and reference the html view(s) to it.

Martii commented 10 years ago

I (Martii) haven't done a diff to see what you've done

Currently my web diff add-on says there is 1024 line differences from ~5782 lines in the original and ~5866 in the modified.

Also, you shouldn't be editing bootstrap-custom.css by itself. It's a compiled file.

You mentioned this at https://github.com/OpenUserJs/OpenUserJS.org/issues/379#issuecomment-59857424 ... then why isn't the CSS in a compiled/token replacement format? (proper nomenclature needed here) I have barely touched on this in my travels so I'm not real familiar with the formats/generators available yet... but it seems to me that if there are some plugged in values those should be separated from the .css file itself.

The alternative is to use cascading as intended by loading/referencing/linking their copy in and we override in our own bootstrap.oujs.css (or similar filename which I don't care about naming at this point)

Zren commented 10 years ago

If you really want, we can only store the minified version on this repo, but I did notice you just changed another version to be unminified for debugging reasons.

I should also point out that devtools can unminify code for you.

It's probably on firefox somewhere too.

Martii commented 10 years ago

we can only store the minified version on this repo

Unminified for all code is preferred... not to mention that express-minify package should be minifying on the fly.

I should also point out that devtools can unminify code for you.

Interesting I'll have to find something similar. Thanks for the screen cap.

Regarding the "compiling" I ran by the language for CSS... it is http://en.wikipedia.org/wiki/LESS_%28stylesheet_language%29

See also:

Martii commented 9 years ago

@Zren With #544 in place and effective we really don't need to do this. Also you mentioned we might be moving away from bootswatch... which implies we shouldn't do this.

I'm still not clear on what bootswatch really offers. With a clean bootstrap theme and adding our colors into a fictional oujs-theme.less and ordering it into oujs.less we would have what appears to be the stock bootswatch. Does it offer some additional classes that aren't in bootstrap? When I stripped out bootswatch from bootstrap other than coloring it appeared nearly identical UI wise.

Zren commented 9 years ago

No. Close this.

Edit. Or i can. Forgot i started it.