sebnitu/baseweb

A fresh front-end development framework.

baseweb's Issues

Update readme with new build details

I forgot to update the readme on the new build details and it still has the old information on Jake builds. This needs to be updated.

Switch task manager to Gulp

I think with all the new features I want to add to the build scripts, Gulp is going to be our best solution simply to avoid having to write interactions for each node module with Jake.

Add visited link styles

We should add some styles for visited links. This is important because it adds a lot in terms of usability.

Update button map and mixins to only use one variable for borders

After using this a bit, I found having separate variables for width, type and color was unnecessary. Lets remove this and have an option to omit borders all together (null). With this change, we'll also need to add a variable to determining the border spacing in the button groups block component.

New Block: off canvas content, mobile menu

I want to add a new block that is a way of displaying "off canvas" content. This would most often be used in a site to reveal mobile navigation, but is not limited to that use. Here are two examples of this:

https://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/
https://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/

The effect I'll build in will be very simple and possibly just limited to show and hide. Eventually I'd like to make it easy to build in custom animations/transitions for these type of components, similar to how I envision transitions for dropdowns, tooltips, modals, etc.

There should also be options for where the content is revealed: left, right, top, bottom, etc.

Create docs for new override feature

Just need to create some docs for the new override feature. This includes breaking up the getting started section a bit. The sitemap for getting started should look something like:

Page	Description
Getting Started	Where we describe using compiled and source methods
Templates	Starter HTML templates
Customize	How to customize BaseWeb using the override map and keeping BaseWeb updated
Expand	How to create custom components with component starter template
Build Scripts	Explains the build scripts and how to use them
Style Guide	Eventually, we'll want to create a method of creating style guides for BaseWeb

Dropdowns module is too complicated

After using this in a real example, the way the component works is very confusing and not intuitive at all. Look into making this easier. A few ways include:

• Be more explicit about what variables in the $dropdowns map are actually being applied for each mixin.
• Positioning mixin should be applied to the target element, not the trigger.
• Anchor points for positioning dropdowns need to be more clear.
• Show example of applying dropdown styles to horizontal navigation.

I'll add more as I run into issues.

Convert button-groups component to use flexbox for horizontal orientation

I'm currently just floating buttons for horizontal orientation in button groups. I want to change this and take advantage of flexbox. This will also allow me to remove the mini-grid functions for full width button group applications.

Add critical CSS inline and load CSS asynchronously

This is something I accomplished on my personal blog, details can be found here: https://twitter.com/sebnitu/status/828378621085577217

Write docs for Icons

Should be done once the final icons component is finished.

Create Testing Page

This is something that would be super useful for when building with BaseWeb. The idea is to have a "style guide" type of page that you can test and see the effects when changing variables in BaseWeb. This will also provide a lot of the markup and ui patterns used.

Fix syntax for gradient orientation mixin

Where it says top, the correct syntax should be to bottom.

Syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Location: https://github.com/sebnitu/BaseWeb/blob/master/src/scss/elements/_buttons.scss#L135

Show and Hide classes using the media-query variable map

Just thought I could probably create an automatic class creation mixin for adding show/hide classes for each of the break points in $breakpoints variable map. This would take the key and use it as the class for when something would be shown or hidden:

// Hide only in this breakpoint
.hide-small { }
// Show only in this breakpoint
.show-small { }

README is blank

😉

Really, I'd love to know more about this project and why @samhowat is using yours plus bootstrap. I'd like to know how they work together.

Add sourcemap support

Self explanatory

Add new installation options to docs and readme (for NPM and/or Yarn)

BaseWeb is now available to install and work with via NPM and Bower. Lets add some information on how to do this in the docs/getting-started and readme.

Use Bower to manage my front-end dependencies

Lets use Bower to manage our JS library and vendor dependencies. Specifically, jQuery, sticky sidebar plugin and anything else I'll need to add in the future.

Add social share links to blog

Lets make it easier for people to share stuff I post on the devlog.

Improve typography for Docs

I'd like to make the typography better for the documentation. One idea I had was to increase the max-width of the site and bump up the font size to 16px by default. This may be a global change to BaseWeb typography, not sure yet.

Make BaseWeb installable using NPM, Bower and other package manager systems

This would be great to make BaseWeb more accessible to people in their projects. I'd also like to find a better way to be able to update BaseWeb while keeping custom settings of the framework untouched. This is currently difficult since component settings are encompassed within their own component files.

Things to consider

• If I only keep defaults in component files, can I override a variable map without losing inner variables if not explicitly declared in new map? (Merging maps (default & custom) may be a solution for this)
• Would be great to have a method of viewing differences of framework default settings and custom. Also to view deprecated settings when upgrading.

Create Post Hero Feature for Blog

I'd like to create a more immersive blog and one idea was to create a "post hero" style where we can use a full size image behind the header of a blog post. I'm thinking something similar to InVision: http://blog.invisionapp.com/ux-design-tips/

Add gulp task to docs for `gulp critical`

We've added a new build task for creating our critical "above the fold" css so we just need to add it to our tasks documentation: http://getbaseweb.com/getting-started/build-scripts/

Use SVG Defs for my SVG images

Self explanatory, I want to use the SVG defs method for using SVGs instead of the image tag.

Make variables and component variable maps easier to override

I'm playing with an idea to make variables and components more easily overridden using the custom directory and a _overrides.scss file. This would be loaded after settings and core files in our router and would settings here would be merged with maps in their respective component files. Example:

// @_override.scss
$overrides: (

  // Block Overrides
  'button-groups' : (),
  'notices' : (),
  'breadcrumbs' : (),
  'dropdowns' : (
    'font-size' : px-to-rem(14px),
    'border-inner' : null,
  ),
  'tabs' : ()

);

// @_some-component.scss (After the $some-component map)
// Merge some-component defaults with overrides
$some-component: map-merge($some-component, map-get($overrides, 'some-component'));

jQuery include is broken

Currently the JS in both html files of the template try to load jQuery through <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> when it should be <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

Figured I'd point that out to help keep your sanity :)

Write a devlog post on the new override feature

Not sure if it's super necessary for this to come out with the released feature, or if I should write it up a little after to make sure I catch any bugs. Either way, it should be written up!

Add social brand colors to palette settings

I found this great article that shows all the hex values for multiple social media brand colors. This is something I often have to look up multiple times on many projects so it would be great to add a social map with these values.

https://www.competethemes.com/blog/social-media-colors/

Update docs to reflect new vanilla JavaScript components

Should include their available public methods, settings and a basic usage guide for each component.

Critical CSS Review

Just wanted to do a review eventually of our Critical CSS and possibly switching to using penthouse over critical. I came up with a nice solution on a work project but it was more necessary there since critical doesn't allow the use of a URL as the page source.

• Critical CSS and Server-side Applications
• Penthouse

Add RSS feed to blog

Will need to grab a Jekyll template for the RSS feed and add a link somewhere.

Add Tooltip Component

Create the tooltip component block along with docs.

Examples:

• Google Material Design
• Spectre CSS
• Twitter Bootstrap

How are you putting the docs together?

I'm just curious, I'm on the core team for Less.js and was thinking about your issue you just posted about selector interpolation and was looking for the grid system you mentioned when I saw this project.

I'm working on a project called assemble that seems like it's a perfect fit for what you're doing here. (also checkout assemble-styles) It's basically a build system for components and documentation like what you're doing.

Update Color Palette

I want to simplify and standardize a better starting color palette. I was thinking of using Material Design by Google as a start: https://material.io/guidelines/style/color.html

I also like the idea of using the values of 50, 100, 200 - 900 etc as defining their tints either in a map or specifically declared variable.

Abstract animations to be its own modular component

Ultimately, I want to remove animations from being applied to any one specific block component. Instead, I want animations to be abstracted in it's own module where it can be applied as needed to specific cases of blocks and components.

Animation styles could be used similar to this project by Daniel Eden: https://daneden.github.io/animate.css/

Block components that would use animations include dropdowns, modals, tabs, tooltips, notices, flash messages, etc. Applying a global animations module to these would reduce repetition and create a simple way to plug and play css animations.

Dropdowns module causing horizontal scrolling

Dropdowns currently cause issues with horizontal scrolling. This happens specifically when a dropdown (even when hidden) go beyond the document window.

Possible solutions

• Could be fixed by using display:none when dropdowns are in hidden state
• Remove animation styles from dropdowns. Animations should be added separately from a single component.

Create our distribution directory `dist`

This is where our compiled and production ready files should be stored. Not in the src directory.

Include zipped download links

Look into packaging the source and compiled assets of BaseWeb to allow for easier downloading and distribution.

Add icon component styles

I've decided we're going to use the SVG Defs styles as default icon styles for BaseWeb icons. The base styles should look like this:

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  font-size: 32px;
}

Should also include some simple SVG icons to start with and create docs for their use.

Add back to top scroll JavaScript

This is specifically for docs. The button should appear in docs sidebar on medium + screens and in the footer on mobile (eventually will appear in the header too once I introduce a sticker header).

Remove deprecated mixins

There are a few mixins that were used specifically to apply browser prefixes. These should now be removed in favor of the use of autoprefixer which is already in our build scripts.

Dev Log Update

I've decided I want to re-vamp the developer log and convert it to more of a short post type of tool for displaying updates.

I'm thinking of creating something more like this: http://cargocollective.com/devlog

Add a better way to manage project versioning

I currently have the project version printed in a handful of files. I'd like to find a better way to manage our current version within these files.

Version appears in:

• README.md
• package.json
• src/scss/_baseweb.scss
• docs/assets/scss/_baseweb.scss
• docs/_data/project.yml

Add autoprefixer into build scripts and remove prefixes from mixins

I want to add into our build scripts an autoprefixer. Here is a possible node package we could use: https://www.npmjs.com/package/autoprefixer

Once this is incorporated, I'd like to also remove all prefixes from mixins and even purge mixins that only exist for the adding of prefixes.

Devlog comments are currently not working

I already found a fix for this and it's deployed on my personal blog. Just need to duplicate the fix for the devlog here.

Add flexbox based grid system option

As I've been working on a recent front-end project, I've noticed that in some instances I needed to use flex for a grid layout instead of the float based system. I'd like to build in an option to simply use flexbox when they are more appropriate. Maybe this method will replace our float system all together.

`make-dropdown` mixin not using map variable for transitions on target

Line 115 of _dropdowns.scss should have:

@include transition(map-get($o, 'transition'));

Instead of listing the properties directly.

Create JavaScript Components

This is something I've been trying to avoid, but I think it's the best solution to just include the JavaScript that is required for each component in some easy to use way. I can't just require that someone would go to the docs and copy/paste the scripts they need for a specific component.

I'll probably end up keeping jQuery as a dependency for now, but eventually I'd like to just write these component scripts in vanilla JavaScript and drop jQuery all together.

Deprecate the mini-grid system

I think a better replacement where this is currently being used in the framework would be to create a class based flexbox grid system, but for now we should just drop support of the mini-grid.

Remove the underscore from `_baseweb.scss`

The underscore is only intended for Sass partials. baseweb.scss is where are the partials are collected, so the underscore is not needed.

Update `Getting Started` page with new build scripts

Currently it still has the old information of Jake. This should be updated to reflect the new Gulp build scripts.