Skip to content

Commit

Permalink
Update/refactoring 10 (#42)
Browse files Browse the repository at this point in the history
* Fixes

* Fixed versioning

* Fixes

* ci to i

* Updated lint

* Fixes

* Tab to Space
  • Loading branch information
rastislavcore authored Oct 25, 2024
1 parent e14b8c4 commit 4e861fc
Show file tree
Hide file tree
Showing 50 changed files with 507 additions and 10,161 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/test.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ jobs:
with:
node-version: 'lts/*'
- name: Install dependencies
run: npm ci
run: npm i
- name: Run linter
run: npm run sass:lint -- --formatter github
run: npm run lint -- --formatter github
- name: Check EditorConfig configuration
run: test -f .editorconfig
- name: Check adherence to EditorConfig
Expand Down
5 changes: 5 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -159,3 +159,8 @@ npm-debug.log

# Builds
dist/

# Locks
package-lock.json
yarn.lock
pnpm-lock.yaml
82 changes: 9 additions & 73 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@

# COCO

**COCO** is an open-source CSS framework based on [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes).
**COCO** is an open-source CSS framework.

100% Responsive 💻 | Modular 🗂 | Modern 💈 | Free ⚗️
Minimalistic ⛽ | Modular 🗂 | Modern 💈 | Free ⚗️
--- | --- | --- | ---
*Designed for multi-device support* | *Import only what you need* | *Built with Flexbox* | *Open Source*
*As small as possible, yet feature-rich* | *Import only the components you need* | *Built on CSS3* | *Open Source*

## CDN

Expand Down Expand Up @@ -61,43 +61,27 @@ or
yarn add "https://github.com/bchainhub/coco.git#semver:^2.0"
```

### Bower

```sh
bower install bchainhub/coco
```

## Import

After installation, import the CSS file into your project:

**CSS version:**

```css
@import '@blockchainhub/coco/dist/css/coco.css';
@import '@blockchainhub/coco/dist/coco.css';
```

**Minified CSS version:**

```css
@import '@blockchainhub/coco/dist/css/coco.min.css';
@import '@blockchainhub/coco/dist/coco.min.css';
```

**SCSS version:**

```css
@import '@blockchainhub/coco/dist/scss/coco.scss';
```

## Customize Distribution

COCO is a CSS framework that outputs a single CSS file [coco.css](https://github.com/bchainhub/coco/blob/master/dist/css/coco.css) or a SASS distribution. You can use it "out of the box" or download the Sass source files to customize the variables.

## Get Started

### Simplest Grid System
### Simplest Grid System, same as Bootstrap

> Add columns, and they will resize automatically based on screen size.
> This framework uses a grid system with the same standards as Bootstrap.
### Features

Expand All @@ -113,34 +97,6 @@ COCO is a CSS framework that outputs a single CSS file [coco.css](https://github
</body>
```

#### Tabs

> Create tabs without JavaScript:
```html
<div class="tabs">
<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
</ul>
</div>
<section class="tab-content">
<article id="tab-2">Content of second tab</article>
<article id="tab-3">Content of third tab</article>
<article id="tab-1">Content of first tab (default)</article>
</section>
```

#### Hamburger Menu

> Build a hamburger menu without JavaScript:
1. Add `<input type="checkbox" id="coco-navbar-toggle" aria-hidden="true" />` inside the `.navbar`.
2. Change the link to a label: `<label for="coco-navbar-toggle" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">...</label>`.
3. Ensure your menu `id` matches `label[data-target]` for JavaScript compatibility.
4. Test the hamburger menu functionality.

#### em.oji

> Use emojis as icons with effects:
Expand All @@ -149,14 +105,6 @@ COCO is a CSS framework that outputs a single CSS file [coco.css](https://github
<em class="oji flat">📥</em>
```

#### Custom Theme

> Create a custom theme by adding variables to `style/utilities/themes.sass`.
To set a theme, add `data-theme="theme"` to the HTML tag.

COCO supports light and dark themes natively.

#### Current Version

> Display the current version of COCO using this code:
Expand All @@ -165,28 +113,16 @@ COCO supports light and dark themes natively.
<span class="coco version">version </span>
```

## Browser Support

COCO uses [autoprefixer](https://github.com/postcss/autoprefixer) to ensure Flexbox compatibility with older browsers. Based on [Can I use](https://caniuse.com/#feat=flexbox), COCO supports **recent** versions of:

- Chrome
- Edge
- Firefox
- Opera
- Safari

Internet Explorer 10+ is only partially supported.

## Documentation

For detailed documentation, visit the [Online Manual](https://bchainhub.github.io/coco/).

## Informational Notice

Wondering why some files start with an underscore?
Have you noticed some files start with an underscore?

> Sass files that begin with an underscore (`_`) are considered partials. These files are not compiled by themselves but are included in other files.
## Copyright and License

This code is copyright 2018 by [Blockchain Hub](https://github.com/bchainhub) and [Jeremy Thomas](https://github.com/jgthms). It is released under the [CORE license](LICENSE).
Released under the [CORE license](LICENSE).
Loading

0 comments on commit 4e861fc

Please sign in to comment.