coding-blocks/motley

CSS Framework based on ITCSS

Motley

This project is just a bundle of common CSS that we use accross our frontend applications at Coding Blocks. It is based on ITCSS architecture and written using Sass. The purpose of this project is to make process of developing HTML and CSS loosely coupled with actual frontend project to allow easy contribution and scalability in terms of development effort.

Demo

https://coding-blocks.github.io/motley

Building and Running Motley Locally

Building and running Motley in your local dev environment is very easy. Be sure you have Node.js and Yarn installed, then follow the directions below.

1. Clone the source code

git clone https://github.com/coding-blocks/motley.git

2. Change directory to motley and Install development dependencies

cd motley

yarn install

3. Run a local development server

yarn start

Motley will start running on localhost:9000.

Directory Structure

 | sass/styles     contains sass files
 | examples
   - public        contains static assets
   - components    contains individual components
                   these are registered as partials and can be used in pages or other components
   - views         Individual pages, gets build into examples/html/*.html files

See Motley in Action

Motley is used in the following websites -

1. Coding Blocks Online
2. Hacker Blocks
3. Coding Blocks Account Dashboard

Maintainers

1. Bipin Kalra
2. Vibhu Dujari
3. Abhishek Gupta

motley's Issues

It would've been a much better experience if the Views are highlighted, upon clicking them as there are multiple views and the user needs to know which one he or she is referring to.

Here upon selecting n edit profile, it needs to be highlighted, so that we know that we are currently previewing it.

Padding Issue on sidebar

Rewrite css components for form elements

edit address component has text boxes which should be form elements.

would look better of the difficulty level icon is centre aligned

Issue by championswimmer
Saturday May 12, 2018 at 22:55 GMT
Originally opened as coding-blocks/codingblocks.online.projectx#22

---

'across' is misspelled as 'accross' in Readme.md

Design and implement Modals

Add Skeleton cards to represent loading state for course-cards

It is required to be first implemented in motley before coding-blocks/codingblocks.online.projectx#29

OneAuth designs refactoring

Remove redundant designs from per card object layer and add to a single scss file
https://github.com/coding-blocks/oneauth/issues/259

Horizontally center the home image for tablet and mobile.

Issue by abhishek97
Sunday May 13, 2018 at 11:35 GMT
Originally opened as coding-blocks/codingblocks.online.projectx#30

---

Card not showing in learning track section

Java developer card is cut in the learning track section at https://online.codingblocks.com/

incorrect width of reply now button in ask your doubt section

Issue by architkshk
Wednesday May 16, 2018 at 15:06 GMT
Originally opened as coding-blocks/codingblocks.online.projectx#60

---

ENROLL TO COURSES VIA OTP section has invalid padding on mobile

Issue by architkshk
Wednesday May 16, 2018 at 08:57 GMT
Originally opened as coding-blocks/codingblocks.online.projectx#58

---

Broken Design on Choose Address Page

Documentation of Framework

Propose the best way to document this framework.
The codebase is split up into two major layers

elements: They are independent skeleton that are used to make objects
objects: They are the combination of elements along with the layer of layouting

PS: Some of the elements do not require to be used as an object, hence they should also be documented.

There is an approach needed to document each and every object/element that is complete in itself.
For example:
Documenting a card means:
[ HTML Code + CSS code ] represented in a well defined UI, so that anyone can use that card ( i.e making it reusable )
There should be a static page that can document each of our complete elements/objects.

• Propose a way to document Motley elements/objects

• Document the cards and buttons element/objects

For reference:
Check how the element section of semantic-ui is documented
https://semantic-ui.com/elements/button.html

difficuty level icon overflow on smaller screens

Issue by championswimmer
Saturday May 12, 2018 at 22:56 GMT
Originally opened as coding-blocks/codingblocks.online.projectx#23

---

course contents (progress) overlflow/underflow

Issue by vdvibhu20
Saturday May 12, 2018 at 17:32 GMT
Originally opened as coding-blocks/codingblocks.online.projectx#19

---

Navbar overflow

Nav bar overflows at screen width less than 921px.

Side bar is hidden under Header in Mobile View

Last card is cut in Popular courses section.

Modal for feedback component

Designs will be shared with people who want to work on this issue

CB online logo not getting displayed in th upper Views.

Broken slider buy top on course page

@championswimmer @abhishek97 @witty123 Pls review.

Course Card on Hover gets trimmed off

course card on hover in recommended courses section scales beyond boundaries and is trimmed off . One more thing scaling on hover should be slow according to me

Pagination Component is Missing

Motley needs a pagination component, similar to the one bootstrap has. Required in one of our admin panels.

Refactor

Refactor motley to follow ITCSS.

Elements layer should only have html elements.
Extra objects present in elements layer (ex searchbox) should go into object layer.
What we have in object layer now is a mixture of objects and components. Create a separate layer for components.
Classes currently prefixed with o- in object layer must be prefixed with c- in the component layer.
Take help from this blog to decide what should be an object and what should be a component.
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

need grammar check in README file

Fix travis build

The travis build is failing, probably due to different node version. Node 8 LTS should be used build this project.

Login with OTP text on button not visible clearly in mobile version #987

https://github.com/coding-blocks/oneauth/issues/987

Have to change the css to fix the issue

Setup Travis to build project and serve the examples via gh-pages

Refactor Components

If you look at the examples directory, you'll see that currently, we have only one component -> nav-bar.hbs. Ideally, we would want to move each isolated component to separate hbs file and there use it as partial (the {{> nav-bar}} syntax) in all the pages(views)

Components to refactor (will update the list):

• Course Card
• Footer
• Button
• Accordion

BOSS: Bounty applies to each component refactored, i.e 100 Bounty points each. Make separate PR.

Horizontally center the logo for tablet and mobile

Issue by architkshk
Monday May 14, 2018 at 19:55 GMT
Originally opened as coding-blocks/codingblocks.online.projectx#46

---

Navigation Bar Issue for Mobile

New card design in motley

1000 Bounty points for writing the css and 500 for integrating with projectx

Text overflows outside button in mobile website

Adjust button width to wrap content in the Log In buttons

Background image used in the styles are not part of the project

It looks like the background images used in the styles, such as fingerprint.svg are not part of the project, at least not the one uploaded to NPM. So when the stylesheet loads, it results in 404 errors. These should be bundled as part of the project and the paths to them should be referenced in such a way that they will work relative to the dist folder.

IDE mobile view

Make mobile view for code-challenge content for online.codingblocks.com

Only the problem/submissions/leaderboard should be visible for mobile. Basically this part

Also a text - "To solve this problem, please use a desktop."

Grammar check in README.md file

There are some grammar issues in the readme file.
Can I work on this issue?