Skip to content

Commit 02a5334

Browse files
claudia-romanoclaudia-romano
committed
v3.0.0
1 parent 0a6af5e commit 02a5334

38 files changed

+16789
-2702
lines changed

‎.browserslistrc

+8-10
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
>= 1%
2-
last 1 major version
1+
>= 0.5%
2+
last 2 major versions
33
not dead
4-
Chrome >= 45
5-
Firefox >= 38
6-
Edge >= 12
7-
Explorer >= 11
8-
iOS >= 9
9-
Safari >= 9
10-
Android >= 4.4
11-
Opera >= 30
4+
Chrome >= 60
5+
Firefox >= 60
6+
Firefox ESR
7+
iOS >= 12
8+
Safari >= 12
9+
not Explorer <= 11

‎README.md

+20-33
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@ Files included:
88
1. **base/*:** essential CSS rules and utility classes (we suggest you don't modify these files).
99
2. **custom-style/*:** SCSS templates you can use to create your bespoke style.
1010
3. **style.scss:** used to import the _base.scss and _custom-style.scss files.
11-
4. **util.js:** utility functions used in the [CodyHouse Components](https://codyhouse.co/ds/components). Make sure to import this file before the script file of the components.
11+
4. **util.js:** utility functions used in the [CodyHouse components](https://codyhouse.co/ds/components). Make sure to import this file before the script file of the components.
1212

1313
Selling points:
1414

15-
- 🙌 no need to override existing CSS rules
16-
- 📱 mobile-first
17-
- 🎨 create unique designs with total control
18-
- 📖 easy to learn
19-
- 💼 a library of [accessible components](https://codyhouse.co/ds/components)
15+
- 🙌 No need to override existing CSS rules
16+
- 🎨 CSS custom properties
17+
- 📖 Easy to learn
18+
- 🏗 A library of [accessible components](https://codyhouse.co/ds/components)
2019

2120
```text
2221
codyhouse-framework/
@@ -44,63 +43,51 @@ codyhouse-framework/
4443
```
4544

4645
## Progressive enhancement
47-
If you're using the Components, make sure to include the following script in the `<head>` of your document:
46+
If you're using our [components](https://codyhouse.co/ds/components), make sure to include the following script in the `<head>` of your document:
4847

4948
```html
5049
<script>document.getElementsByTagName("html")[0].className += " js";</script>
5150
```
5251

53-
The script is used in CSS to target that JavaScript is enabled and apply additional style accordingly. If you don't include the script, part of the style of the components won't be visible.
52+
The script is used in CSS to check if JavaScript is enabled and apply additional style accordingly.
5453

5554
## Gulp
56-
CodyFrame includes a Gulp configuration file. To start a project that runs on Gulp, once you have downloaded the source files, navigate to the framework folder, and run the following commands in your command line:
55+
CodyFrame includes a Gulp configuration file. To start a project that runs on Gulp, navigate to the framework folder, and run the following two commands:
56+
57+
1) Install the node modules
5758

5859
```
5960
npm install
60-
npm run gulp watch
6161
```
6262

63-
The first command will install the modules the framework requires for compiling SCSS into CSS; the second will launch your project on a development server.
64-
65-
⚠️ **Note:** if you receive error messages while trying to run the `npm install` command, you may need to download and install [Git](https://git-scm.com) first.
66-
67-
**If you need to support browsers where CSS Custom Properties have not been implemented (e.g. IE11),** use the `npm run gulp watch-ie` command instead.
68-
69-
When using this command, the gulp configuration file is set to compile the SCSS into two separate CSS files: style.css includes the CSS variables; in the style-fallback.css file, the CSS variables are replaced by their fallbacks (generated by the PostCSS plugin).
70-
Make sure to uncomment the following script in the <head> of the index.html file: it is used to deliver only one file, according to whether the browser supports CSS variables or not.
63+
2) Launch your project on a development server
7164

72-
```html
73-
<link id="codyframe" rel="stylesheet" href="assets/css/style.css">
74-
<!-- browsers not supporting CSS variables -->
75-
<script>
76-
if(!('CSS' in window) || !CSS.supports('color', 'var(--color-var)')) {var cfStyle = document.getElementById('codyframe');if(cfStyle) {var href = cfStyle.getAttribute('href');href = href.replace('style.css', 'style-fallback.css');cfStyle.setAttribute('href', href);}}
77-
</script>
65+
```
66+
npm run gulp watch
7867
```
7968

80-
📝 [How to use the Framework with Webpack](https://codyhouse.co/ds/docs/framework#webpack)
81-
82-
## Component Library
69+
⚠️ **Note:** make sure you have [Npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), [Node](https://nodejs.org/en/download/), and [Git](https://git-scm.com/) installed.
8370

84-
CodyHouse's components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with the framework.
71+
📝 [How to use CodyFrame with Webpack](https://codyhouse.co/ds/docs/framework#webpack)
8572

86-
You can use the Gulp configuration file to auto-import the .SCSS of the components.
73+
## Component library
8774

88-
[How to import the CSS and JS of the CodyHouse's Components](https://codyhouse.co/ds/docs/framework#import-css-components)
75+
CodyHouse's components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with CodyFrame.
8976

90-
[Explore the Components](https://codyhouse.co/ds/components)
77+
[Explore the components](https://codyhouse.co/ds/components)
9178

9279
## Global Editors
9380

9481
The Global Editors are visual tools that you can use to create the style of typography elements, color palettes, spacing rules, buttons, and forms. They generate SCSS code compatible with CodyFrame.
9582

96-
Explore the Editors:
83+
Explore the editors:
9784

9885
- **Colors** [codyhouse.co/ds/globals/colors](https://codyhouse.co/ds/globals/colors)
9986
- **Typography** [codyhouse.co/ds/globals/typography](https://codyhouse.co/ds/globals/typography)
10087
- **Spacing** [codyhouse.co/ds/globals/spacing](https://codyhouse.co/ds/globals/spacing)
10188
- **Buttons** [codyhouse.co/ds/globals/buttons](https://codyhouse.co/ds/globals/buttons)
10289
- **Forms** [codyhouse.co/ds/globals/forms](https://codyhouse.co/ds/globals/forms)
103-
- **Shared Styles** [codyhouse.co/ds/globals/shared-styles](https://codyhouse.co/ds/globals/shared-styles)
90+
- **Shared styles** [codyhouse.co/ds/globals/shared-styles](https://codyhouse.co/ds/globals/shared-styles)
10491

10592
## Extensions
10693

‎gulpfile.js

100644100755
+11-43
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
var gulp = require('gulp');
22
var sass = require('gulp-sass');
3+
sass.compiler = require('sass-embedded');
34
var sassGlob = require('gulp-sass-glob');
45
var browserSync = require('browser-sync').create();
56
var postcss = require('gulp-postcss');
67
var autoprefixer = require('autoprefixer');
7-
var cssvariables = require('postcss-css-variables');
8-
var calc = require('postcss-calc');
98
var concat = require('gulp-concat');
109
var rename = require('gulp-rename');
1110
var uglify = require('gulp-uglify');
11+
var cleanCSS = require('gulp-clean-css');
1212
var purgecss = require('gulp-purgecss');
1313

1414
// js file paths
@@ -25,34 +25,22 @@ function reload(done) {
2525
done();
2626
}
2727

28-
/* Gulp watch task */
29-
// This task is used to convert the scss to css and compress it. No fallback for IE is created
28+
/* Gulp watch tasks */
29+
// This task is used to convert the scss to css and compress it.
3030
gulp.task('sass', function() {
3131
return gulp.src(scssFilesPath)
32-
.pipe(sassGlob())
33-
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
32+
.pipe(sassGlob({sassModules: true}))
33+
.pipe(sass().on('error', sass.logError))
3434
.pipe(postcss([autoprefixer()]))
3535
.pipe(gulp.dest(cssFolder))
36-
.pipe(browserSync.reload({
37-
stream: true
38-
}));
39-
});
40-
41-
// This task is used to convert the scss to css and compress it. A fallback for IE (style-fallback.css) is created
42-
gulp.task('sass-ie', function() {
43-
return gulp.src(scssFilesPath)
44-
.pipe(sassGlob())
45-
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
46-
.pipe(postcss([autoprefixer()]))
36+
.pipe(rename('style.min.css'))
37+
.pipe(cleanCSS())
4738
.pipe(gulp.dest(cssFolder))
4839
.pipe(browserSync.reload({
4940
stream: true
50-
}))
51-
.pipe(rename('style-fallback.css'))
52-
.pipe(postcss([cssvariables(), calc()]))
53-
.pipe(gulp.dest(cssFolder));
41+
}));
5442
});
55-
43+
// This task is used to combine all js files in a single scripts.min.js.
5644
gulp.task('scripts', function() {
5745
return gulp.src([utilJsPath+'/util.js', componentsJsPath])
5846
.pipe(concat('scripts.js'))
@@ -67,7 +55,7 @@ gulp.task('scripts', function() {
6755
stream: true
6856
}));
6957
});
70-
58+
// This task is used to reload the project whan changes are made to a html/scss/js file.
7159
gulp.task('browserSync', gulp.series(function (done) {
7260
browserSync.init({
7361
server: {
@@ -84,13 +72,6 @@ gulp.task('watch', gulp.series(['browserSync', 'sass', 'scripts'], function () {
8472
gulp.watch(componentsJsPath, gulp.series(['scripts']));
8573
}));
8674

87-
/* Gulp watch-ie task */
88-
gulp.task('watch-ie', gulp.series(['browserSync', 'sass-ie', 'scripts'], function () {
89-
gulp.watch('main/*.html', gulp.series(reload));
90-
gulp.watch('main/assets/css/**/*.scss', gulp.series(['sass-ie']));
91-
gulp.watch(componentsJsPath, gulp.series(['scripts']));
92-
}));
93-
9475

9576
/* Gulp dist task */
9677
// create a distribution folder for production
@@ -102,8 +83,6 @@ gulp.task('dist', async function(){
10283
await purgeCSS();
10384
// minify the scripts.js file and copy it to the dist folder
10485
await minifyJs();
105-
// copy the style-fallback (IE support) to the dist folder
106-
await moveCSS();
10786
// copy any additional js files to the dist folder
10887
await moveJS();
10988
// copy all the assets inside main/assets/img folder to the dist folder
@@ -141,17 +120,6 @@ function minifyJs() {
141120
});
142121
};
143122

144-
function moveCSS() {
145-
return new Promise(function(resolve, reject) {
146-
var stream = gulp.src(cssFolder+'/style-fallback.css', { allowEmpty: true })
147-
.pipe(gulp.dest(assetsFolder+'css'));
148-
149-
stream.on('finish', function() {
150-
resolve();
151-
});
152-
});
153-
};
154-
155123
function moveJS() {
156124
return new Promise(function(resolve, reject) {
157125
var stream = gulp.src([scriptsJsPath+'/*.js', '!'+scriptsJsPath+'/scripts.js', '!'+scriptsJsPath+'/scripts.min.js'], { allowEmpty: true })

‎main/assets/css/_base.scss

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
// --------------------------------
22

3-
// Base - essential CSS rules and utility classes
4-
// We suggestion you don't modify the base/* files -> use the custom-style/* files to create your bespoke style
3+
// Basic Style - Essential CSS rules and utility classes
54

65
// --------------------------------
76

8-
@import 'base/reset';
9-
@import 'base/breakpoints';
10-
@import 'base/mixins';
11-
@import 'base/colors';
12-
@import 'base/spacing';
13-
@import 'base/grid-layout';
14-
@import 'base/shared-styles';
15-
@import 'base/typography';
16-
@import 'base/icons';
17-
@import 'base/buttons';
18-
@import 'base/forms';
19-
@import 'base/z-index';
20-
@import 'base/visibility';
21-
@import 'base/accessibility';
22-
@import 'base/util';
7+
@forward 'base/breakpoints';
8+
@forward 'base/mixins';
9+
@forward 'base/grid-layout';
10+
11+
@use 'base/reset';
12+
@use 'base/colors';
13+
@use 'base/spacing';
14+
@use 'base/shared-styles';
15+
@use 'base/typography';
16+
@use 'base/icons';
17+
@use 'base/buttons';
18+
@use 'base/forms';
19+
@use 'base/z-index';
20+
@use 'base/visibility';
21+
@use 'base/accessibility';
22+
@use 'base/util';

‎main/assets/css/_custom-style.scss

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
// --------------------------------
22

3-
// Custom Style - your bespoke style
3+
// Custom Style - Your bespoke style
44

55
// --------------------------------
66

7-
@import 'custom-style/colors';
8-
@import 'custom-style/spacing';
9-
@import 'custom-style/shared-styles';
10-
@import 'custom-style/typography';
11-
@import 'custom-style/icons';
12-
@import 'custom-style/buttons';
13-
@import 'custom-style/forms';
14-
@import 'custom-style/util';
7+
@use 'custom-style/colors';
8+
@use 'custom-style/spacing';
9+
@use 'custom-style/shared-styles';
10+
@use 'custom-style/typography';
11+
@use 'custom-style/icons';
12+
@use 'custom-style/buttons';
13+
@use 'custom-style/forms';
14+
@use 'custom-style/util';

‎main/assets/css/base/_accessibility.scss

+16-18
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
@if variable-exists('cody-base-partials') == false or index($cody-base-partials, 'accessibility') {
2-
.sr-only { // content made available only to screen readers
3-
position: absolute;
4-
clip: rect(1px, 1px, 1px, 1px);
5-
clip-path: inset(50%);
6-
width: 1px;
7-
height: 1px;
8-
overflow: hidden;
9-
padding: 0;
10-
border: 0;
11-
white-space: nowrap;
12-
}
13-
14-
.sr-only-focusable { // focusable, visually hidden element
15-
&:not(:focus):not(:focus-within){
16-
@extend .sr-only
17-
}
18-
}
1+
.sr-only { // content made available only to screen readers
2+
position: absolute;
3+
clip: rect(1px, 1px, 1px, 1px);
4+
clip-path: inset(50%);
5+
width: 1px;
6+
height: 1px;
7+
overflow: hidden;
8+
padding: 0;
9+
border: 0;
10+
white-space: nowrap;
1911
}
12+
13+
.sr-only-focusable { // focusable, visually hidden element
14+
&:not(:focus):not(:focus-within){
15+
@extend .sr-only
16+
}
17+
}

‎main/assets/css/base/_breakpoints.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// how to edit the breakpoints -> copy the $breakpoints SASS map (remove the !default flag) and import it before 'base' and 'custom-style' in the _style.scss file
1+
// to edit the breakpoints, check the style.scss file
22

33
$breakpoints: (
44
xs: 32rem, // ~512px

‎main/assets/css/base/_buttons.scss

+20-23
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
11
// don't modify this file -> edit 📁 custom-style/_buttons.scss to create your custom buttons
22

3-
@if variable-exists('cody-base-partials') == false or index($cody-base-partials, 'buttons') {
4-
.btn { // basic button style
5-
position: relative;
6-
display: inline-flex;
7-
justify-content: center;
8-
align-items: center;
9-
white-space: nowrap;
10-
text-decoration: none;
11-
line-height: 1;
12-
font-size: var(--btn-font-size, 1em);
13-
padding-top: var(--btn-padding-y, 0.5em);
14-
padding-bottom: var(--btn-padding-y, 0.5em);
15-
padding-left: var(--btn-padding-x, 0.75em);
16-
padding-right: var(--btn-padding-x, 0.75em);
17-
border-radius: var(--btn-radius, 0.25em);
18-
}
3+
.btn { // basic button style
4+
position: relative;
5+
display: inline-flex;
6+
justify-content: center;
7+
align-items: center;
8+
white-space: nowrap;
9+
text-decoration: none;
10+
font-size: var(--btn-font-size, 1em);
11+
padding-top: var(--btn-padding-y, 0.5em);
12+
padding-bottom: var(--btn-padding-y, 0.5em);
13+
padding-left: var(--btn-padding-x, 0.75em);
14+
padding-right: var(--btn-padding-x, 0.75em);
15+
border-radius: var(--btn-radius, 0.25em);
16+
}
1917

20-
// default size variations
21-
.btn--sm { font-size: var(--btn-font-size-sm, 0.8em); }
22-
.btn--md { font-size: var(--btn-font-size-md, 1.2em); }
23-
.btn--lg { font-size: var(--btn-font-size-lg, 1.4em); }
18+
// default size variations
19+
.btn--sm { font-size: var(--btn-font-size-sm, 0.8em); }
20+
.btn--md { font-size: var(--btn-font-size-md, 1.2em); }
21+
.btn--lg { font-size: var(--btn-font-size-lg, 1.4em); }
2422

25-
// button with (only) icon
26-
.btn--icon { padding: var(--btn-padding-y, 0.5em); }
27-
}
23+
// button with (only) icon
24+
.btn--icon { padding: var(--btn-padding-y, 0.5em); }

0 commit comments

Comments
 (0)