egoist / hack Goto Github PK

View Code? Open in Web Editor NEW

2.6K 59.0 139.0 222 KB

⛷ Dead simple CSS framework.

Home Page: https://hackcss.egoist.dev

License: MIT License

JavaScript 3.44% CSS 52.27% HTML 44.29%

hack's Introduction

Table of Contents

Install
Related projects
Development
License

Install

$ npm install --save hack

Option #1: Use any pre-processor

import 'hack'

Option #2: hot-link the css files:

<link rel="stylesheet" href="/path/to/hack.css">

<!-- markdown theme -->
<body class="hack"></body>

<!-- standard theme -->
<link rel="stylesheet" href="/path/to/standard.css">
<body class="standard"></body>

<!-- dark theme -->
<link rel="stylesheet" href="/path/to/dark.css">
<body class="hack dark"></body>

<!-- dark-grey theme -->
<link rel="stylesheet" href="/path/to/dark-grey.css">
<body class="hack dark-grey"></body>

<!-- solarized-dark theme -->
<link rel="stylesheet" href="/path/to/solarized-dark.css">
<body class="hack solarized-dark"></body>

It's also available on CDNJS, jsDelivr and UNPKG.

For more usages and style guideline head to the website 🎉

Showcase

A list of projects that use hack.

Related projects

Mirrors

https://git.habd.as/jhabdas/hack

Development

$ npm run dev

$ npm run build

License

MIT © EGOIST

Logo was generated with slogan.

hack's People

Contributors

Stargazers

Watchers

Forkers

mrsunshyne namelessnotion j4m355 lesthersk raj347 rlugojr claudey fengyiyi yujunhua93 papajia peirancao vishalbasnet23 paulmolluzzo steveedson leafiy boylufeng20141007 boriskaiser qbektrix swizz umarmughal stephenzhao jackmcpickle casaval cmpereirasi therealmccoy truevalentine ismailmechbal zachlungu th3nolo cybernetics mozii kevinmwangi meihaogit mobilenicholls daniel-warner-x toniacz89 maximiliengilet youssef103 lyncolnms zoek1 leomex033 npmcdn-to-unpkg-bot phase gerhobbelt mrrye mamadoo zbaxrl srinivasdamam simondahla vpineda7 solertis xiaojueguan skulbrane rancyd digideskio ovuncgursoy lxynox sukima natiginfo rubygba rubybasics lijing1133082 akashfoss nultek xuxin 01btc10 rodnandes belak-forks n3k0lai willinspire praneet460 rob-rychs okpebbs nio3000 angela9069 rajeshpatadiya durfik zed-dz cppccn csscheck troysteven222 s-iwagishi vi-t ahmedfmohamed hakusaro marekzet chriszacny kokiro gioni06 dosycorps vanderkilu xdreamseeker zunkun kevindiacov123 ilgrim qingbeefed refael613 cjbassi atrnh mannyabraham

hack's Issues

Add hack to jsDelivr.

Please! I understand that you have npmcdn links but jsDelivr is so much better!

Consider changing the way using hack

Currently you need to add .hack class name to a parent element so that the style of child elements could be affected, but sometimes not all the child elements want to be hacked, so maybe this way is better:

<h1 class="hack-h1">heading 1</h1>

And only theme class name needs to be added to parent element:

<div class="hack-solarized">
  <h1 class="hack-h1">heading 1</h1>
</div>

This site hackcss.egoist.moe can’t be reached

Hi,

This site hackcss.egoist.moe can’t be reached :(

Best,
Kokiro

Add ChangeLog

I see the versions rolling forward, but I cannot easily make sense of what's changing. Providing a ChangeLog will help consumers of this library understand what's changing between versions from a simple text file. Here's an example ChangeLog:

https://github.com/comfusion/after-dark/blob/master/CHANGELOG.md

And here's how to accomplish it with some super simple tooling:

https://github.com/comfusion/after-dark/blob/master/package.json#L17
https://github.com/comfusion/after-dark/blob/master/package.json#L25-L27

Using this approach your entire release workflow (with ChangeLogs, tagging and publishing) ends up looking like this:

npm run release
(copy/paste resulting script output, and execute it)

It breaks my custom ol values

<ol>
  <li value="42">This should be 42, but it's 1</li>
</ol>

Whitespace in nested lists

Thoughts on tightening up nested lists in the base themes? Here's an example of a table of contents with and without whitespace adjustments:

Current output (top and bottom margins on li ul):

Tightened output (without top and bottom margins on li ul):

The markup pattern for the above list is auto-generated by Hugo as:

<nav id="TableOfContents">
<ul>
<li><a href="#deciding-if-bali-is-right-for-you">Deciding if Bali is right for you</a></li>
<li><a href="#move-considerations">Move considerations</a>
<ul>
<li><a href="#relative-costs">Relative costs</a></li>
</ul></li>
<li><a href="#making-the-move">Making the move</a>
<ul>
<li><a href="#shedding-the-weight">Shedding the weight</a>
<ul>
<li><a href="#furry-friends">Furry friends</a></li>
<li><a href="#selling-your-stuff">Selling your stuff</a></li>
</ul></li>
<li><a href="#tying-up-loose-ends">Tying up loose ends</a></li>
<li><a href="#making-a-soft-landing">Making a soft landing</a>
<ul>
<li><a href="#finding-a-place-to-stay">Finding a place to stay</a></li>
<li><a href="#securing-travel-insurance">Securing travel insurance</a></li>
<li><a href="#attracting-a-partner">Attracting a partner</a></li>
<li><a href="#getting-questions-answered">Getting questions answered</a></li>
</ul></li>
</ul></li>
<li><a href="#settling-in">Settling in</a>
<ul>
<li><a href="#get-your-visa-on-arrival">Get your Visa On Arrival</a></li>
<li><a href="#get-some-cash">Get some cash</a></li>
<li><a href="#purchase-necessities">Purchase necessities</a></li>
<li><a href="#get-a-bank-account">Get a bank account</a></li>
<li><a href="#switch-mobile-carriers">Switch mobile carriers</a></li>
<li><a href="#getting-around">Getting around</a></li>
<li><a href="#where-to-work">Where to work</a></li>
<li><a href="#where-to-eat">Where to eat</a></li>
<li><a href="#addressing-language-barriers">Addressing language barriers</a></li>
</ul></li>
<li><a href="#wrapping-up">Wrapping up</a></li>
</ul>
</nav>

Add demo for standard mode

It could be placed at hackcss.com/standard.html

And the standard.css needs improvements too.

Please include actual license file

I know the README states "MIT" as the license, but that doesn't, actually, place the code under the MIT license. As it stands, in most countries this code would, technically, still be considered copyright the original creator, all rights reserved, and developers who understood this wouldn't use the code because of the potential legal peril.

To rectify this, simply place the MIT license in a file in the repo or include the license as a comment in the code.

No margin on mobile version

From someone mentioning this on the hacker news thread

[Suggestion] add `flex-wrap`

When dealing with .grid and .cells it seems reasonable to me to add flex-wrap: wrap to prevent the situation like this:

code:

<div class="grid">

  <%= for v in [1, 2, 3, 4, 5] %>
  <div class="cell -4of12">
    <div class="card">...</div>
  </div>
  <% end %>
</div>

After a fix it will become something like this:

Modal support

How about adding a modal element ?

Standardize Form Control Look and Feel on Mobile Safari

Using hack without a css reset of any kind we can see some elements are unstyled to achieve the expected look-and-feel:

hack/src/css/components.css

Lines 139 to 141 in 5843d89

 -webkit-appearance: none; 

 -moz-appearance: none; 

 -ms-appearance: none;

Let's extend this also to input controls for mobile safari. Here's a primer for making it happen: https://signalvnoise.com/posts/2609-customizing-web-forms-with-css3-and-webkit

Standard theme breaks .grid class for ul/ol

hack/src/css/themes/standard.css

Line 34 in 022aba5

display: block;

Hey there,

I tried to make a navigation using an ul and giving it the .grid.-around classes, but this line in the standard theme seem to break it, so I'll have to do it by myself in my CSS.
Thats not a deal breaker, but since ul and ol are block-level elements by default, I don't see the point of redefinig that…

site-dark.css not found

in the head of sample html files there is a link for a file named: site-dark.css
which is not available in the repo, does that file exists at somebodies computer and forgot to upload it to the github repo?, if not, that reference should be removed?

Regards.

Hexo/Jekyll theme using hack.css

It would be cool if I can use this as my blog theme

Hexo port
Jekyll port : thank to the work by @sobolevn
Hugo port : thank to the work by @jhabdas

Small screen/responsive issue

Awesome job on this library 👍

I don't know CSS so well so not sure why this is happening but if you look at my site http://chris.impey.io you will see the grid at the top seems to be nicely responsive (if you make your browser smaller the image drops away nicely) but if you look at it on a phone/small screen (or use device emulation in dev tools) then the content in the grid is tiny and the image always displays.

Feature requests go here

Any component/UI/feature request...

Button
- Button group
- Ghost button
Dark mode

[wiki suggestion] add "projects using hack.css" section

For now wiki is not active. Let's change it.

I suggest to add a section to show projects which are already using hack.css.
Like http://elixir-lang.moscow/

Format could be: thumbnail + link

What do you think?

Hack for RTL themes

Just wondering is there is any solution for RTL themes? I'm a native Persian speaker and I would like to contribute if there is no viable alternative for that. Would love to know your opinion about this and the best way to implement it.

Thank you.

bower installation issues

When installing from bower there's an issue with color-preset.

Here's the output (I am using brunch):

11 Aug 17:28:50 - error: Compiling of web/static/scss/main.scss failed. File to import not found or unreadable: color-preset
Parent style sheet: bower_components/hackcss/src/css/hack.css

Looks like bower.json is missing this library as a dependency. But it is presented in package.json.

Domain is not alive

That's what happens: http://597.yourdo.com.cn/?dm=hackcss.com&acc=96F52E2F-2CB3-468B-900C-1A4B76552CAB&poprequest=1

h1 has "display: block" in Firefox, and "display: table-cell" in other browsers

It seems this difference exists since first commit: here

Is this intended?

Screenshot (note the ============ under h1)

Add dotted underline for ABBR tag

For better accessibility, it would be nice to have a dotted underline the same color as the theme link for the abbr element, as shown here in its current form:

Hot-linking of css doesn't show form label color

Hi Egoist,

Awesome looking project!

I'm trying it out and hot-linking the css like it says on https://github.com/egoist/hack#install, like so:

hello_world.html

<html>
  <head>
    <link rel="stylesheet" href="..static/hack/css/hack.css">
  </head>

  <!-- markdown theme -->
  <body class="hack">

      <!-- Copy of form with colored labels you are using in https://hackcss.egoist.moe/ -->
      <h5>Stateful Form</h5>
        <form class="form">
          <fieldset class="form-group form-success">
            <label for="username2">USERNAME:</label>
            <input id="username2" type="text" placeholder="type your name..." class="form-control">
           </fieldset>
           <fieldset class="form-group form-warning">
             <label for="age">AGE:</label>
             <input id="age" type="text" placeholder="" class="form-control">
           </fieldset>
        </form>
  </body>
<html>

The markdown style is rendered fine but the form label color doesn't show like on https://hackcss.egoist.moe/ (form-group form-success).

Any idea how to do this? Not too familiar with the frontend toolset; it looks like it should have something to do with invoking some process on components.css directly or indirectly.

[Suggestion] Add `normalize.css`

I have faced several issues with normalizing different elements across multiple platforms and browsers.

It is a normal practice to use css resets. Such as nomalize.css or any other.

What do you think?

Elements <pre> and <code>

Those two elements, <pre> and <code>, come out pretty big, not in line with the rest of the theme. They should be normalised, so the theme looks more harmonious.

add arc-green display mode

used by gitea. example Screenshot included.

Formatted text display issues inside button

Workaround with alternate semantics (e.g. b instead of strong) and use   when space is needed for truncated text nodes as shown in the second example.

Note: Please forgive the custom styling. Will need to double check without custom theming.

Add more themes

How about also adding solorized and solorized dark themes? Will be happy to work on it.

Lighten background in dark theme

Black is a bit too hard on the eyes. I think a dark grey type colour would look a lot nicer

Add .no-markdown modifier

Add .no-markdown modifier to any parent element so that all child elements look like normal HTML (without markdown symbols)

Add disabled state for buttons

When a button component has the disabled attribute it will have a :disabled pseudo-class which may be styled so that:

Existing :hover and :focus pseudo-classes do not alter the background color
The cursor is set to not-allowed as an additional cue
May potentially take a muted class which provides a subdued color treatment

Ordered lists >=10 not properly aligned

Numbered lists with more than nine will miss the dot (actually, the dot will overlap the text on the line).

Add Form Control Focus Indication

Currently form-control components have their outline suppressed but do not provide an alternative style using the :focus pseudo-selector, the result of which is a usability issue.

Without outline or :focus, it's not possible to tell where the cursor is while navigating form elements using switch-based peripherals such as tab, or when shifting contextual frames of reference such as navigating through browser history.

Here's what a focused button looks like using a standard outline:

And here's what that same button looks like with focus in [email protected]:

This usability issue is exacerbated when using button groups and/or groups of form controls. It is not currently a problem for a elements, which maintain their focus when navigating using a

Remove custom scrollbar

I think the custom scrollbar should either be removed, or at the very least be optional. I think scrollbars are better as system elements, rather than custom website elements. Users are not used to custom scrollbars, like they are other web elements such as text, buttons, inputs, and alike. A custom scrollbar is jarring and uncomfortable to the user.

I'm not sure about Windows or various Linux flavors, but I think that on OS X the system scrollbar looks far far better than the custom hack scrollbar.

The custom hack scrollbar pushes content to the left, that otherwise would have been flush with the page's edge on a auto-hiding scrollbar.

It is not typical for a css framework to include custom scrollbars, especially one so seemingly lightweight as hack.

Button is not inheriting the font

The button's font is the one of user agent (font: 400 13.3333px Arial;)

This is particularly evident when having two buttons <button class="btn"...> and < a class="btn" > close to each other.

icons recommendation

Which set of icons should be the recommended one? Since there are a lot of them: http://fontello.com/ , https://css-tricks.com/flat-icons-icon-fonts/ and many others.

For my taste font-awesome does not fit here.

Letters collide on a multiline header

It happens with standard mode only.

The workaround I have came up with is to set .standard h1 { line-height: 1em; }

And the markdown mode has these lines:

.hack h1, .hack h2 {
    line-height: 30px;
}

Does my workaround seem fine to you? Are there any other tags to be checked and fixed?

I will create a PR with a fix.

<hr /> element has no styling in standard mode

In the hack mode, hr elements have styling (although are currently broken, see #31). However, in the standard mode, there aren't any selectors targeting the hr at all.

permanent link icon

Github has this feature. And I really like it.

How does it suppose to work? I suggest to add an extra class (something like permanent), which would add an icon on hover.

Something like this:

Responsive grid system

The current flexbox base grid is not fully responsive yet.

eg: -3of12 should take 100% of the width on small-screen devices.

Blockquotes

I think the way <blockquotes> are currently handled isn’t pretty. Could they be made like so?

> This is the beginning of the blockquote.
> This is the next line, and,
> This is the last.

Improve semantics of progress bar

https://devdocs.io/html/element/meter

It would be perfect if there was a Chinese course

I have some friends who are not very good at English, but they like this style and hope to have a Chinese course. Thank you !

Create Minified Bundle

jsDelivr is dynamically creating minified bundles:
http://cdn.jsdelivr.net/npm/[email protected]/dist/hack.min.css

This issue is to update the build pipeline to create a minfied bundle when packaging for NPM and add a thin license banner with compressor stripping protection:

@egoist I noticed jsDelivr isn't pulling your current LICENSE file when generating the minified bundle. How does the following banner look for the minified bundle?

/*! hack.css v0.8.0 | (c) 2016-2017 EGOIST [email protected] | @license MIT */

lang-html css declaration

I am hesitating about this one but, here it goes.
When downloading the repo directly, the class="lang-html" is not working, so element doesn't show correctly and any html code isn't showing syntax high-lighting. I cannot find the lang*, lang-html css declaration anywhere in the repo. Where is it located? For some reason it works fine in http://hackcss.com/ (even dark mode) but not in a local html file using the downloaded repo. Thanks in advance.


Regards.

Negate width on textarea with explicit cols setting

Currently when cols is set on the textarea element it's not respected due to a CSS width. If someone wants to create a textarea with wrap=hard this could become an issue as the expected output may not be returned.

`a.btn` clashes with other elements

Problem

I have created a codepen with the error.

Duplicating it here just in case:

<body class="hack">
  <a class="btn btn-primary btn-ghost" href="#some">Register</a>

  <h2>Recent events</h2>
</body>

Will result in:

Solution

I suggest to add this rule: .btn { display: inline-block; }, because that's the way button element renders.

If that's fine I will send a PR.

1.0 roadmap

Just open an issue to gather some ideas for this project, however I won't have time to work on it in a short term. (so contributions/discussions are welcome)

Refactor codebase, use modern tooling
Strip .hack
Some components need to be redesigned

`<hr />` element is not visible

Here's the screenshot of the error:

Here's the fixed result:

To fix, I have removed these lines:

.hack hr {
  font-size: 0;
  line-height: 0;
}

PR is coming.

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;